Question

Demo

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吗？

Answer 1

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

仅在加载图像后启动动画。

Modified Fiddle

在页面加载时在画布中移动图像

1 个答案: