TweenMax: несколько элементов с последовательными переменными

Question

Есть ли способ сделать что-то вроде +1 для задержек при анимации массива/коллекции объектов?

Скажем, models содержит 5 элементов, и я хочу показать их последовательно с разницей в .2 секунд после задержки не менее 1 секунды.

Обычно я хотел бы сделать петлю 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-й параметр, а не свойство данных/опций obect. Он будет срабатывать после того, как все анимации для всех элементов будут завершены.

Пример:

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 

    } 
);