Преобразование jQuery's eq() в Greensock?

Question

Я хотел бы использовать GSAP (Greensock) для анимации непрозрачности кучи divs определенного класса. Это работает функция JQuery Я использую, и не могу понять, как получить его преобразовать в GSAP:

function showEvents() { 
    eventList.eq(eventCount++).animate({ 
     opacity: 1 
    }, 150, showEvents); 
}; 
showEvents(); 

Как вы можете видеть, он прекращает стрельбу, когда все EventList элементы были анимированные .. Как это сделать с GSAP?

Answer 1

function showEvents() { 

    TweenMax.to(eventList.eq(eventCount++), 0.150, { 
     autoAlpha: 1, 
     ease: Power1.easeInOut, 
     onComplete: showEvents}); 
} 

Здесь:

TweenMax: является модулем, который имеет функциональные возможности, чтобы сделать GSAP анимацию.

.to: - метод для анимации. Значит, он изменит состояние выбранного вами элемента и приведет их к заданному состоянию. Существует другой метод «от», который означает «анимировать от» заданного условия в параметре к текущему состоянию.

Аргументы:

Первый аргумент является селектор, выберите элементы, где вы хотите изменить. если вы используете JQuery, вы можете использовать селектор jquery.

Второй аргумент - продолжительность анимации в секундах. В моем примере это 150 мс.

Третий Аргумент - параметры анимации. Вы можете увидеть их в деталях here about TimelineLite. В этом примере «autoAlpha: 0» означает, что выбранные элементы будут иметь альфа-нуль в конце анимации (т. Е. Через 1 секунду). «легкость: Power1.easeInOut» - это простой способ, который вы хотите выполнить. Есть много возможностей, которые вы можете проверить и выбрать, что хотите. См. jumpstart учебник GreenSock, чтобы увидеть ease methods в действии.

Answer 2

Если ваша цель состоит в том, чтобы оживить их в виртуализированного моды (один-после-The-другой), вы можете сделать:

TweenMax.staggerTo(eventList, 0.15, {opacity:1}, 0.15); 

Обратите внимание на длительность (второй параметр, 0,15 секунды) такая же, как количество ступеней (4-й параметр, 0,15 секунды), таким образом, они бегут спина к спине. Но вы можете играть с этими значениями, чтобы вещи частично перекрывались или что угодно.

---

Если вы должны быть в состоянии контролировать всю группу/последовательность (например, пауза/резюме/реверс/Timescale), вы можете использовать TimelineLite:

var tl = new TimelineLite(); 
tl.staggerTo(eventList, 0.15, {opacity:1}, 0.15); 

//now you can control everything like: 
tl.pause(); 
tl.resume(); 
tl.restart(); 
tl.seek(0.6); 
tl.timeScale(0.5); //half speed 
... 

я настоятельно рекомендую смотреть «начало» видео на http://greensock.com/get-started-js/, если вы еще этого не сделали. Как только вы получите поддержку API, вы, вероятно, полюбите его и поймете, сколько еще вы можете сделать.

Примечание: @Yogee предложил использовать TimelineLite.to(), но нет такого статического метода. Это метод экземпляра. Поэтому его код не сработает. Я уверен, что он просто хотел использовать TweenMax или метод экземпляра TimelineLite :)