0

Kinetic js を使用してキャンバス内のテキストをアニメーション化しようとしています

キャンバスサイズ 940×600

アニメーションは x と y

配置がうまくいかないようです。垂直方向は上部で開始および終了し、水平方向は左側で開始および終了したいと考えています。

現在、彼らは正しい方向に動いていますが、キャンバスの外側で開始および終了しています。

これは設定された振幅に関係している可能性がありますが、私はjsコーディングが得意ではありません。

http://jsfiddle.net/eev8u/3/

<script defer="defer">
  var stage = new Kinetic.Stage({
    container: 'horandvert',
    width: 940,
    height: 600
  });
  var layer = new Kinetic.Layer();

  var hbox = new Kinetic.Text({
    x: 50,
    y: 240,
    fontSize: 38,
    fontFamily: 'Calibri',
    text: 'Horizontal',
    fill: '#317d37',
    padding: 0,
  });

  var vbox = new Kinetic.Text({
    x: 330,
    y: 50,
    fontSize: 38,
    fontFamily: 'Calibri',
    text: 'Vertical',
    fill: '#317d37',
    padding: 0,
  });

  layer.add(hbox);
  layer.add(vbox);
  stage.add(layer);

  var amplitude = 400;
  var period = 3000;

  var anim = new Kinetic.Animation(function(frame) {
  hbox.setX (amplitude * Math.sin(frame.time * 1 * Math.PI / period)); 
  vbox.setY(amplitude * Math.sin(frame.time * 1 * Math.PI / period));
  }, layer);

  anim.start();      
</script>
4

1 に答える 1