GreenSock (TweenMax) 極簡入門指南

最近把GreenSock的一些知識以及一些開發技巧使用gitbook整理了一本在線的電子書，GreenSock電子書能夠去看看，下面是一個基本入門的簡化版本，更詳細的能夠去看在線的版本，裏面有詳細的介紹以及一些高級應用技巧，GreenSock電子書

今天就來開始學習下牛逼的javascript動畫庫GASP(greensock)。

GreenSock在Flash動畫時代久負盛名，而且GreenSock的維護團隊與時俱進，推出了以javascript爲核心的GreenSock，在Flash和HTML5項目中，你可使用相同的動畫工具集，一樣的API，一樣的開發體驗，一樣關注性能。

它具備如下優勢:

一、速度快。GSAP專門優化了動畫性能，使之實現和CSS同樣的高性能動畫效果。

二、輕量與模塊化。模塊化與插件式的結構保持了核心引擎的輕量，TweenLite包很是小（基本上低於7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不一樣功能的動畫模塊，你能夠按需使用。

三、沒有依賴。

四、靈活控制。不用受限於線性序列，能夠重疊動畫序列，你能夠經過精確時間控制，靈活地使用最少的代碼實現動畫。

五、任何對象均可以實現動畫。

下面就開始GreenSock之旅吧。

開始

開始以前先來了解下GSAP動畫平臺四個插件的不一樣功能。以下圖所示：

開始以前咱們先準備一些基本的代碼，以下所示：

html：

<div id="box">
  <div class="boxSmall"></div>
</div>

css:

body {
  background-color: #262626;
  font-family: 'Open Sans', sans-serif;
  overflow: hidden;
}
#box {
  background-color: #88ce02;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.boxSmall {
  position: absolute;
  background-color: #70a40b;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 75px;
  z-index: 2;
}

固然還得引入GreenSock文件，這裏咱們引入的是TweenMax這個全功能的js文件，爲了操做方便咱們還須要引入jquery來選擇和操做DOM。

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js

這裏爲了演示方便，使用了codepen這個代碼平臺來運行咱們編寫的效果。

demo地址

OK，準備工做已作好，下面來讓它動起來！

咱們這裏操做的物體是這個ID爲box的盒子。首先把它用一個變量存起來，方便後面來操做。在codepen裏的js區域編寫下面的代碼：

var $box = $('#box');

TweenLite.to()方法

下面就是讓它動起來，可使用TweenLite.to()方法來使元素動起來。好比，讓元素移動到瀏覽器左邊的邊緣，咱們就可使用TweenLite.to()方法。

下面是TweenLite.to()方法的示意圖：

在codepen中加入下面的代碼：

TweenLite.to($box, 0.7, {left: 0});

上面的代碼會在0.7秒以內把$box元素從CSS中定義的位置移動到body的邊緣。以下所示：(鼠標移動到右下角，有一個return按鈕，點擊如下就會從新運行代碼，就能夠看到效果了)。

demo地址

不過，你應該發現了一個奇怪的小問題。那就是$box元素只有一半露出來了，應該是所有顯示的，這是爲何呢？

這是由於咱們在CSS中定義了transform: translate(–50%, –50%)，這個時候能夠經過定義元素的X的值來修正這個小bug。

TweenLite.to($box, 0.7, {left: 0, x: 0});

TweenLite.from方法

下面來看下TweenLite.from這個方法。

在上面的例子上，咱們修改代碼以下：

TweenLite.from($box, 2, {x: '-=200px', autoAlpha: 0});

這個方法是用來使元素從定義在.from()方法裏的位置運動到在CSS中定義的位置。

運行這個例子，咱們會看到元素從元素左邊200px的位置運動到元素在CSS中定義的位置。

autoAlpha方法是GSAP中一個特別的屬性，它把opacity和visibility兩個屬性合二爲一了。

在代碼中autoAlpha: 0表示它會把元素初始化爲opacity:0;visibility:hidden。當執行動畫效果的時候它會把visibility的值設置爲inherit以及opacity值設置爲1。從而產生一個漸現的效果。

TweenLite.set()

有時候，咱們只是想設置元素的一些CSS屬性並不須要動畫效果，好比，重設元素的位置。

這個時候就可使用GreenSock提供的.set()方法。

去掉咱們前面編寫的代碼除了定義好的$box變量，編寫下面的代碼：

