摘要：雖然沒(méi)有視覺(jué)效果，但這就是基本的值動(dòng)畫。有專門的位置可以查詢緩動(dòng)函數(shù)。另外，不要期望在不支持的瀏覽器上做動(dòng)畫。是專業(yè)動(dòng)畫庫(kù)，在大部分情況下，它也具備更好的動(dòng)畫性能。

說(shuō)到在網(wǎng)頁(yè)里創(chuàng)建動(dòng)畫，你可能很快會(huì)想到j(luò)Query的animate()方法，或者css3的animation和transition?，F(xiàn)在，本文將介紹另一個(gè)web動(dòng)畫的可選方案，GSAP。

GSAP的全名是GreenSock Animation Platform，這個(gè)名字是有些怪異（官網(wǎng)還在各種安利你加入它的Club），但它的確是一個(gè)從flash時(shí)代一直發(fā)展到今天的專業(yè)動(dòng)畫庫(kù)。

在官網(wǎng)選擇Download zip就可以拿到GSAP源碼，解壓后可以看到有這些文件：

這里的TweenLite.js、TweenMax.js、TimelineLite.js和TimelineMax.js4個(gè)文件就是GSAP的一般引用庫(kù)文件，不過(guò)，這幾個(gè)文件還有一些重疊和包含的關(guān)系，如下圖：

因此，如果想要簡(jiǎn)單地引入GSAP的主體功能，使用TweenMax.js這一個(gè)文件即可（請(qǐng)看前一張圖中反映出的這個(gè)文件的大小）。而如果要爭(zhēng)取更小的庫(kù)文件大小，應(yīng)該使用TweenLite.js（必需）+ 其他文件的組合。

這4個(gè)文件分別包含了什么東西呢？

TweenLite是GSAP的主體核心，它用于創(chuàng)建基本動(dòng)畫，是其他各類模塊的基礎(chǔ)。一般都會(huì)搭配plugins/CSSPlugin以實(shí)現(xiàn)DOM元素的動(dòng)畫（也就是我們最熟悉的動(dòng)畫了）。

TimelineLite是一個(gè)叫做時(shí)間軸的動(dòng)畫容器，它用于對(duì)多個(gè)動(dòng)畫進(jìn)行有序的組織與控制。

TimeLineMax是TimelineLite的升級(jí)版，在TimelineLite的基礎(chǔ)之上，可以有更高級(jí)的組織與控制。

TweenMax是GSAP集合包，除前面3個(gè)之外，還包括plugins里的常用插件以及easing里的緩動(dòng)函數(shù)補(bǔ)充。

GSAP在Customize里是這樣描述自己擁有的模塊的：

默認(rèn)勾選的TweenLite + css plugin是最簡(jiǎn)單的應(yīng)用組合，本文就先從它們開(kāi)始（v1.18.4）。

一切動(dòng)畫，都從值的變化開(kāi)始。

TweenLite作為主體核心，做的就是這件事。TweenLite具體如何使用呢？請(qǐng)看下面這個(gè)例子：

var obj = {
    myProp: 0
};

TweenLite.to(obj, 0.2, {
    myProp: 1,
    onUpdate: function() {
        console.log("[update] obj.myProp = ", obj.myProp);
    }
});

TweenLite.to(target, duration, vars)是TweenLite最常用的方法，target指定動(dòng)畫元素，duration指定動(dòng)畫持續(xù)時(shí)間，vars指定動(dòng)畫的目標(biāo)值。請(qǐng)注意，這里并沒(méi)有操作任何DOM元素，所以和我們一般寫的動(dòng)畫不太一樣。運(yùn)行一下：

可以看到，TweenLite的作用是，讓obj的屬性myProp從初始值0，變化到目標(biāo)值1。雖然沒(méi)有視覺(jué)效果，但這就是基本的值動(dòng)畫。

TweenLite加上plugins/CSSPlugin后，就可以做我們熟悉的DOM元素的動(dòng)畫了。例如：

TweenLite.to("#ball1", 2, {
  x: 200
});

效果：

