TimelineMax：使用addPause()控制播放
在这篇教程中，我们将学习如何控制动画，根据需求，使用一个叫做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，给它传递两个参数，param1和param2，最后再把当前作用域绑定给回调函数，你可以这样写：
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来创建序列的。
首先，把下面这段加入到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。
彦子
如需转载，烦请注明出处：https://www.fedev.cn/css3/timelinemax-controlling-playback-with-addpause.htmlNike Epic React Presto 19SS Olive Green Yellow Black White AQ2268-004