javascript - 我正在尝试使用 Kineticjs 为我的 Sprite 动画添加计时

Question

我正在尝试设置动画的持续时间，即我希望它需要 1.5 秒才能移动，但是，它仍然会立即进行转换。

Javascript

var shift1 = new Image();
shift1.onload = function(){
    var firstShift = new Kinetic.Sprite({
        x: 600,
        y: 221,
        scaleX: 0.45,
        scaleY: 0.47,
        image: shift1,
        animation: 'pos1',
        animations: {
            pos1: [1, 1, 89, 220],
            pos2: [105, 1, 100, 220]
        },
        frameRate: 5,
        frameIndex: 0
    });
    image_layer.add(firstShift);
    firstShift.start();
    document.getElementById('play').addEventListener('click', function(){
        firstShift.animation('pos2').setY(198).frameRate(1).start();
    });
};
shift1.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

HTML

<div id="controls">
    <input type="button" id="play" value="Play">
    <input type="button" id="pause" value="Pause">
    <input type="button" id="reset" value="Stop">
    <input type="button" id="reverse" value="< < <">
    <input type="button" id="seek" value="> > >">
</div>

Answer 1

我实际上已经弄清楚了，并将为可能遇到此问题的其他人发布我的答案。

var shift1 = new Image();
shift1.onload = function(){
    var firstShift = new Kinetic.Sprite({
        x: 600,
        y: 221,
        scaleX: 0.45,
        scaleY: 0.47,
        image: shift1,
        animation: 'pos1',
        animations: {
            pos1: [1, 1, 89, 220],
            pos2: [105, 1, 100, 220]
        },
});
image_layer.add(firstShift);
document.getElementById('play').addEventListener('click', function(){
    firstShift.animation('pos1').start();
    tween = new Kinetic.Tween({
        node: firstShift,
        duration: 1,
        onFinish: function(){
            firstShift.animation('pos2');
        }
    });
tween.play();
};
shift1.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';