javascript – jQuery动画序列

我的问题已被问过一百万次,但我找不到满足我需求的答案.我需要的是一个允许我按顺序播放动画的功能.

我正在开发一个包含许多CSS3过渡和jQuery / jQueryUI动画的网站.我将这些动画分解为基本的独立功能,例如：

> slideUpSomething();
> fadeOutSomethingElse();
> showThisOtherDude();

这些功能可以是任何东西：

> animationA();
> animationB();
> animationC();

使用回调或队列会使代码无法管理.说实话,我现在还不够好控制它们(计划稍后学习)……
链接似乎是不可能的,因为我以不同的方式动画不同的元素.
使用计时器对我来说似乎很糟糕.

我梦寐以求的是一个功能“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加上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.
> Jump Start：GSAP JS：Link.
>视频：与GSAP的TimelineLite一样的专业版JavaScript动画：Link.
>时间轴提示：了解位置参数：Link.
>简单的GreenSock教程 – 您使用GSAP的第一步：Link.
> GreenSock备忘单：Link.
> Codepen演示：Link.

希望您发现此信息有用.

标签：javascript,jquery,jquery-animate,gsap,tweenmax
来源： https://codeday.me/bug/20190928/1826263.html