Question

我需要更好地理解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;
    }
});

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

Answer 1

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

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

Answer 2

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

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

kinetic.js中的平滑动画（html5画布）

2 个答案: