jQuery动画序列
我的问题已被问过一百万次，但我找不到满足我需求的答案。 我需要的是一个允许我按顺序播放动画的function。
我正在开发一个包含许多CSS3过渡和jQuery / jQueryUI动画的网站。 我将这些动画分解为基本的独立function，例如：
- slideUpSomething（）;
- fadeOutSomethingElse（）;
- showThisOtherDude（）;
这些function可以是任何东西：
- animationA（）;
- animationB（）;
- animationC（）;
使用回调或队列会使代码无法管理。 说实话，我现在还不够好控制它们（计划稍后学习）……链接似乎不可能，因为我以不同的方式动画不同的元素。 使用计时器对我来说似乎很糟糕。
我梦寐以求的是一个function“animateSequentially（sequence）”，其工作原理如下：
$(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] ); }); }); 要求如下：
- 动画A到Z应该在另一个之后发生
- 动画数组可以是任意长度
显然，编码的方式并不重要，我不在乎是否需要使用数组或小号，只要它没有嵌套回调多年没有…任何人都可以帮助我找到诀窍？
或者，如果您认为我应该以不同的方式编写代码，我会接受任何建议……
吻 ！
好的就是这件事。 我将从快速入门开始，但会尝试引导您尽可能多的阅读链接。 我会尽量保持简短。
GSAP是一套出色的工具，最初是在Flash辉煌时代开始的，后来被带入了JavaScript世界。 有4个主要产品： TweenLite ， TimelineLite ， TimelineMax和TweenMax以及其他一些产品 。
我通常在我的项目中加载到TweenMax的cdnjs链接，因为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; }
所以建议，你将动画数组作为参数传递给你的第一个动画并传递它。
function animationX(var anim){ ... ... if(anim && anim.length > 0) anim.shift()(anim); }