Как возобновить анимацию холста Kineticjs?

У меня проблема с возобновлением анимации после ее остановки. Любое предложение ? Я использую кинетику, чтобы заставить элемент двигаться по пути, после того, как я дойду до конца, анимация остановится на 2 секунды, а затем начнется снова.

вот мой код:

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

person NevenHuynh    schedule 11.12.2013    source источник


Ответы (1)


Если вам нужна повторяющаяся анимация, вы можете вместо этого рассмотреть анимацию.

Когда анимация завершается, она запускает завершенное событие. В этом готовом обработчике вы можете:

  • Сбросьте анимацию в исходное положение, используя tween.reset,
  • Запустите таймер на 2 секунды, используя setTimer,
  • Когда таймер сработает, перезапустите анимацию с помощью tween.start.
person markE    schedule 11.12.2013