jQuery 动画序列
jQuery animations sequence
我的问题已经被问了一百万次了,但我仍然找不到满足我需要的答案。我需要的是一个允许我顺序播放动画的功能。
我正在开发一个包含许多 CSS3 转换和 jQuery/jQueryUI 动画的网站。我已将这些动画分解为基本的独立函数,例如:
- slideUpSomething();
- fadeOutSomethingElse();
- showThisOtherDude();
这些函数可以是任何东西:
- 动画A();
- 动画B();
- 动画C();
使用回调或队列使代码无法管理。老实说,我现在还不足以控制它们(虽然计划稍后学习)......
链接似乎是不可能的,因为我以不同的方式为不同的元素设置动画。
使用计时器对我来说似乎很糟糕。
我梦想的是一个函数 "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 应该一个接一个地发生
- 动画数组可以是任意长度
显然,编码方式无所谓,我不关心我是否需要使用数组或小号,只要它可以在没有嵌套回调的情况下工作多年......任何人都可以帮助我想办法了吗?
或者,如果您认为我应该以不同的方式编写代码,我愿意接受任何建议...
亲亲!
所以建议,将动画数组作为参数传递给第一个动画,然后继续传递。
function animationX(var anim){
...
...
if(anim && anim.length > 0)
anim.shift()(anim);
}
好的,事情是这样的。我将从一个快速介绍开始,但会尽量引导您找到尽可能多的阅读链接。我会尽量保持简短。
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.
我通常在我的项目中加载一个 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> </div>
<div> </div>
<div> </div>
<div> </div>
以上,我使用了众多可用方法中的两种,即 .to()
and .addCallback()
方法。
您可以使用此工具做更多事情。你会惊讶的。我鼓励你去探索。
进一步阅读:
- GSAP 入门:Link。
- 快速入门:GSAP JS:Link.
- 视频:序列 JavaScript 像 GSAP 的 TimelineLite 专业人士一样的动画:Link。
- 时间线提示:了解位置参数:Link。
- 简单的 GreenSock 教程 - GSAP 的第一步:Link。
- GreenSock 作弊 Sheet:Link.
- Codepen 演示:Link。
希望此信息对您有用。
我的问题已经被问了一百万次了,但我仍然找不到满足我需要的答案。我需要的是一个允许我顺序播放动画的功能。
我正在开发一个包含许多 CSS3 转换和 jQuery/jQueryUI 动画的网站。我已将这些动画分解为基本的独立函数,例如:
- slideUpSomething();
- fadeOutSomethingElse();
- showThisOtherDude();
这些函数可以是任何东西:
- 动画A();
- 动画B();
- 动画C();
使用回调或队列使代码无法管理。老实说,我现在还不足以控制它们(虽然计划稍后学习)...... 链接似乎是不可能的,因为我以不同的方式为不同的元素设置动画。 使用计时器对我来说似乎很糟糕。
我梦想的是一个函数 "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 应该一个接一个地发生
- 动画数组可以是任意长度
显然,编码方式无所谓,我不关心我是否需要使用数组或小号,只要它可以在没有嵌套回调的情况下工作多年......任何人都可以帮助我想办法了吗?
或者,如果您认为我应该以不同的方式编写代码,我愿意接受任何建议...
亲亲!
所以建议,将动画数组作为参数传递给第一个动画,然后继续传递。
function animationX(var anim){
...
...
if(anim && anim.length > 0)
anim.shift()(anim);
}
好的,事情是这样的。我将从一个快速介绍开始,但会尽量引导您找到尽可能多的阅读链接。我会尽量保持简短。
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.
我通常在我的项目中加载一个 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> </div>
<div> </div>
<div> </div>
<div> </div>
以上,我使用了众多可用方法中的两种,即 .to()
and .addCallback()
方法。
您可以使用此工具做更多事情。你会惊讶的。我鼓励你去探索。
进一步阅读:
- GSAP 入门:Link。
- 快速入门:GSAP JS:Link.
- 视频:序列 JavaScript 像 GSAP 的 TimelineLite 专业人士一样的动画:Link。
- 时间线提示:了解位置参数:Link。
- 简单的 GreenSock 教程 - GSAP 的第一步:Link。
- GreenSock 作弊 Sheet:Link.
- Codepen 演示:Link。
希望此信息对您有用。