TweenLite.set($box, {x: '-=200px', scale: 0.3});
TweenLite.set($box, {x: '+=100px', scale: 0.6, delay: 1});
TweenLite.set($box, {x: '-50%', scale: 1, delay: 2});

運行上面的代碼，能夠看到元素只是單純的在改變屬性並無動畫效果。

在上面的代碼中，咱們使用delay這個屬性來制定元素屬性改變的延遲時間。

要注意一點的是，在最後一個序列中咱們從新設置元素的位置爲x: ‘-50%’。

TweenLite.fromTo()方法

最後來講一說TweenLite.fromTo這個方法。

顧名思義，這個方法咱們能夠定義元素的起始位置：

TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150});

把上面的代碼放入到codepen中，就能夠看到運行的動畫效果。

咱們定義了元素從左邊200px的位置開始運動到指定的位置。

x:150會覆蓋在CSS中定義的transform: translate(–50%, –50%)的樣式，用新的transform: matrix(1, 0, 0, 1, 150, -50);樣式來代替。

緩動曲線

爲了使動畫效果更有趣，符合真實的物體運動效果。這個時候緩動曲線函數就派上用場了，GreenSock也提供了各類的運動曲線。

若是使用的是TweenMax的話，它已經包含了EasePack。

EasePack包含下面的這些運動曲線：

一、Back 二、SlowMo 三、StppedEase 四、RoughEase 五、Bounce 六、Circ 七、Elastic 八、Expo 九、Sine

下面來添加ease:Power4.easeInOut來看看實際的效果。

TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150, ease:Power4.easeInOut});

試着添加下面的代碼，看看有什麼有趣的效果發生？

TweenLite.to($box, 0.4, {top: '100%', y: '-100%', ease:Bounce.easeOut, delay: 2});
TweenLite.to($box, 0.7, {x: '-=200px', y: '-100%', ease:Back.easeInOut, delay: 3});
TweenLite.to($box, 0.8, {x: '-=200px', y: '-100%', ease:Back.easeInOut, delay: 4.2});
TweenLite.to($box, 2.5, {top: '50%', y: '-50%', ease:Power0.easeNone, delay: 5});
TweenLite.to($box, 2.5, {x: '+=400px', ease:Elastic.easeInOut, delay: 7.7});
TweenLite.to($box, 2.5, {x: '-=400px', rotation: -720, ease: SlowMo.ease.config(0.1, 0.7, false), delay: 10.4});

具體各類運動曲線的效果能夠去這個地址看看。

回調函數

GreenSock提供了豐富的回調函數來操做動畫效果。

這裏以.fromTo()方法來講明它的用法。

好比，咱們想要在動畫開始的時候來觸發回調函數。首先來建立一個start的函數：

function start(){
  console.log('start');
}

觸發回調函數，只須要添加下面這句代碼就能夠了onStart:start就能夠了，很是簡單。

TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150, ease:Power4.easeInOut, onStart: start});

打開開發者工具，就能夠看到輸出的相關信息。

你也能夠添加onUpdate和onComplete來觸發對應的回調函數：

function start(){
  console.log('start');
}
function update(){
  console.log('animating');
}
function complete(){
  console.log('end');
}

onUpdate會在動畫的每一幀觸發；onComplete會在動畫結束的時候觸發。

看看最後的效果。

demo地址

最後再來一些好的tips：

一、任何的CSS屬性須要從有－的寫法變爲駝峯式的寫法。好比background-color修改成backgroundColor等。

二、CSS中的transform:rotate()變爲rotation。

三、另外在GSAP中的2Dtransform－scaleX, scaleY, scale, skewX, skewY,x, y, xPercent,和 yPercent 的使用方法能夠去這個視頻看看。

四、若是使用SublimeText來做爲開發工具，能夠下載GSAP這個代碼片斷。

五、若是你使用JSHint和JSLint做爲代碼質量檢測工具，能夠去這看看它在GSAP中的使用方法。

遇到問題隨時查看GreenSock的文檔。

另外推薦一些有用的學習資源：

Jump Start: GSAP JS

Getting Started Guide

GSAP Forum

GreenSock course at Noble Desktop in New York

GreenSock course workbook

GreenSock Workshop

更詳細的能夠去看看我整理的在線版本GreenSock電子書

文章來自於Simple GreenSock Tutorial – Your first steps with GSAP有刪減。