[動畫]快速入手 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」或掃描下面的二維碼