GreenSock⾯向初学者：Web动画教程（第1部分）
我在本⽂中的⽬的是向您全⾯介绍 ，也称为GSAP（GreenSock动画平台），这是⼀种⽤于现代Web的⾼性能，专业级HTML5动画引擎。
这是“ 超越CSS：动态DOM动画库 ”系列中的第四篇⽂章。
这是我过去所讨论的内容：
介绍如何充分利⽤⽹络上的动画，以及何时可以考虑使⽤JavaScript动画库⽽不是仅CSS动画。 然后重点介绍Anime.js，这是⼀个免费的轻量级JavaScript动画库
向您介绍KUTE.js，这是⼀个免费且功能丰富的JavaScript动画库
向您展⽰了如何使⽤Velocity.js（⼀个开源的，功能强⼤的免费动画库）来创建⾼效的Web动画。
GSAP的功能太多，⽆法写在⼀篇⽂章中。 这就是为什么我选择了多篇⽂章，专门讨论GreenSock库的各个领域。
更详细地：
在第⼀部分结束时，您将了解GreenSock的功能和特性，许可模型，核⼼组件以及补间和交错DOM元素的基本语法。
在第2部分中，我将介绍GreenSock的本机时间轴功能
最后，第3部分将重点介绍⼀些功能强⼤的奖⾦插件，GreenSock只需⼏⾏代码即可轻松完成复杂的动画任务。
如果您已经是GSAP忍者，请查看 Animating ，其中George Martsoukos演⽰了如何将GreenSock有效地⽤于UI动画。
事不宜迟，请振作精神，旅程即将开始！
什么是GreenSock，它有什么⽤？
GreenSock是当今可⽤的事实上的⾏业标准JavaScript动画平台。
这是⼀个成熟的JavaScript库，其根源于基于Flash的动画。 这意味着GreenSock背后的家伙从内到外都知道⽹络动画，该库已经存在了很长时间，并且很快就不会出现。
GSAP包含⼀整套完善的⼯具，实⽤程序和插件，您可以利⽤它们来应对遇到的任何⽹络动画挑战，从跨多个浏览器⼀致地对SVG动画化到编码复杂的动画序列，在屏幕上拖动元素，分割和加扰⽂本，还有更多。
仅提及我特别喜欢GreenSock的三件事：
尽管该库具有丰富的功能，但学习曲线相对较浅，因为它在所有各种实现和插件中使⽤了直观且⼀致的语法。 此外，它还通过提供了很棒的⽂档，教程和⽀持。 同样，库本⾝也在不断更新和维护。 在构建依赖于外部库的任何关键功能和⽤户体验的项⽬时，这些都是⾄关重要的因素
它是模块化且重量轻的，这意味着它不会给您的Web项⽬增加膨胀
由于其强⼤的时间轴功能，GSAP不仅可以对单个补间的时间进⾏精确控制，⽽且可以作为整个动画流的⼀部分对多个补间的时间进⾏精确控制。
核⼼GreenSock⼯具
这些是GreenSock的核⼼模块：
— GSAP的基础，GSAP是⼀个轻量且快速的HTML5动画库
— TweenLite的扩展，除了包括TweenLite本⾝之外，还包括：
时间轴精简版
时间轴最⼤值
CSS插件
AttrPlugin
RoundPropsPlugin
DirectionalRotationPlugin
Bezier插件
易包装
—⼀种轻量级的时间线，可以控制多个补间和/或其他时间线
— 的增强版本，它提供了其他⾮必需功能，例如repeat ， repeatDelay ， yoyo等。
您可以选择在项⽬中包括TweenLite，然后根据需要单独添加其他模块。 另外，您可以选择包括TweenMax（我将在此多部分系列⽂章中采⽤的⽅法），它将所有核⼼模块打包在⼀个优化的⽂件中。
值得注意的是，GSAP还提供了诸如等付费功能，可使⽤创建动画线描效果，强⼤的将⼀种SVG形状
变形为另⼀种形状（即使不要求两个形状具有相同的点数），其他。 尽管您需要成为的付费会员才能使⽤这些插件，但GSAP免费为您提供了⼀个特殊的基于CodePen的版本，以便您可以试⽤它们。 这是⼀个很酷的报价，我将在第3部分（以及您和我⼀起）中充分利⽤。
执照
GSAP并未像那样采⽤免费的开源许可证，主要是出于长期保持产品⾼质量和财务可持续性的原因。
GreenSock提供了两个 ：
-在免费使⽤的数字产品中，完全免费使⽤该库（即使开发⼈员获得了建造它们的报酬）
-该许可证包括三个层，中间层“ Shockingly Green ”最受欢迎。 作为令⼈震惊的绿⾊会员，您将可以使⽤所有额外的插件和其他功能，但⽆需商业许可。
尽管未遵守MIT和类似的免费使⽤许可证，但通过在和下载中让您查看其原始代码，GreenSock⿎励您学习其开发⼈员的代码及其对JavaScript动画的掌握，是开源哲学的最佳功能之⼀。
⽤GreenSock补间
javascript初学推荐书籍
⼀个简单的动画包含从A点到B点随时间变化的某种变化。动画师在A和B之间的状态（即tween）具有特殊的名称。
TweenLite和TweenMax是GreenSock为您提供的两个强⼤的补间⼯具。 就像我上⾯说的，我将在这⾥重点介绍TweenMax，但是请记住，两个库的基本语法都相同。
要将GSAP加载到您的项⽬中，请在HTML⽂档的</body>标记之前添加以下<script>标记：
<script src="cdnjs.cloudflare/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
您可以在CDN上到可⽤的最新版本： 。
如果使⽤npm ，请在终端中键⼊以下内容：
npm install gsap
在CodePen上，您可以在JavaScript设置内的快速添加框中到指向GSAP TweenMax的链接：
GreenSock的基本补间：语法
使⽤GSAP的简单补间如下所⽰：
<('.my-element', 1, {opacity: 0});
上⾯的代码⽚段在1秒的过程中为my-element类的DOM元素设置了动画，从当前的默认不透明度值到0的不透明度值。 换句话说，在1秒长的补间结束时，该元素将不再可见。
让我们再详细⼀点。
<()告诉浏览器您正在使⽤TweenMax库的to()⽅法（TweenLite的语法是相同的，仅将TweenMax替换为TweenLite）。 此⽅法需要⼀些逗号分隔的参数：
动画你想要的元素 （“我元件”）
补间的持续时间 （在这种情况下为1秒）
vars对象{} ，即您要补间的属性（在本例中为opacity属性）。 最后⼀部分变成花括号，并采⽤键/值对的形式。 该值表⽰补间的最终状态。 您还可以在vars object {}使⽤其他属性，例如回调函数，延迟等。
顾名思义， to()⽅法将补间属性从其默认值设置为动画， to()使您希望这些值位于动画的末尾。
GSAP提供了⼤量⽅法，但是to()之外的核⼼⽅法是：
from() —使您可以确定补间中的起始值。 因此，该元素将从您在from()指定的值开始向其默认值（通常是您在CSS规则中设置的默认值from()进⾏动画处理。 语法如下所⽰：
TweenMax.from('.my-element', 1, {opacity: 0});
fromTo() -使⽤此⽅法，可以在补间中指定起点和终点的值，从⽽提供更⾼的精度。 语法与先前的⽅法相似，但是它包括from （opacity: 1 ）和to part（ opacity: 0 ）的vars object {}：
TweenMax.fromTo('.my-element', 1, {
opacity: 1 // from state
}, {
opacity: 0 // to end state
});
这是所有在旋转和平移属性上应⽤的三种⽅法：
请参阅的SitePoint（ ）的Pen 。
GSAP通过打破从CSS语法离开rotation⽽不是rotate 。
另外，请注意，要沿X轴或Y轴平移元素，GreenSock不使⽤transform: translateX()或transform: translateY() 。 ⽽是使⽤x （如实时演⽰中⼀样）， y ， xPercent和yPercent 。
尽管x和y属性主要基于像素， xPercent和yPercent使⽤百分⽐值分别沿X和Y轴转换元素（ ）。
最后，请记住，要在X或Y坐标上平移元素，需要将元素的CSS position属性设置为relative或absolute 。
GSAP可以激活哪些CSS属性？
使⽤GreenSock，所有都唾⼿可得。 您可以为CSS转换设置动画，如上所述，还可以为其他复杂属性设置动画，例如box-shadow: 1px 1px 1px rgba(0,0,0,0.5)和border: 1px solid red 。 只要记住在标准CSS属性名称使⽤破折号（-）的任何地⽅都使⽤camelCase，例如，backgroundColor⽽不是background-color 。
使⽤GreenSock的set()⽅法
如果需要在设置特定值的动画之前为其设置某些属性，则可以在CSS中或使⽤GreenSock的set()⽅法进⾏set() 。 最后⼀个选项的优点是将所有与动画相关的代码都放在⼀个位置，即JavaScript⽂档。
例如，上⾯的实时演⽰中的第⼀个⽰例从图像设置在稍微倾斜的位置开始。 最初的选择不是在CSS⽂档中指定的，⽽是在JavaScript⽂档中使⽤GSAP的set()⽅法指定的，如下所⽰：
TweenMax.set(toElement, {rotation: -45});
语法与常规补间相同，但没有duration参数。 这样可以确保⽴即进⾏更改。
使⽤GreenSock创建补间序列
您可以使⽤GreenSock创建补间序列，并通过调整每个补间的duration和delay属性来协调它们的交互。
例如，在下⾯的代码⽰例中，单击“ 通知我”按钮将触发以下动画序列：
出现输⼊框
当输⼊框变长时，“ 通知我”按钮将消失
最后，在输⼊框内会弹出⼀个较⼩的“ 发送”按钮。
这是序列的GSAP代码（该代码位于按钮的点击处理程序中）：
// input box appears and gets bigger
<(emailInput, 0.5, {
autoAlpha: 1,
scale: 1
});
// the button being clicked disappears
<(this, 1, {
autoAlpha: 0
});
// the send button appears and gets bigger
<(sendButton, 0.5, {
autoAlpha: 1,
scale: 1,
delay: 0.5,
ease: fig(3)
});
在代码段中，您可以看到两个新属性autoAlpha和ease 。
当您需要确保该元素不仅从视图中消失，⽽且⽤户⽆法与其交互时，可以使⽤autoAlpha⽽不是opacity 。 实际上， autoAlpha增加
了visibility: hidden到opacity: 0 。
ease属性使您可以为动画选择ease动，该ease动可控制补间期间的变化率。 这是⾃然，逼真的和平滑动画的关键要素，GreenSock提供了“ ，可让您对最适合您的动画的轻松程度进⾏⼤量控制。
经过⼏次尝试，我为该特定补间选择了Back.easeOut缓动，但是您可以玩⼀下，并提出⼀些不同的东
西。
这是CodePen的完整演⽰：
见笔由SitePoint（ 上） 。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。