javascript - kineticjs と tween による永続的なアニメーション

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 を1 回だけ使用することもできます。