<blockquote><p>GSAP 全称为 GreenSock Animation Platform，是 GreenSock 提供的一个制作动画的成熟的JavaScript库。该库源于Flash的动画。这也意味着GreenSock背后的团队对Web动画了如指掌，因此，你可以随心所欲的施展你的想法。</p></blockquote><p><span style="font-size:14px">国内虽然有GSAP中文网，但是文档还是2.x版本，如果使用最新的版本（3.x），可能需要去官网了解。官方建议使用GSAP3，因为GSAP 3使用起来更容易，而且有很多改进。它向后兼容大多数GSAP 2功能，但有些部分可能需要更新才能正常工作。下面我们就先说说和GSAP2版本的区别.</span></p><h2><strong><span style="font-size:16px">版本对比</span></strong></h2><p><span style="font-size:14px">在2.x版本中，GSAP有四个模块。</span></p><p><strong><span style="font-size:14px">TweenLite</span></strong><span style="font-size:14px"></span></p><p><span style="font-size:14px">TweenLite是GSAP的主体核心，它用于创建基本动画，是其他各类模块的基础。一般都会搭配plugins/CSSPlugin以实现DOM元素的动画。</span></p><p><strong><span style="font-size:14px">TimelineLite</span></strong><span style="font-size:14px"></span></p><p><span style="font-size:14px">TimelineLite是一个叫做时间轴的动画容器，它用于对多个动画进行有序的组织与控制。</span></p><p><strong><span style="font-size:14px">TimeLineMax</span></strong><span style="font-size:14px"></span></p><p><span style="font-size:14px">TimeLineMax是TimelineLite的升级版，在TimelineLite的基础之上，可以有更高级的组织与控制。</span></p><p><strong><span style="font-size:14px">TweenMax</span></strong><span style="font-size:14px"></span></p><p><span style="font-size:14px">TweenMax是GSAP集合包，除前面3个之外，还包括plugins里的常用插件以及easing里的缓动函数补充。</span></p><p><span style="font-size:14px">而在3.x版本中，四个模块合并到了一个gsap对象中，使得文件体积更小，api更加简洁，同时3.x版本也增加了一些新的特性。</span></p><h2><strong><span style="font-size:16px">安装及引入</span></strong></h2><p><span style="font-size:14px">如果项目使用依赖包引入方式，我们可以用npm或者yarn</span></p><span style="font-size:inherit"># npm</span>
<span style="font-size:inherit">npm</span> i gsap --save
<span style="font-size:inherit"># yarn </span>
yarn add gsap
<span style="font-size:inherit"># 引入</span>
<span style="font-size:inherit">import</span> { gsap } <span style="font-size:inherit">from</span> <span style="font-size:inherit">'gsap'</span>;
<p><span style="font-size:14px">如果是常规cdn或者相对路径引入方式</span></p><span style="font-size:inherit"><<span style="font-size:inherit">script</span> <span style="font-size:inherit">src</span>=<span style="font-size:inherit">"js/gsap.min.js"</span>></span><span style="font-size:inherit"></span><span style="font-size:inherit"></<span style="font-size:inherit">script</span>></span>
<h2><strong><span style="font-size:16px">创建一个简单动画</span></strong></h2><p><span style="font-size:14px">动画就是要动，可能是调整目标位置，改变目标大小等，最终产生一种视觉效果。使用GSAP创建动画很简单。</span></p>gsap.<span style="font-size:inherit">to</span>(<span style="font-size:inherit">'#box'</span>, <span style="font-size:inherit">{ duration: 2, delay: 1, x: 300 }</span>)
<p><span style="font-size:14px">上面这句代码就是将id为box的元素 从初始位置在 x 轴平移 300px，开始到结束时间为2秒钟，延迟1秒钟。</span></p><p><span style="font-size:14px">还有另外两种方法可以快速创建一个动画gsap.from()及gsap.fromto()，包括这三种下一篇我们详细讲解。</span></p><p>
</p><p>
</p>
网友评论