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();

一旦页面加载，我将如何让 yoda 图像从左到右进行动画处理，比如 50px？是否也可以通过缓动来做到这一点？对画布非常陌生，感谢您的帮助。这会更适合留给jQuery吗？

4

1 回答 1

0

如果您查看控制台，您会发现yoda未定义。发生这种情况是因为image.onload是一个函数，而在函数内部创建的变量仅在该函数内部可见。所以你需要yoda在函数之外创建。

也只有在图像加载后才开始动画。

修改过的小提琴

于 2013-06-07T21:46:45.843 回答