Последовательность анимации jQuery

Question

Мой вопрос уже задан в миллион раз, но я не могу найти ответ, который удовлетворяет мои потребности. Мне нужна функция, позволяющая мне последовательно воспроизводить анимацию.

Я разрабатываю сайт, содержащий много переходов CSS3 и анимацию jQuery/jQueryUI. Я разбил эти анимации на элементарные автономные функции, такие как:

• slideUpSomething();
• fadeOutSomethingElse();
• showThisOtherDude();

Эти функции могут быть все что угодно:

• animationA();
• анимацияB();
• анимацияC();

Использование обратных вызовов или очередей делает код невозможным для управления. И, честно говоря, я недостаточно хорош, чтобы контролировать их сейчас (планирование позже обучения) ... Цепочка кажется невозможной, так как я анимация различных элементов по-разному. Использование таймеров кажется ужасным для меня.

Что я мечтаю это функция «animateSequentially (последовательность)» работает следующим образом:

$(document).ready(function(){ 

    function animationA() {/*declaration*/} 
    function animationB() {/*declaration*/} 
    function animationC() {/*declaration*/} 
    ... 
    function animationZ() {/*declaration*/} 

    function animateSequentially(sequence) { 
     /* Here is the code I need */ 
    } 

    $('#someButton').click(function(){ 
     animateSequentially(
      [animationA, 
      animationB, 
      animationC, 
      ...  , 
      animationZ] 
     ); 
    }); 
}); 

Требования заключаются в следующем:

• анимации от А до Z должно произойти один за другой
• массив анимации может быть любой длины

Очевидно, что способ кодирования не имеет значения, мне все равно, нужно ли мне использовать массив или трубу, если она работает, не вставляя обратные вызовы на века ... Кто-нибудь может помочь мне понять трюк?

С другой стороны, если вы думаете, что я должен закодировать все по-другому, я открыт для любых консультаций ...

Целых!

Answer 1

Хорошо, вот что. Я начну с быстрого вступления, но постараюсь привести вас к максимально возможному количеству ссылок на чтение. И я постараюсь все это сделать.

GSAP - фантастический набор инструментов, который первоначально начинался в дни славы Flash, и с тех пор был представлен в мире JavaScript.Есть 4 основных продуктов: TweenLite, TimelineLite, TimelineMax и TweenMax плюс few more.

Обычно я загружаю cdnjs link to TweenMax в свои проекты, потому что TweenMax содержит все вышесказанное.

Есть много способов сделать то, что вы пытаетесь сделать в TweenMax, вот один из них:

var divs = document.querySelectorAll('div'); 
 
var duration = .4; 
 
var timeline = new TimelineMax({ paused: true }); 
 
timeline.to(divs[0], duration, { y: 200, ease: Power4.easeOut }); 
 
timeline.addCallback(doSomething, duration, [], this); 
 
timeline.to(divs[1], duration, { rotation: 180, ease: Power4.easeOut }); 
 
timeline.addCallback(doSomethingElse, duration * 2, [], this); 
 
timeline.to(divs[2], duration, { opacity: 0, ease: Power4.easeOut }); 
 
timeline.addCallback(danceForMe, duration * 3, [], this); 
 
timeline.to(divs[3], duration, { scale: 2, transformOrigin: '50% 0%', ease: Power4.easeOut }); 
 
timeline.addCallback(moveIt, duration * 4, [], this); 
 
timeline.play(); 
 

 
function doSomething() { console.log('doSomething'); } 
 
function doSomethingElse() { console.log('doSomethingElse'); } 
 
function danceForMe() { console.log('danceForMe'); } 
 
function moveIt() { console.log('moveIt'); }

html, body { margin: 0; padding: 0; } 
 
div { float: left; width: 100px; height: 100px; } 
 
div:nth-child(odd) { background-color: #cc0; } 
 
div:nth-child(even) { background-color: #0cc; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> 
 
<div>&nbsp;</div> 
 
<div>&nbsp;</div> 
 
<div>&nbsp;</div> 
 
<div>&nbsp;</div>

Выше, я использую два из множества методов доступный, т.е. .to() и .addCallback() методы.

С этим инструментом можно сделать гораздо больше. Вы будете поражены. Я призываю вас исследовать.

Дальнейшее чтение:

• Начало работы с GSAP: Link.
• Начало стрельбы: GSAP JS: Link.
• Видео: Последовательность JavaScript Анимации Как и в случае с GSeline TimelineLite: Link.
• Совет по временной шкале: Понимание параметра положения: Link.
• Простой учебник GreenSock - ваши первые шаги с GSAP: Link.
• GreenSock Cheat Sheet: Link.
• Codepen demos: Link.

Надеюсь, что эта информация вам полезна.

Answer 2

Итак, вы передадите массив анимаций в качестве аргумента в свою первую анимацию, и вы передаете ее.

function animationX(var anim){ 
    ... 
    ... 

    if(anim && anim.length > 0) 
     anim.shift()(anim); 
}