1

我需要更好地理解 kinetic.js 动画。我正在使用http://www.html5canvastutorials.com/kineticjs/html5-canvas-stop-animation-with-kineticjs/找到的教程。我使用了代码并让我的动画将我的矩形设置在 x 位置 100。我的问题是如何移动矩形以实现平滑过渡。我无法理解 html5canvastutorials.com 上对 kinetic.js 动画的解释。这是我的代码。

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

var block = new Kinetic.Rect({
    x: 100,
    y: 465,
    width: 14,
    height: 14,
    stroke: 'black',
    strokeWidth: 1
});

layer.add(block);
stage.add(layer);

var moveLeft = new Kinetic.Animation(function(frame) {
    block.setX(1);
}, layer);

var moveRight = new Kinetic.Animation(function(frame) {
    block.setX(100);
}, layer);

document.addEventListener('keydown', function(e){
    switch(e.keyCode) {
        case 37:
            moveLeft.start();
            break;
        case 39:
            moveRight.start();
            break;
        default:
            moveLeft.stop();
            moveRight.stop();
            break;
    }
});

有人可以给我一个如何创建平滑动画的例子，以及如何重复这个过程的一个很好的解释。也不确定帧定时是如何工作的。

4

2 回答 2

0

我认为你应该看看这个变化：

API 更改了新的 Tween 类。旧的 Transition 课程已退役。对于高级补间，例如沿曲线补间或构建时间线，KineticJS 推荐无缝集成的 GreenSock 动画平台。

于 2013-05-17T23:49:09.667 回答
0

对于简单的补间，您可以使用内置的补间类。这是一个例子：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/

于 2013-05-22T04:16:37.420 回答