如何恢复动画KineticJS画布？答案

【问题标题】：How can resume animation Kineticjs canvas?如何恢复动画KineticJS画布？
【发布时间】：2013-12-29 07:54:33
【问题描述】：

停止后恢复动画有问题。有什么建议吗？我使用 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);

【问题讨论】：

标签： animation html5-canvas kineticjs

【解决方案1】：

如果您想要一个重复的动画，您可以考虑使用补间。

当补间完成时，它会触发完成的事件。在完成的处理程序中，您可以：

使用 tween.reset 将补间重置到起始位置，
使用 setTimer 启动定时器等待 2 秒，
当计时器触发时，使用 tween.start 重新启动补间。

【讨论】：