GreenSock引人注目的动画

引人注目的网站动画可以真正吸引眼球，并有助于增加转化次数。不幸的是，动画绝不容易创建。网站开发人员花了很多时间来设计，审阅和修改其动画，然后才能将其投放世界。尽管许多开发人员使用Adobe Flash平台简化了在时间轴上补间对象的艰巨任务，但由于移动设备上缺少Flash支持，许多开发人员开始使用JavaScript。

为了满足对JavaScript动画不断增长的需求，软件供应商已经创建了一些出色的开发工具。这些供应商之一，GreenSock，提供了一些非常有用且成熟的工具，用于补间对象并将它们置于时间轴上。这些工具很成熟，因为GreenSock并不是这个行业的新手。他们已经创建并继续创建Flash ActionScript动画工具，并且已经移植了这些工具以支持JavaScript。

在本文中，我将简要介绍用于补间和时间轴构建的GreenSock工具。

时间轴上的补间简介

动画开发人员使用“补间”来填充两个时间点之间的动画帧。（单词“ tween”源自单词“ between”。）例如，当开发人员希望对从A点滚动到B点的球进行动画处理时，她只需要在每个端点绘制球的图片，然后让计算机之间填充框架。

动画开发人员使用时间表来移动他们的动画。例如，开发人员精确地指定了球何时从点A释放以及何时到达点B。此外，开发人员使用“缓动”功能来控制球如何沿其路径加速和减速。缓和使球看起来符合熟悉的物理定律。

时间轴上的补间可能会变得非常复杂，尤其是当屏幕上有多个对象在移动时，每个对象都有自己的路径，速度和时间线。在设计审查后需要合并修订时，情况将变得更加复杂。事实证明，以编程方式而不是以图形方式修改补间和时间线要容易得多。换句话说，您不必更改某些修订版本的框架，而只需更改一些数字变量即可。

GreenSock工具

GreenSock有四个主要的动画库：TimelineLite，TimelineMax，TweenLite和TweenMax。 “ Max”版本以面向对象的方式扩展了“ Lite”版本，以稍大的文件大小为代价提供了更多功能。通常，您可以免费使用这些库。但是，我建议您购买许可的套餐，并成为“ Club GreenSock”的一部分。这为您提供了最新的Beta版本以及一些很酷的扩展。另外，您的许可证适用于JavaScript和ActionScript版本。

GreenSock库的名称是不言自明的：“ Tween”库允许您在屏幕周围补间可见元素，而“ Timeline”库则允许您在对象组上创建独立的时间线。请注意，一个对象可以是多个时间轴的一部分。

让我们看一个简单的例子，看看时间轴上的补间如何与GreenSock工具一起工作。

雨信

我们将建立一个简单的动画，其中短语“在时间轴上补间”中的每个字母都独立地进入视野，弹跳然后就位。首先，我们使用以下HTML文件设置舞台。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Tweening on a Timeline</title><script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><script src="js/raining.js"></script><link href="css/style.css" rel="stylesheet" type="text/css" /></head><body><div id="stage"><div id="raining-text">Tweening on a Timeline</div></div></body>
</html>

请注意，第6行包含了GreenSock工具TweenMax。此外部引用的文件包含大多数主要的GreenSock库，包括时间轴文件和一些辅助库。在您自己的应用程序中，应该从本地目录加载这些库，而仅加载所需的库。为了简单起见，在此示例中加载了所有内容。

还要注意，我们在第7行加载了jQuery库。GreenSock工具完全不需要jQuery。但是，如果您碰巧加载了jQuery，GreenSock会很好地使用它。

第8行显示了本地raining.js文件的加载。这是控制动画的文件，稍后我们将对其进行更仔细的研究。

最后，请注意，主体包含stage和raining-text元素。 stage是在其中进行动画的窗口， raining-text元素包含将要动画的短语。

接下来，我们使用style.css文件设置所有样式：

@charset "UTF-8";
#stage {background-color: #000000;width: 600px;height: 250px;position: relative;margin-top: 20px;overflow: hidden;
}#raining-text {color: #ffffff;font-family: Arial, sans-serif;font-size:24px;position: absolute;bottom: 5px;width: 100%;text-align: center;
}

此CSS文件中有几件事需要注意。首先， stage使用相对定位。这允许更容易地定位其中所包含的绝对定位的元素。其次， stage溢流被隐藏了。这样可以防止您的动画干扰舞台外的元素。最后，下雨文字的位置由bottom属性设置。该属性将在动画中进行操作。

现在，让我们看一下发生所有动作的raining.js文件。

// Sample script for Tweening on a Timeline
$(function() {var rainingPhrase = $("#raining-text");var tl = new TimelineLite();tl.add(TweenLite.set(rainingPhrase, {bottom: 250}));tl.add(TweenLite.to(rainingPhrase, 2, {bottom:5, ease: Bounce.easeOut}));
});

在第3行中，我们使用jQuery为下雨文本创建选择器rainingPhrase 。如前所述，GreenSock不依赖jQuery，但可以使用jQuery（如果有）。

在第5行，我们创建了一个时间轴，并使用变量tl对其进行引用。 GreenSock时间线用于按顺序将各个操作分组。在这种情况下，我们创建两个动作：1）在舞台上方设置短语，该短语将被overflow属性隐藏，2）将文本放到舞台底部。

让我们看一下第6行的第一个动作。我们通过实例化一个新的TweenLite对象然后在该对象上使用set类函数来创建补间。对象本身是第一个参数，第二个参数内的对象指定了操作。在这种情况下，我们将rainingPhrase对象的bottom属性设置为使其移到舞台上方。 set功能实际上是在不动的情况下立即操纵对象。