GSAP用x、y表示transform的translateX和translateY。TweenLite.to(target, duration, vars)的第一個(gè)參數(shù)target可以是選擇符，因此這里就是選取id為ball1的元素，執(zhí)行時(shí)長(zhǎng)為2s的動(dòng)畫，從當(dāng)前位置移動(dòng)到translateX(200px)的位置。

你可以在的第3個(gè)參數(shù)vars內(nèi)添加任意css屬性，它們都會(huì)被用作被選取元素的動(dòng)畫目標(biāo)值。

第3個(gè)參數(shù)vars內(nèi)除了css屬性之外，還可以指定許多具有特定意義的屬性，用于配置動(dòng)畫。GSAP會(huì)自動(dòng)根據(jù)名字來(lái)區(qū)分它們。

例如，delay和ease分別用于設(shè)置動(dòng)畫延遲及緩動(dòng)函數(shù)：

TweenLite.to("#ball1", 2, {
  x: 200,
  delay: 2,
  ease: Linear.easeNone
});

這里的動(dòng)畫將延遲2s運(yùn)行，而且改為線性變化（默認(rèn)為Quad.easeOut）。

如果想要在動(dòng)畫開(kāi)始，動(dòng)畫運(yùn)行的每一幀，動(dòng)畫結(jié)束時(shí)分別執(zhí)行對(duì)應(yīng)的事件函數(shù)，使用onStart、onUpdate、onComplete。前文的值動(dòng)畫的例子就是通過(guò)onUpdate把值的變化打印出來(lái)的。

GSAP有專門的位置可以查詢緩動(dòng)函數(shù)。更多的可用特定屬性，請(qǐng)參考官方文檔。

有些時(shí)候我們可能不清楚元素當(dāng)前是否已經(jīng)有translate，但就是想讓元素相對(duì)它原本的位置移動(dòng)一段距離。這時(shí)可以用相對(duì)值，像這樣：

TweenLite.to("#ball1", 2, {
  x: "+=200px"
});

類似的還有-=，按照以上寫法，無(wú)論元素當(dāng)前的translateX是多少，都會(huì)相對(duì)偏移200px。

除to()之外，還有from()和fromTo()。單詞都很簡(jiǎn)單，對(duì)吧？

from()和to()的參數(shù)及用法完全一樣，只是vars里的屬性定義的是動(dòng)畫初始值，而元素原本的屬性用作動(dòng)畫目標(biāo)值。例如：

TweenLite.from("#ball1", 2, {
  x: "+=200px",
  backgroundColor: "#2196f3"
});

效果：

這里可以看到，顏色動(dòng)畫也是可用的。

TweenLite.fromTo(target, duration, fromVars, toVars)的參數(shù)要多1個(gè)，不過(guò)從字面意思就很容易理解，即分別讓你指定動(dòng)畫的初始和結(jié)尾。需要注意的是，前面提到的具有特定意義的屬性，如delay，ease，都要寫在toVars里，在fromVars里定義的無(wú)效。

和jQuery.animate()的風(fēng)格不同，GSAP以動(dòng)畫為主體，你可以這樣保存動(dòng)畫：

var tween = TweenLite.to("#ball1", 2, {
  x: "+=200px"
});

然后你可以做精細(xì)的控制：

// 暫停
tween.pause();

// 繼續(xù)播放
tween.resume();

// 反轉(zhuǎn)播放
tween.reverse();

// 跳轉(zhuǎn)到1s進(jìn)度處開(kāi)始播放
tween.seek(1);

// 重播
tween.restart();

// 動(dòng)畫變?yōu)槿端?tween.timeScale(3);

這些可以看做GSAP作為專業(yè)動(dòng)畫庫(kù)的體現(xiàn)。

前面的例子中反復(fù)用到了類似jQuery的選擇器，但GSAP并沒(méi)有自帶選擇器，相關(guān)源碼如下：

TweenLite.selector = window.$ || window.jQuery || function(e) {
    var selector = window.$ || window.jQuery;
    if (selector) {
        TweenLite.selector = selector;
        return selector(e);
    }
    return (typeof(document) === "undefined") ? e 
    : (document.querySelectorAll ? document.querySelectorAll(e) 
        : document.getElementById((e.charAt(0) === "#") ? e.substr(1) 
            : e));
};

GSAP不依賴jQuery，但如果引入了jQuery，GSAP會(huì)使用jQuery的選擇器，否則回退到document.querySelectorAll()及document.getElementById()。

好像TweenLite + css plugin就已經(jīng)足夠用了，這個(gè)Timeline系列是做什么的呢？

想象你是一個(gè)動(dòng)畫的導(dǎo)演，你要按劇本安排演員在一個(gè)CUT里依次上場(chǎng)和退場(chǎng)。在前文的例子里，我們只有一個(gè)演員（#ball1），但現(xiàn)在，我們要拍一個(gè)有20+演員的動(dòng)畫大片，要怎么辦呢？

你也許曾用css3的animation做過(guò)類似的事情，做法是，當(dāng)轉(zhuǎn)換到一個(gè)場(chǎng)景（CUT）后，為場(chǎng)景里的所有演員依次設(shè)定適當(dāng)?shù)?b>delay。只要delay計(jì)劃好，看起來(lái)就是漂亮精彩的大片。

不過(guò)，這可沒(méi)有那么簡(jiǎn)單，假如你已經(jīng)安排好了20位演員的上場(chǎng)時(shí)間，現(xiàn)在改了下劇本，來(lái)了第21位演員要在最開(kāi)始上場(chǎng)，你會(huì)發(fā)現(xiàn)你可能要依次調(diào)整在它之后的所有演員的delay...

GSAP的TweenLite也會(huì)有同樣的問(wèn)題，因此，我們需要有一個(gè)工具來(lái)統(tǒng)一管理多個(gè)元素的多個(gè)動(dòng)畫，這就是TimelineLite。

如果你做過(guò)視頻編輯，你一定很熟悉“時(shí)間軸”這個(gè)概念。簡(jiǎn)單來(lái)說(shuō)，每一個(gè)元素的單次動(dòng)畫都是一段素材，我們需要把它們分別放置到同一個(gè)時(shí)間軸的適當(dāng)位置，才能集合在一起得到有序的動(dòng)畫大片。

現(xiàn)在我們引入TimelineLite。下面是一個(gè)例子：

var tl = new TimelineLite();
tl.from("#ball1", 1, {
    y: "-=60px",
    autoAlpha: 0
}).from("#ball2", 1, {
    x: "+=60px",
    autoAlpha: 0
}).from("#ball3", 1, {
    y: "+=60px",
    autoAlpha: 0
}).from("#ball4", 1, {
    x: "-=60px",
    autoAlpha: 0
});

效果是：

以上的tl.from()等同于以下代碼：

tl.add(TweenLite.from("#ball1", 1, {
    y: "-=60px",
    autoAlpha: 0
}));

可見(jiàn)，TimelineLite像一個(gè)容器，它可以通過(guò)add()方法將TweenLite動(dòng)畫添加到自己的時(shí)間軸上。然后，動(dòng)畫將以時(shí)間軸為整體，進(jìn)行播放。

在默認(rèn)情況下，TimelineLite會(huì)這樣按添加順序依次排列它們的位置，就這樣，我們不借助delay做出了這種較復(fù)雜的動(dòng)畫組合。

如果畫一下這里的時(shí)間軸，是這樣的：

如果要讓第2個(gè)動(dòng)畫不是在第1個(gè)剛結(jié)束時(shí)播放，而是更提前一點(diǎn)，看起來(lái)更連貫的話？

這樣做：

var tl = new TimelineLite();
tl.from("#ball1", 1, {
    y: "-=60px",
    autoAlpha: 0
}).from("#ball2", 1, {
    x: "+=60px",
    autoAlpha: 0
}, "-=0.7").from("#ball3", 1, {
    y: "+=60px",
    autoAlpha: 0
}, "-=0.7").from("#ball4", 1, {
    x: "-=60px",
    autoAlpha: 0
}, "-=0.7");

其中tl.from(target, duration, vars, position)等同于tl.add(TweenLite.from(target, duration, vars), position);，這里的position參數(shù)指定動(dòng)畫在時(shí)間軸上的位置，默認(rèn)為+=0也就是取前一個(gè)動(dòng)畫的結(jié)束點(diǎn)。以上的-=0.7就是相對(duì)這個(gè)位置再提前0.7s，這樣就讓動(dòng)畫互相之間有了重疊，看起來(lái)更連貫流暢一些。

效果：

時(shí)間軸像這樣：

把多個(gè)動(dòng)畫裝進(jìn)時(shí)間軸的重要作用是，可以當(dāng)做一個(gè)整體進(jìn)行控制和調(diào)整。時(shí)間軸的這些方法類似TweenLite：

// 在1s時(shí)間進(jìn)度位置暫停
tl.pause(1);

// ... （和前面tween一樣）

// 跳轉(zhuǎn)到50%進(jìn)度處
tl.progess(0.5);

如果多個(gè)元素的動(dòng)畫是一樣的，而且它們需要有規(guī)律地安排在時(shí)間軸的不同位置，那么非常適合用staggerFrom()、staggerTo()及staggerFromTo()。例如：

tl.staggerFrom(["#ball1", "#ball2", "#ball3", "#ball4", ], 1, {
    scale: "-=0.5",
    autoAlpha: 0
}, 2);

這樣使用數(shù)組，就可以同時(shí)選中多個(gè)元素。

效果是：

可以看到，每一個(gè)元素按照順序依次執(zhí)行動(dòng)畫，間隔2s。

如果你覺(jué)得還需要一些動(dòng)畫和時(shí)間軸的更高級(jí)功能（如同一動(dòng)畫間隔重復(fù)），可以選擇TimelineMax和TweenMax。它們并不需要更多的學(xué)習(xí)成本，如字面意思所示，TweenMax是TweenLite的升級(jí)版，擁有其全部特性，只是增加了一些額外的高級(jí)控制。它們的語(yǔ)法完全一致，你可以試試用全局搜索把所有TweenLite替換成TweenMax，不會(huì)有任何影響。TimelineMax和TimelineLite的關(guān)系也是如此。

可以到IE6（使用jQuery1.x的選擇器）。

另外，不要期望在不支持的瀏覽器上做3d transform動(dòng)畫。

如果你大部分動(dòng)畫都使用同一種緩動(dòng)函數(shù)，那么用TweenLite.defaultEase會(huì)很方便，比如修改為Expo.easeOut：

TweenLite.defaultEase = Expo.easeOut;

默認(rèn)情況下，執(zhí)行過(guò)動(dòng)畫的元素會(huì)留下style的內(nèi)聯(lián)樣式，如果你擔(dān)心這可能造成額外影響，可以設(shè)定clearProps參數(shù)清空它：

TweenLite.to("#ball1", 2, {
    x: 200,
    clearProps: "all",
    autoAlpha: 0
});

如果只需要清理個(gè)別樣式，多帶帶寫出來(lái)即可，如clearProps: "opacity"。

前文反復(fù)用到的autoAlpha并不是css屬性，而是GSAP給定的一個(gè)特殊屬性。autoAlpha是opacity和visibility這2個(gè)css屬性的結(jié)合。

為什么要結(jié)合起來(lái)呢？一般來(lái)說(shuō)，opacity為0的不可見(jiàn)元素，我們會(huì)認(rèn)為它也是不可交互的（比如onclick不觸發(fā)），因此附加visibility: hidden可以保證這一點(diǎn)。GSAP會(huì)正確處理動(dòng)畫過(guò)程中這2個(gè)css屬性的變化。

GSAP有一份包含豐富參考代碼的備忘單（Cheat Sheet），可以幫助你節(jié)約時(shí)間。

GSAP里的很多概念和API設(shè)計(jì)可以追溯到flash時(shí)代。雖然flash在今天已經(jīng)很少被使用，但“flash動(dòng)畫”一詞能夠深入人心是有它的原因的。

GSAP是專業(yè)動(dòng)畫庫(kù)，在大部分情況下，它也具備更好的動(dòng)畫性能。如果你打算在網(wǎng)頁(yè)里制作一個(gè)動(dòng)畫大片，那你現(xiàn)在應(yīng)該知道什么可以幫助你了 :) 。

（重新編輯自我的博客，原文地址：http://acgtofe.com/posts/2016/05/gsap-for-animation-pro）