How can resume animation Kineticjs canvas?

Question

I have problem with resume animation after stop it. Any suggestion ? I using kineticjs to make element run along the path, after i reach the end, the animation stop for 2 second then start again.

here my code :

var stage = new Kinetic.Stage({
                container: 'canvas',
                height: 484,
                width: 478
            });

            var layer = new Kinetic.Layer();
            stage.add(layer);

            var img = new Image();
            img.src = 'images/ani/bullet_blue.png';

            var circle = new Image();
            circle.src = 'images/ani/1.png';

            var shapeCircle = new Kinetic.Image({
                x: 10,
                y: 10,
                image: circle,
                width: circle.width,
                height: circle.height,
                offset: {
                    x: 0,
                    y: 0
                }
            });

            layer.add(shapeCircle);
            layer.draw();

            function animation(points, shape, duration, loop, callback) {
                layer.add(shape);
                window.anim = new Kinetic.Animation(function (frame) {
                    var time = frame.time, timeDiff = frame.timeDiff, frameRate = frame.frameRate;

                    var percent = time / duration, scale = 0.5, opacity = 0;

                    if (percent < 0.05 || percent > 0.95) opacity = 0;
                    else opacity = 1;

                    // scale calculate
                    if (percent < 0.5) {
                        scale += percent
                    }
                    else if (percent > 0.5) {
                        scale = 1 - (percent - 0.5)
                    }

                    if (percent > 1) {
                        anim.stop();
                        percent = 0;
                        setTimeout(function () { anim.start(); }, 500);

                    } else {
                        var pos = Math.ceil(percent * points.length);
                        pos = pos > (points.length - 1) ? (points.length - 1) : pos;
                        if (pos == points.length - 1) anim.stop();
                        shape.setScale(scale, scale);
                        shape.setOpacity(opacity);
                        shape.setPosition(points[pos].x, points[pos].y);
                    }
                }, layer);
                anim.start();

            }

            animation(points1, new Kinetic.Image({
                x: points1[0].x,
                y: points1[0].y,
                image: img,
                width: img.width,
                height: img.height,
                opacity: 0,
                scaleX: 0.5,
                scaleY: 0.5,
                offset: {
                    x: 15,
                    y: 30
                }
            }), 2000);

score 0 · Answer 1 · answered Dec 11 '13 at 18:28

If you want a repeating animation, you might consider a tween instead.

When a tween finishes, it fires a finished event. In that finished handler, you can:

Reset the tween to the starting position using tween.reset,
Start a timer to wait 2 seconds using setTimer,
When the timer fires, restart the tween using tween.start.

How can resume animation Kineticjs canvas?

1 Answers1