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

說到在網頁里創建動畫，你可能很快會想到jQuery的animate()方法，或者css3的animation和transition?，F在，本文將介紹另一個web動畫的可選方案，GSAP。

GSAP的全名是GreenSock Animation Platform，這個名字是有些怪異（官網還在各種安利你加入它的Club），但它的確是一個從flash時代一直發展到今天的專業動畫庫。

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

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

因此，如果想要簡單地引入GSAP的主體功能，使用TweenMax.js這一個文件即可（請看前一張圖中反映出的這個文件的大小）。而如果要爭取更小的庫文件大小，應該使用TweenLite.js（必需）+ 其他文件的組合。

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

TweenLite是GSAP的主體核心，它用于創建基本動畫，是其他各類模塊的基礎。一般都會搭配plugins/CSSPlugin以實現DOM元素的動畫（也就是我們最熟悉的動畫了）。

TimelineLite是一個叫做時間軸的動畫容器，它用于對多個動畫進行有序的組織與控制。

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

TweenMax是GSAP集合包，除前面3個之外，還包括plugins里的常用插件以及easing里的緩動函數補充。

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

默認勾選的TweenLite + css plugin是最簡單的應用組合，本文就先從它們開始（v1.18.4）。

一切動畫，都從值的變化開始。

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

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指定動畫元素，duration指定動畫持續時間，vars指定動畫的目標值。請注意，這里并沒有操作任何DOM元素，所以和我們一般寫的動畫不太一樣。運行一下：

可以看到，TweenLite的作用是，讓obj的屬性myProp從初始值0，變化到目標值1。雖然沒有視覺效果，但這就是基本的值動畫。

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

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

效果：

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

你可以在的第3個參數vars內添加任意css屬性，它們都會被用作被選取元素的動畫目標值。

第3個參數vars內除了css屬性之外，還可以指定許多具有特定意義的屬性，用于配置動畫。GSAP會自動根據名字來區分它們。

例如，delay和ease分別用于設置動畫延遲及緩動函數：

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

這里的動畫將延遲2s運行，而且改為線性變化（默認為Quad.easeOut）。

如果想要在動畫開始，動畫運行的每一幀，動畫結束時分別執行對應的事件函數，使用onStart、onUpdate、onComplete。前文的值動畫的例子就是通過onUpdate把值的變化打印出來的。

GSAP有專門的位置可以查詢緩動函數。更多的可用特定屬性，請參考官方文檔。

有些時候我們可能不清楚元素當前是否已經有translate，但就是想讓元素相對它原本的位置移動一段距離。這時可以用相對值，像這樣：

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

類似的還有-=，按照以上寫法，無論元素當前的translateX是多少，都會相對偏移200px。

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

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

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

效果：

這里可以看到，顏色動畫也是可用的。

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

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

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

然后你可以做精細的控制：

// 暫停
tween.pause();

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

// 反轉播放
tween.reverse();

// 跳轉到1s進度處開始播放
tween.seek(1);

// 重播
tween.restart();

// 動畫變為三倍速
tween.timeScale(3);

這些可以看做GSAP作為專業動畫庫的體現。

前面的例子中反復用到了類似jQuery的選擇器，但GSAP并沒有自帶選擇器，相關源碼如下：

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會使用jQuery的選擇器，否則回退到document.querySelectorAll()及document.getElementById()。

好像TweenLite + css plugin就已經足夠用了，這個Timeline系列是做什么的呢？

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

你也許曾用css3的animation做過類似的事情，做法是，當轉換到一個場景（CUT）后，為場景里的所有演員依次設定適當的delay。只要delay計劃好，看起來就是漂亮精彩的大片。

不過，這可沒有那么簡單，假如你已經安排好了20位演員的上場時間，現在改了下劇本，來了第21位演員要在最開始上場，你會發現你可能要依次調整在它之后的所有演員的delay...

GSAP的TweenLite也會有同樣的問題，因此，我們需要有一個工具來統一管理多個元素的多個動畫，這就是TimelineLite。

如果你做過視頻編輯，你一定很熟悉“時間軸”這個概念。簡單來說，每一個元素的單次動畫都是一段素材，我們需要把它們分別放置到同一個時間軸的適當位置，才能集合在一起得到有序的動畫大片。

現在我們引入TimelineLite。下面是一個例子：

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
}));

可見，TimelineLite像一個容器，它可以通過add()方法將TweenLite動畫添加到自己的時間軸上。然后，動畫將以時間軸為整體，進行播放。

在默認情況下，TimelineLite會這樣按添加順序依次排列它們的位置，就這樣，我們不借助delay做出了這種較復雜的動畫組合。

如果畫一下這里的時間軸，是這樣的：

如果要讓第2個動畫不是在第1個剛結束時播放，而是更提前一點，看起來更連貫的話？

這樣做：

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參數指定動畫在時間軸上的位置，默認為+=0也就是取前一個動畫的結束點。以上的-=0.7就是相對這個位置再提前0.7s，這樣就讓動畫互相之間有了重疊，看起來更連貫流暢一些。

效果：

時間軸像這樣：

把多個動畫裝進時間軸的重要作用是，可以當做一個整體進行控制和調整。時間軸的這些方法類似TweenLite：

// 在1s時間進度位置暫停
tl.pause(1);

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

// 跳轉到50%進度處
tl.progess(0.5);

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

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

這樣使用數組，就可以同時選中多個元素。

效果是：

可以看到，每一個元素按照順序依次執行動畫，間隔2s。

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

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

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

如果你大部分動畫都使用同一種緩動函數，那么用TweenLite.defaultEase會很方便，比如修改為Expo.easeOut：

TweenLite.defaultEase = Expo.easeOut;

默認情況下，執行過動畫的元素會留下style的內聯樣式，如果你擔心這可能造成額外影響，可以設定clearProps參數清空它：

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

如果只需要清理個別樣式，多帶帶寫出來即可，如clearProps: "opacity"。

前文反復用到的autoAlpha并不是css屬性，而是GSAP給定的一個特殊屬性。autoAlpha是opacity和visibility這2個css屬性的結合。

為什么要結合起來呢？一般來說，opacity為0的不可見元素，我們會認為它也是不可交互的（比如onclick不觸發），因此附加visibility: hidden可以保證這一點。GSAP會正確處理動畫過程中這2個css屬性的變化。

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

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

GSAP是專業動畫庫，在大部分情況下，它也具備更好的動畫性能。如果你打算在網頁里制作一個動畫大片，那你現在應該知道什么可以幫助你了 :) 。

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