javascript - 使用 kineticjs 和补间的持久动画

Question

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

Answer 1

你可以使用一系列的Kinetic.Tween配合使用的onFinish属性，像这样：

    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

Answer 2

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