jQuery animations sequence

问题:

My question has already been asked a million times, but yet I can't find an answer that satisfies my needs. What I need is a function allowing me to play animations sequentially.

I'm developping a website containing many CSS3 transitions and jQuery/jQueryUI animations. I have broken those animations into elementary standalone functions such as :

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

Those functions could be anything :

• animationA();
• animationB();
• animationC();

Using callbacks or queues makes the code impossible to manage. And to be honest, I'm not good enough to control them now (planning on learning later though)... Chaining seems impossible, since I'm animating different elements in different ways. Using timers seems awful to me.

What I'm dreaming of is a function "animateSequentially(sequence)" working as follows :

$(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]
        );
    });
});

The requirements are as follows :

• animations A through Z should happen one AFTER another
• the array of animations can be of any length

Obviously, the way of coding it doesn't matter, I don't care whether I need to use an array or a trumpet, as long as it works without nesting callbacks for ages... Anyone can help me figure the trick ?

Alternatively, if you think I should code things differently, I'm open to any advice...

Kisses !

回答1:

Ok here is the thing. I am going to start with a quick intro but will try to lead you to as many reading links as possible. And I will try to keep it all short.

GSAP is a fantastic suite of tools that originally started back in the Flash glory days, and has since been brought into JavaScript world. There are 4 main products: TweenLite, TimelineLite, TimelineMax and TweenMax plus a few more.

I usually load up a cdnjs link to TweenMax in my projects because TweenMax contains all of the above.

There are many ways to do what you are trying to do in TweenMax, here is one of them:

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>

Above, I am using two out of the plethora of methods available i.e. the .to() and .addCallback() methods.

There is so much more you can do with this tool. You will be amazed. I encourage you to explore.

Further reading:

• Getting Started with GSAP: Link.
• Jump Start: GSAP JS: Link.
• Video: Sequence JavaScript Animations Like a Pro with GSAP's TimelineLite: Link.
• Timeline Tip: Understanding the Position Parameter: Link.
• Simple GreenSock Tutorial - Your first steps with GSAP: Link.
• GreenSock Cheat Sheet: Link.
• Codepen demos: Link.

Hope you find this information useful.

回答2:

So suggestion, you pass the array of animations as argument to your first animation and you pass it on.

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

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