Search code examples
javascriptjqueryanimationspritekineticjs

I'm trying to add timing to my sprite animation with Kineticjs


I'm trying to set a duration on my animation I.E. I want it to take 1.5 seconds for this to move, however, it's still making the transition instantly.

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>

Solution

  • I actually figured it out and am going to be posting my answer for anyone else who would may encounter this problem.

    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';