javascript - 使用KineticJS在HTML5 Canvas上进行线性动画制作。

我正在开发基于HTML5画布的迷你游戏，但似乎无法组织线性动画。

我正在使用以下代码向画布添加“目标”对象：

var target = new Kinetic.Shape(function(){
    var context = this.getContext();
    context.drawImage(images.target, x, y, 2*radius, 2*radius);
    context.beginPath();
    context.rect(x, y, 2*radius, 2*radius);
    context.closePath();
});
gameLayer.add(target);

我需要使用线性动画对该对象进行动画处理，尝试以下代码：

var mx = x;
setInterval(function(){
   mx -= 1;
   target.setPosition(mx, y);
   gameLayer.draw();
}, 500);

但是，它没有用！怎么了？

最佳答案

我不知道为什么它不起作用，但是我找到了解决方法：

var mx = x;
var my = target.y;
target.transitionTo({
   x: mx,
   y: my,
   rotation: 0,
   scale: {x: 1, y: 1},
   duration: 1, //time to transition in second
});

您可以在以下地址查看更多详细信息：http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/

关于javascript - 使用KineticJS在HTML5 Canvas上进行线性动画制作。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9158281/