Animation 如何恢复动画Kineticjs画布？

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

var阶段=新的动力学阶段({
容器：“画布”，
身高：484，
宽度：478
});
var layer=新的动能层（）；
阶段。添加（层）；
var img=新图像（）；
img.src='images/ani/bullet_blue.png'；
var circle=新图像（）；
circle.src='images/ani/1.png'；
var shapeCircle=新的动力学图像({
x:10，
y:10，
图片：圆圈，
宽度：圆圈。宽度，
高度：圆圈高度，
偏移量：{
x:0,，
y:0
}
});
图层。添加（shapeCircle）；
layer.draw（）；
函数动画（点、形状、持续时间、循环、回调）{
层。添加（形状）；
window.anim=新的动能.Animation（函数（帧）{
var time=frame.time，timeDiff=frame.timeDiff，frameRate=frame.frameRate；
变量百分比=时间/持续时间，比例=0.5，不透明度=0；
如果（百分比<0.05 | |百分比>0.95）不透明度=0；
else不透明度=1；
//比例尺计算
如果（百分比<0.5）{
比例+=百分比
}
否则，如果（百分比>0.5）{
比例=1-（百分比-0.5）
}
如果（百分比>1）{
动画停止（）；
百分比=0；
setTimeout（函数（）{anim.start（）；}，500）；
}否则{
var pos=数学单元（百分比*点数长度）；
pos=pos>（points.length-1）？（points.length-1）：pos；
如果（pos==points.length-1）动画停止（）；
形状.设置刻度（刻度，刻度）；
设置不透明度（不透明度）；
设置位置（点[pos].x，点[pos].y）；
}
}，层）；
anim.start（）；
}
动画（点1，新动能图）({
x:points1[0].x，
y:点1[0]。y，
图片：img，
宽度：img.width，
高度：img.height，
不透明度：0，
scaleX:0.5，
斯卡利：0.5，
偏移量：{
x:15，
y:30
}
}), 2000);
< /代码> 如果你想重复动画，你可以考虑TWEN。p>
当tween结束时，它触发一个已完成事件。在完成的处理程序中，您可以：


使用tween.Reset将tween重置到起始位置
使用setTimer启动计时器等待2秒
计时器启动时，使用tween.start重新启动tween