jQuery 动画序列

Posted 2023-05-08

【中文标题】jQuery 动画序列

【英文标题】：jQuery animations sequence

【发布时间】：2015-11-19 12:10:30

【问题描述】：

我的问题已经被问了一百万次，但我找不到满足我需求的答案。我需要的是一个可以让我按顺序播放动画的功能。

我正在开发一个包含许多 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 应该一个接一个地发生 动画数组可以是任意长度

显然，编码方式无关紧要，我不在乎我需要使用数组还是小号，只要它可以在没有嵌套回调的情况下工作多年......任何人都可以帮我弄清楚把戏？

或者，如果您认为我应该以不同的方式编写代码，我愿意接受任何建议...

亲吻！

【问题讨论】：

也许你的动画函数应该将数组中的下一个动画作为参数，一旦完成，调用另一个动画，如果 array.length = 0 或 null，动画结束？

您对 TimelineMax 和 GSAP 的了解程度如何？这正是适合GSAP产品的情况。

@Tahir Ahmed ：从未听说过 GSAP，我目前正在查看他们的网站，似乎可以满足我的需求。如果您有时间，我很高兴阅读有关如何在答案中使用 GSAP 对其进行编码的快速摘要。愿意接受它作为我的答案;-)

【参考方案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。 视频：像专业人士一样使用 GSAP 的 TimelineLite 序列 JavaScript 动画：Link。 时间线提示：了解位置参数：Link。 简单的 GreenSock 教程 - GSAP 的第一步：Link。 GreenSock 备忘单：Link。 Codepen 演示：Link。

希望这些信息对您有用。

【讨论】：

@KLôN：由于您似乎主要关心的是调用函数而不是实际动画任何东西，所以我在回答中关注了同样的问题（因此使用了.addCallback() 方法）。但是，如果您有任何特定的动画需求，或者您有任何一般性问题，请联系我。

和我在浏览 GSAP 教程时所想的差不多。快速有效地满足我的需求，一旦我了解 GSAP，就会增加动画潜力。给你一个大大的拥抱，我现在正在为你跳舞;-)

哦，是的！您会惊讶于该套件在动画和所有方面为您提供了多少控制。我很高兴能向你介绍这个工具 :) 像你以前从未跳舞过一样跳舞 :)

解决了我的“时间线”问题，让我摆脱了 CSS 过渡，让我摆脱了 jQueryUI，让我对基于 flexbox 的布局进行了完整而干净的控制（这部分花了一些时间虽然努力）。你无法想象你在那里帮助了我多少！

是的。这是一套了不起的工具。但还有更多：DrawSVGPlugin、Draggable、ThrowProps 和 more。为你高兴:)

【参考方案2】：

所以建议，您将动画数组作为参数传递给您的第一个动画，然后继续传递。

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

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

【讨论】：

我想我不明白这里发生了什么（必须提高我的 JS 基础知识）。移动阵列后会发生什么？ "(anim)" 执行数组的新第一个元素？ --->困惑

shift 类似于 pop()，但它返回数组的第一个元素并将其从数组中删除，而不是最后一个。所以在你拿出它的同时，你“执行它”，这就是为什么“（动画）”；所以这就像你在做 anymationA(anim) 例如。所以基本上你正在使用动画数组的剩余部分执行下一个动画。最终数组的长度为 0。

虽然我刚刚意识到，如果动画是异步的，它可能不起作用，因为它会不等待就抛出下一个动画。但我会在那里留下答案以供将来的建议或想法。

谢谢，是的，我不确定这是否会使动画按顺序运行...我现在正在研究 GSAP，尽管我不喜欢为每个动员新库新问题。到目前为止看起来很棒。