使用 kineticjs 和补间的持久动画答案

【问题标题】：Persistent animation with kineticjs and tweens使用 kineticjs 和补间的持久动画
【发布时间】：2013-09-11 00:28:16
【问题描述】：

我有一个由 kineticjs 中的补间序列定义的“周期性”动画。我希望动画在页面仍然响应其他事件的情况下永远重复。最好的方法是什么？定义一个自称是好策略的函数吗？

【问题讨论】：

标签： javascript animation kineticjs

【解决方案1】：

您可以通过onFinish 属性使用一系列Kinetic.Tween，如下所示：

    var tween = new Kinetic.Tween({
        node: hexagon,
        duration: 1,
        x: 50,
        y: 250,
        onFinish: function () {
            var tween2 = new Kinetic.Tween({
                node: hexagon,
                duration: 1,
                x: 550,
                y: 250,
                onFinish: function () {
                    var tween3 = new Kinetic.Tween({
                        node: hexagon,
                        duration: 1,
                        x: 300,
                        y: 400,
                        onFinish: function () {
                            //Tween back to original position so it looks like we're in a loop
                            var tween4 = new Kinetic.Tween({
                                node: hexagon,
                                duration: 1,
                                x: 50,
                                y: 250,
                                onFinish: function () {
                                    tween.play();
                                }
                            });
                            tween4.play();
                        }
                    });
                    tween3.play();
                }
            });
            tween2.play();
        }
    });

    tween.play();

在最后一个补间中，您想播放原始补间 onFinish 以便它创建无限循环。

JSFIDDLE

【讨论】：

【解决方案2】：

您可以使用带有setTimeout 调用自身的函数或仅使用一次setInterval。

【讨论】：