Question

我正在使用时间轴来动画（补间）我的Repeater项目。 Repeater中有多个项目。我想在时间轴中显示前三项，然后在所有项目结束时显示接下来的三项。

完成Repeater中的项目后，重复此过程。我的逻辑显示所有项目，并在它到达结束时重复，但我想为三个一组做。有人有什么建议吗？

 <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>

有人可以建议我做什么更好的方法吗？

Answer 1

您是否在特殊属性中查看了TimelineMax回调：

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

如果你使用 onRepeat 回调..每次重复都可以调用一个函数

onRepeat ：功能 - 每次重复时间线时应调用的函数

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
});

循环中继器中的项目以显示时间轴

1 个答案: