[动画]快速入手 GSAP

简单介绍

GSAP（GreenSock Animation Platform）一套用来创建动画的‘工具’，使创建动画简单、快速、直接。它包括：
TweenLite: 核心方法，动画方面是主要负责对元素对象的相关属性进行动画操作。TweenLite 是个轻体积的但是却足够还实现常见动画以及可以扩展其他可选插件（如 CSSPlugin、ScrollToPlugin ）
TweenMax: TweenLite 的重体积版，也就是完整版。它不仅能实现 TweenLite 所有动画效果及动作，还可以实现 repeat、 yoyo、 repeatDelay 等等类似行为。它本身里就包括了类似 CSSPlugin 的一些插件，所以我们不需要再另引入。努力成为功能全面而不仅仅是轻体积。
TimelineLite: 一个轻体积，很有用的用于来排列和管理你的动画序列，让你的一系动画在“时间线”上，以及每个动画之间的相互关系可以很容易的被准备的控制管理。你也可以把一个‘“时间线”嵌套到另一个“时间线”上，嵌套多少层都没关系 。可以使你的动画流程容易模块化。
timelineMax: TimlineLite 的扩展版，包含 TimelineLite，且额外还有 repeat, repeatDelay, yoyo, currentLabel() 等等的功能函数。其实就是像 TweenLite 与 TweenMax 的关系。比 TimelineLite 功能更加全面。
其他额外工具如 easing 效果的工具或 plugins，再就是实用工具如 Draggable 等。

通过下图来感受下：

以上可以在官网下载：Green Sock Cheat Sheet

引用 GSAP 文档

下载地址：greensock.com/get-started…

或者

<!--CDN links for TweenLite, CSSPlugin, and EasePack-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>

<!--CDN link for  TweenMax-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js">
</script>

如果引用 TweenMax 这个文件，那就说明你引用了所有功能，因为它包括 TweenLite, CSSPlugin, EasePack, TimelineLite, TimelineMax, RoundPropsPlugin, BezierPlugin, AttrPlugin, and DirectionalRotationPlugin，它是最大体积的。当然你可以只下载引用你想用的文档。

GitHub: github.com/greensock/G…
官网及本文原稿：greensock.com/get-started…

欢迎关注DDFE
GITHUB：github.com/DDFE
微信公众号：微信搜索公众号“DDFE”或扫描下面的二维码