1

デモ

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });
  var layer = new Kinetic.Layer();

  var imageObj = new Image();
  imageObj.onload = function() {
    var yoda = new Kinetic.Image({
      x: 200,
      y: 50,
      image: imageObj,
      width: 106,
      height: 118
    });

    // add the shape to the layer
    layer.add(yoda);

    // add the layer to the stage
    stage.add(layer);
  };
  imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

  var amplitude = 150;
  var period = 2000;
  // in ms
  var centerX = stage.getWidth() / 2;

  var anim = new Kinetic.Animation(function(frame) {
    yoda.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
  }, layer);

  anim.start();

ページの読み込み時に、ヨーダの画像を左から右に、たとえば 50px でアニメーション化するにはどうすればよいですか? イージングでもこれを行うことは可能ですか？キャンバスを初めて使用します。助けてくれてありがとう。これは、代わりに jQuery に任せた方が適しているでしょうか?

4

1 に答える 1

0

コンソールを見ると、それyodaが定義されていないことがわかります。これはimage.onload、関数であり、関数内で作成された変数がその関数内でのみ表示されるために発生しています。yodaそのため、関数の外側で作成する必要があります。

また、画像がロードされた後にのみアニメーションを開始します。

修正されたフィドル

于 2013-06-07T21:46:45.843 に答える