Question

有没有办法在补间数组/对象集合时做+1这样的延迟？

假设models包含5个元素，我希望在至少延迟1秒之后按顺序显示它们，差异为.2秒。

通常情况下，我会执行for / $.each循环，补充每个元素本身并计算delay，如下所示：delay: 1 + (index * .2)

有没有办法在没有我自己的包裹循环的情况下做到这一点？像delay: + .2或其他什么？

var models = $('.model img');
TweenMax.from(models, 1, {
    opacity: 0,
    transform: 'translateZ(-80px)',
    delay: 1,                 // how to delay each element differently?
    clearProps: 'all',
    onComplete: function() {
        console.log('animation complete');
    }
});

Answer 1

我正在寻找

.staggerFrom！对于数组/集合中的每个元素，它几乎都是一个单独的Tween。第五个参数是stagger，它指定每个元素的补间之间的时间。

以秒为单位的时间（或基于帧的补间的帧数）错开每个补间的开始时间。例如，您可能想要有5个物体向下移动100个像素，同时淡出，并且错开了开始时间为0.2秒 - 你可以这样做：TweenMax.staggerTo（[mc1， mc2，mc3，mc4，mc5]，1，{y：“+ = 100”，不透明度：0}，0.2）。

来源：http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerTo/

我尝试过的包装循环的缺点是每次迭代都会调用onComplete函数。对于staggerFrom / staggerTo也是如此，但此函数具有onCompleteAll，如源链接中所述。但它是第6个参数，而不是数据/选项对象的属性。在完成所有元素的所有动画后，它将触发。

示例：

TweenMax.staggerFrom(
    '.model img', 
    1, // <-- this is the overall delay
    {
        opacity: 0,
        transform: 'translateZ(-50px)',
        delay: .3,
        onComplete: function() {
            // a single animation is complete
        }
    }, 
    .2, // <--- this is the time between the tweens.
    function() {

        // all animations are complete

    }
);

TweenMax：具有顺序变量的多个元素

1 个答案: