TimelineMax:使用addPause()控制播放

特别声明:开通VIP通道,年费价格为 ¥199.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在这篇教程中,我们将学习如何控制动画,根据需求,使用一个叫做addPause()的方法。准备好了吗?开始吧!

addPause()

addPause()方法是一种控制方法,允许开发者在时间轴上的任何位置放置一个暂停。这比使用一个回调函数来暂停另一个函数要精确得多(这是在addPause()出现之前大家不得不采用的方法)。

这个控制方法还可以插入一个特殊的回调,在特定的时间戳或标签暂停时间轴的播放。这样做有助于确保,如果虚拟播放指针稍微超过了暂停的位置,它可以回到那个设置暂停的位置。

语法

addPause的语法非常直接。就像我们写其它方法,如to().addPause()方法也是相似的写法,直接接受放置在括号中的参数。如果你不熟悉这些方法,先回去我前面那篇探讨GSAP mechanics的文章,我在这里等你回来~

在特定点暂停

timeline.addPause(2);

把上面的这行代码加上,你的动画就会在2秒的地方暂停。如果你不知道时间轴是什么,也不知道如何实例化,你可以先看看前面的文章

使用标签插入暂停

你还可以相对于标签来插入暂停。如果你一直是我们的读者,应该已经看过了我们前面有一篇文章大概讲了一下标签的内容。

timeline.addPause("yourLabel");

现在,当你的时间轴遇到yourLabel标签就会暂停。

使用标签和时间间隔插入暂停

这个示例将会在遇到yourLabel标签的3秒之后,发生暂停,然后调用yourFunction函数。

timeline.addPause("yourLabel+=3", yourFunction);

使用标签、时间间隔和传递参数来插入暂停

如果你想要在4秒的位置插入一个暂停,然后调用yourFunction,给它传递两个参数,param1param2,最后再把当前作用域绑定给回调函数,你可以这样写:

timeline.addPause(4, yourFunction, ["param1", "param2"], this);

Demo时间

这里有几个有趣的示例可以帮助你深入了解时间轴上的暂停。你要挑战的是我前面提到的所有方法,然后尝试去自己实现它们。

线性控制

首先这里有个不错的示例,基于Carl Schoof的demo创建的,解释了线性方法以及完美展示了addPause()控制方法的典型使用。

addPause()的一个典型用法是把线性方法分成多部分:

每次你点击next按钮,时间轴会调用play()直到下一个addPause()点。

泡泡发射器

这个Demo是我做的,我给起名叫做“泡泡发射器”,尝试了更多暂停插入。点击一下试试看。

JavaScript面板的第90行,找到下面的这行代码,然后把它注释掉:

createBubbles(tub).addPause(0.25);

取消注释,然后刷新Demo,看看addPause方法在动画播放过程中发生了什么。提示:动画会在0.25秒的地方暂停。

我还在这个Demo中留了一些注释(感谢Jack Doyle的帮忙),解释了如何让这个效果有更好的性能!

SVG下载进度条

Chris Gannon的这个SVG Demo非常棒,展示了DrawSVG插件,非常适合用来探讨addPause。你还可以使用addPause来分解Chris应用的每个运动,效果非常栩栩如生。

试着把这行代码加到Demo的JavaScript面板的第26行。

.addPause()

正如我前面提到的Chris的Demo使用了drawSVG插件,我们在前面的文章中也看到了。对于那些不熟悉的同学,DrawSVG是一个非常有用的插件,用于制作SVG动画,我强烈建议你们有时间的时候都去了解一下这个插件。

深入SVG动画

很简单,因为Chris的Demo非常棒,所以我们不如在他的另一个Demo中再加一些暂停?下面的这个Demo很棒:

如果你fork了这个Demo,然后删除所有Chris已经写了的JavaScript,你会看到整个SVG,以及他是如何使用DrawSVG来创建序列的。

TimelineMax

首先,把下面这段加入到CodePen Demo的JavaScript面板的第60行:

tl.addPause(1.15);

你注意到了动画停在了1.15秒的位置吗?很酷吧?

现在,进行下一步。把44-47行替换成下面的内容,在时间轴上添加一个标签:

.to(arches, 2, {
  drawSVG:'0% -5%',
  ease:Linear.easeNone
}).add('archesLabel')

上面的代码就位之后,把下面这行加到大概60行的位置,来结束这次试验。可以看到动画在archesLabel标签的位置暂停了。

tl.addPause('archesLabel')

附加题:切换按钮

已经介绍完了addPause()方法,也已经通过几个Demo进行了演示,是时候看看你能否应用了。学习如何做一个简单的播放/暂停按钮,可以用于控制任何GSAP动画(补间或时间轴),非常方便,尤其是当你尝试学习一个特定的/方法和技术。

在下面的视频中,Carl Schoff讲解了一些基础知识,解释了如何制作demo中的状态切换按钮。

接下来

在我们的下一篇教程中,我们将学习贝塞尔补间动画是怎么一回事。我们先研究什么是贝塞尔路径,然后看一些示例demo,演示如何沿着贝塞尔曲线添加动画。下次见!

本文根据@Dennis Gaebel的《TimelineMax: Controlling Playback With addPause()》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://webdesign.tutsplus.com/tutorials/timelinemax-controlling-playback-with-addpause--cms-23729

彦子

在校学生,本科计算机专业。逗比一枚,热爱前端热爱生活,喜欢CSS喜欢JavaScript喜欢SVG,爱玩PS玩AI玩啊逗比的软件。努力向上,厚积薄发。

如需转载,烦请注明出处:http://www.w3cplus.com/css3/timelinemax-controlling-playback-with-addpause.htmlNike Epic React Presto 19SS Olive Green Yellow Black White AQ2268-004

如需转载,烦请注明出处:https://www.w3cplus.com/css3/timelinemax-controlling-playback-with-addpause.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部