使用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一次。