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

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 正是我要找的！对于 array/collection 中的每个元素，它几乎都是一个单独的 Tween。第五个参数是 stagger 并指定每个元素的补间之间的时间。

Amount of time in seconds (or frames for frames-based tweens) to stagger the start time of each tween. For example, you might want to have 5 objects move down 100 pixels while fading out, and stagger the start times by 0.2 seconds - you could do: TweenMax.staggerTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"+=100", opacity:0}, 0.2).

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

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

示例：

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：具有顺序变量的多个元素

TweenMax: multiple elements with sequential variables

gsap