在这篇教程中，我们将学习如何控制动画，根据需求，使用一个叫做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。

彦子

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

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