timelinemax_TimelineMax：使用addPause（）控制播放

timelinemax

在本教程中，我们将学习如何使用称为addPause()的方法按需控制动画。 准备？ 组？ ……稍作停顿……走吧！

addPause（）

addPause()方法是一种控制方法，允许开发人员在其时间轴上的任何位置放置暂停 。 它比使用回调函数暂停另一个函数（在存在addPause()之前必须addPause()精确得多。

此控制方法还可以插入特殊的回调，该回调在特定的时间戳或标签处暂停时间线的播放。 这样做有助于确保虚拟播放头如果稍微移到暂停位置之外，它将移回到精确位置。

句法

addPause的语法很简单。 就像我们编写其他方法，如.to()一样。 addPause()方法的编写方式与此类似，并且接受可以在括号内传递的参数。 如果您不熟悉方法，请继续阅读我的另一篇关注GreenSock的文章，探讨GSAP的机制 ，我将在这里等待您的回报。

在特定点暂停

timeline.addPause(2);

添加上面的代码将使动画恰好在时间轴的2秒标记处暂停。 如果不确定时间轴是什么以及如何实例化时间轴，则应该阅读我之前写的以TimelineMax开头的文章。

插入带有标签的暂停

您还可以插入与标签有关的暂停。 如果您一直在阅读，您可能会记得我们在力学文章中谈到了标签。

timeline.addPause("yourLabel");

现在，当您的时间轴遇到标签“ yourLabel”时，会在“ yourLabel”处插入一个暂停。

插入带有标签和时间间隔的暂停

本示例将在“ yourLabel”之后3秒钟插入一个暂停，当该暂停发生时，将调用yourFunction 。

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

插入带有标签，时间间隔和传递参数的暂停

如果您想在恰好4秒处插入一个暂停，然后调用yourFunction ，将两个参数（ param1和param2传递给它，最后将当前作用域绑定到回调，您可以这样做：

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

演示时间！

以下是一些有趣的示例，可让您的脚在时间轴上插入暂停。 您面临的挑战是采用我之前提到的每种方法，然后尝试自己实施。

线性控制

首先，以Carl Schoof的演示为例，它是一个很好的示例，它演示了线性方法和addPause()控制方法的典型用法的完美表示。

addPause()典型用法是将线性体验分为多个部分：

每次您按下下一个按钮时，时间线将play()直到到达下一个addPause()点。

气泡发射器

这是我制作的一个名为“气泡发射器”的演示，可以在闲暇时尝试更多的暂停插入。 点击它！

在JavaScript面板的第90行中，找到以下注释掉的行：

createBubbles(tub).addPause(0.25);

取消对此注释的注释并与演示进行交互，以查看在动画播放期间发生了addPause方法。 提示 ：动画将在动画序列中暂停0.25秒。

在这个演示中，我还留下了一些评论（感谢Jack Doyle的帮助），解释了如何使这种效果更加出色！

SVG下载进度

Chris Gannon撰写的SVG演示是一个很棒的示例，展示了DrawSVG插件，非常适合探索addPause 。 您还可以使用addPause发现Chris为使效果栩栩如生而采用的每个动作。

尝试将此代码段添加到演示JavaScript面板的第26行。

.addPause()

正如我之前提到的Chris的演示使用了我们在上一篇文章中所讨论的drawSVG插件 。 对于不熟悉的人来说， DrawSVG是一个非常有用的插件，可以帮助动画化SVG的笔触，我强烈建议您在有空的时候进一步探索它。

潜水SVG动画

仅仅是因为Chris的东西太好了，我们如何在他的另一个演示中添加一些暂停？ 这是完美的：

如果您分叉此演示，然后擦除克里斯编写的所有JavaScript，您将看到整个SVG，以及他如何使用DrawSVG插件创建此序列。

要开始实验，请将以下代码段添加到CodePen演示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（）方法并在许多演示中进行了介绍之后，现在该看看是否可以应用它了。 学习如何制作简单的播放/暂停切换按钮来控制任何GSAP动画（补间或时间轴）可能非常方便，尤其是在您尝试学习特定/方法和/或技术时。

在下面的视频中，卡尔·肖夫（Carl Schoff）讲解了基础知识，并说明了如何在演示中创建切换按钮。

下次

在我们的下一个GreenSock冒险中，我们将学习bezier补间的全部含义！ 我们将研究什么是贝塞尔曲线路径，并通过一些示例演示展示如何沿贝塞尔曲线路径进行动画处理。 直到下次快乐动画！

翻译自: https://webdesign.tutsplus.com/tutorials/timelinemax-controlling-playback-with-addpause--cms-23729

timelinemax