帶有dynamicjs和補間的永久動畫

Question

我有一個由dynamicjs中的補間序列定義的“定期”動畫。 我希望動畫能夠永久重復，同時頁面仍會響應其他事件。 哪種方法最好？ 定義一個自稱為好策略的函數嗎？

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 。