0

我正在使用时间轴为我的中继器项目设置动画(补间)。中继器中有多个项目。我想在我的时间轴中显示前三个项目,然后显示接下来的三个项目,直到所有项目结束。

完成中继器中的项目后,重复此过程。我的逻辑显示所有项目并在到达终点后重复,但我想为三个项目做这件事。有人有什么建议吗?

 <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"]}); 要在参数之一中自引用时间线实例本身,请使用“{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 回答