0

タイムラインを使用して、リピーター アイテムをアニメーション化 (トゥイーン) しています。リピーターには複数のアイテムがあります。タイムラインに最初の 3 つのアイテムを表示し、次にすべてのアイテムの最後まで次の 3 つのアイテムを表示したいと考えています。

リピーターのアイテムが完成したら、このプロセスを繰り返します。私のロジックはすべての項目を表示し、最後に到達すると繰り返しますが、3 つのセットに対して実行したいと思います。誰か提案はありますか？ 

 <script type="text/javascript">
   $(document).ready() {
        CSSPlugin.defaultTransformPerspective = 600;
        var t1 = new TimelineMax({ repeat: 1000, yoyo: true, repeatDelay: .5 });

            $('.tick').each(function (index, item) {

                if (index == 0) {
                    t1.to(item, .3, { x: 20, ease: Back.easeOut });
                    t1.to(item, 0.4, { x: 0, ease:Back.easeOut, opacity:50 })
                }
                else {

                    t1.from(item, 0.7, { x: 100, rotationX: -90, transformOrigin: "50% 0px", ease: Back.easeOut })
                }
            });
    });
   </script>

誰かがそれを行うためのより良い方法を提案できますか?

4

1 に答える 1

0

特別なプロパティの TimelineMax コールバックを調べましたか:

http://api.greensock.com/js/com/greensock/TimelineMax.html

onRepeatコールバックを使用すると、繰り返しごとに関数を呼び出すことができます

onRepeat : Function - タイムラインが繰り返されるたびに呼び出される関数

onRepeatParams : Array - onRepeat 関数を渡すパラメータの配列。たとえば、new TimelineMax({repeat:3, onRepeat:myFunction, onRepeatParams:[mc, "param2"]}); パラメーターの 1 つでタイムライン インスタンス自体を自己参照するには、次のように "{self}" を使用します: onRepeatParams:["{self}", "param2"]

onRepeatScope : Object - onRepeat 関数のスコープを定義します (「this」がその関数内で参照するもの)。

var t1 = new TimelineMax({
        repeat: 1000, 
        yoyo: true, 
        repeatDelay: .5, 
        onRepeat: myFunction, // use function or anonymous function(){}
        onRepeatParams: [mc, "param2"] // pass parameters to onRepeat callback
});
于 2013-11-15T17:36:24.440 に答える