1

我正在开发一个基于 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);

但是,它没有用!怎么了?

4

2 回答 2

2

我不知道为什么它不起作用,但我找到了这样做的方法:

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/

于 2012-03-22T13:12:27.713 回答
0

他们有一个动画功能。这样你就可以

var myAnimationName = new Kinetic.Animation(function (frame) {
    console.log(frame.time);
    target.setX(target.getX() + 1);
    if (target.getX() < somePosition) {
        target.setX(somePosition);
        this.stop();
    }
}, layer);
myAnimationName.start();

frame.time如果需要,您也可以使用

于 2013-10-10T15:23:01.833 回答