[动画]快速入手 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”或扫描下面的二维码