如果我们只是立即移动某些内容，补间的目的是什么？好吧，如果加载或运行GreenSock库时出现问题，原始的下雨文本将不会从其原始位置移开。基本上，如果由于某种原因动画无法运行，我们会将文本放置在舞台上有意义的位置。

可见动作发生在第7行。由于此行中的补间是在第6行补间之后添加到时间线的，因此它将不会执行，直到前一个补间完成为止。请注意，并不一定总是这样。我们可以在此补间中使用“负延迟”属性，以使其在前一个补间完成其操作之前作用于目标对象。但是，在这种情况下，我们希望上一个补间运行完成。

第7行的补间被实例化，并立即运行to class函数。该函数从本质上说：“将对象从其当前状态转换为目标状态。” 将对象本身指定为第一个参数，在第二个参数中指定操作的持续时间（以秒为单位），第三个参数指定操作的类型。请注意，该操作实际上可以包含任何CSS属性，例如scale ， rotation ， color等。在这种情况下，该操作指定将对象移动到舞台的底部。

缓动功能不是以线性方式将对象滑动到舞台的底部，而是给动画带来了一些乐趣。通过将缓动函数指定为Bounce.easeOut ，我们告诉系统在实现动画时模拟弹跳球。

如果运行该程序，则会看到页面加载时，整个短语最初出现在舞台的顶部，然后加速到底部。当它跌至最低点时，它会反弹几次直到停止。酷，是吗？

但是有一个问题。我没有兑现让每个角色独立掉下来弹跳到位的承诺。相反，整个短语会下降并作为一个单元反弹。这是一个有趣的动画，但我们需要对其进行一些补充。

问题在于我们需要将该短语分解为单个字符。这可能是很多工作。如果要用困难的方式做到这一点，则必须将短语拆分为各个非阻塞的div元素，将每个div加载到时间轴中，并希望将其放到适当的位置以便看起来像原始短语。想象一下进行所有这些编码，只是发现市场营销部门想将短语改为其他内容，例如“带有补间的时间轴”。

幸运的是，有一个简单的解决方案。它称为SplitText。如果您是Club GreenSock俱乐部的成员，则可以访问一个名为SplitText.min.js的不错的插件文件。 SplitText引用文本字符串，并将其拆分为单个字符，然后将其加载到数组中。然后，可以将数组与TimelineLite stagger函数一起使用，该函数将自动为每个SplitText对象构建一个独立的时间轴。

让我们看看它是如何工作的。

首先，将SplitText.min.js文件放入JavaScript目录，然后在HTML文件中引用它，如下面的第7行所示。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Tweening on a Timeline</title><script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script><script src="js/SplitText.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><script src="js/raining.js"></script><link href="css/style.css" rel="stylesheet" type="text/css" /></head><body><div id="stage"><div id="raining-text">Tweening on a Timeline</div></div></body>
</html>

请注意，SplitText无需jQuery即可自动查找文本元素，因此您可以在第8行删除对它的引用。唯一的问题是，您将不得不使用其他“文档就绪”功能，而不是$(function(){})在raining.js使用的$(function(){})函数。

现在，让我们看一下最酷的部分。实际上，我们可以拆分文本，将其预置在舞台上方，然后仅用四行JavaScript代码将各个字符放到舞台上！打开raining.js并如下所示进行更改。

// Sample script for Tweening on a Timeline
$(function() {var splitPhrase = new SplitText("#raining-text", {type: "chars"});var tl = new TimelineLite();tl.staggerTo(splitPhrase.chars, 0, {bottom: 250}, 0);tl.staggerTo(splitPhrase.chars, 2, {bottom: 5, ease: Bounce.easeOut}, 0.02);
});

在此代码中，我们在第3行上创建了对拆分文本的引用。SplitText对象采用两个参数：对该文本的引用和对该文本执行的拆分类型。在这种情况下，我们拆分了字符，尽管我们也拆分了行和单词，或全部三者的组合。现在， splitPhrase变量包含一个字符数组，我们将在后面参考。

我们与本文前面的内容完全一样，在第4行构建时间轴。

第5行使用了称为staggerTo的TimelineLite函数。此函数将对象数组作为其第一个参数，并为每个对象构建单独的时间轴和补间。第二个参数提供持续时间值-在这种情况下，我们需要即时操作，因此我们将其持续时间设置为零。（请记住，我们正在将角色预先放置在舞台上方。）第三个参数包含对数组中每个对象执行的“ to”操作，第四个参数指定使每个对象的时间轴错开的时间。

第6行是所有动作发生的地方。看起来与第5行完全一样，只是参数已更改。在这种情况下，我们将所有字符在两秒钟的时间内移到舞台底部，将它们错开0.02秒，并使用模拟跳动的缓动功能。

结论

网站动画可以真正吸引眼球，并帮助将访问者转化为客户。但是创建这些动画绝非易事。您必须使用JavaScript来确保动画在从台式机到移动设备的所有设备上呈现。许多供应商正在创建JavaScript工具来帮助完成此过程。本文重点介绍GreenSock工具。使用GreenSock的时间轴和补间工具，您可以使用逼真的缓动功能快速创建动画，并且由于这些工具在代码中运行，因此易于实现修订。在本文中，我们创建了一个简单的示例，在该示例中，我们将一个短语分解为字符，然后将它们一次放到舞台上，在舞台上它们一起重新组合为一个短语。我们仅用四行代码就完成了大部分操作！

编辑： GreenSock的优秀人士向我们发送了此CodePen，以补充本文。

请参阅CodePen上由GreenSock（ @GreenSock ）撰写的补充SitePoint的笔演示。

From: https://www.sitepoint.com/eye-catching-animations-greensock/