最近把GreenSock的一些知識(shí)以及一些開發(fā)技巧使用gitbook整理了一本在線的電子書，GreenSock電子書可以去看看，下面是一個(gè)基本入門的簡(jiǎn)化版本，更詳細(xì)的可以去看在線的版本，里面有詳細(xì)的介紹以及一些高級(jí)應(yīng)用技巧，GreenSock電子書

今天就來開始學(xué)習(xí)下牛逼的javascript動(dòng)畫庫GASP(greensock)。

GreenSock在Flash動(dòng)畫時(shí)代久負(fù)盛名，并且GreenSock的維護(hù)團(tuán)隊(duì)與時(shí)俱進(jìn)，推出了以javascript為核心的GreenSock，在Flash和HTML5項(xiàng)目中，你可以使用相同的動(dòng)畫工具集，同樣的API，同樣的開發(fā)體驗(yàn)，同樣關(guān)注性能。

它具有以下優(yōu)點(diǎn):

1、速度快。GSAP專門優(yōu)化了動(dòng)畫性能，使之實(shí)現(xiàn)和CSS一樣的高性能動(dòng)畫效果。

2、輕量與模塊化。模塊化與插件式的結(jié)構(gòu)保持了核心引擎的輕量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的動(dòng)畫模塊，你可以按需使用。

3、沒有依賴。

4、靈活控制。不用受限于線性序列，可以重疊動(dòng)畫序列，你可以通過精確時(shí)間控制，靈活地使用最少的代碼實(shí)現(xiàn)動(dòng)畫。

5、任何對(duì)象都可以實(shí)現(xiàn)動(dòng)畫。

下面就開始GreenSock之旅吧。

開始

開始之前先來了解下GSAP動(dòng)畫平臺(tái)四個(gè)插件的不同功能。如下圖所示：

開始之前我們先準(zhǔn)備一些基本的代碼，如下所示：

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

當(dāng)然還得引入GreenSock文件，這里我們引入的是TweenMax這個(gè)全功能的js文件，為了操作方便我們還需要引入jquery來選擇和操作DOM。

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

這里為了演示方便，使用了codepen這個(gè)代碼平臺(tái)來運(yùn)行我們編寫的效果。

demo地址

OK，準(zhǔn)備工作已做好，下面來讓它動(dòng)起來！

我們這里操作的物體是這個(gè)ID為box的盒子。首先把它用一個(gè)變量存起來，方便后面來操作。在codepen里的js區(qū)域編寫下面的代碼：

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

TweenLite.to()方法

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

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

在codepen中加入下面的代碼：

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

上面的代碼會(huì)在0.7秒之內(nèi)把$box元素從CSS中定義的位置移動(dòng)到body的邊緣。如下所示：(鼠標(biāo)移動(dòng)到右下角，有一個(gè)return按鈕，點(diǎn)擊以下就會(huì)重新運(yùn)行代碼，就可以看到效果了)。

demo地址

不過，你應(yīng)該發(fā)現(xiàn)了一個(gè)奇怪的小問題。那就是$box元素只有一半露出來了，應(yīng)該是全部顯示的，這是為什么呢？

這是因?yàn)槲覀冊(cè)贑SS中定義了transform: translate(–50%, –50%)，這個(gè)時(shí)候可以通過定義元素的X的值來修正這個(gè)小bug。

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

TweenLite.from方法

下面來看下TweenLite.from這個(gè)方法。

在上面的例子上，我們修改代碼如下：

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

這個(gè)方法是用來使元素從定義在.from()方法里的位置運(yùn)動(dòng)到在CSS中定義的位置。

運(yùn)行這個(gè)例子，我們會(huì)看到元素從元素左邊200px的位置運(yùn)動(dòng)到元素在CSS中定義的位置。

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

在代碼中autoAlpha: 0表示它會(huì)把元素初始化為opacity:0;visibility:hidden。當(dāng)執(zhí)行動(dòng)畫效果的時(shí)候它會(huì)把visibility的值設(shè)置為inherit以及opacity值設(shè)置為1。從而產(chǎn)生一個(gè)漸現(xiàn)的效果。

TweenLite.set()

有時(shí)候，我們只是想設(shè)置元素的一些CSS屬性并不需要?jiǎng)赢嬓Ч?#xff0c;比如，重設(shè)元素的位置。

這個(gè)時(shí)候就可以使用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});

運(yùn)行上面的代碼，可以看到元素只是單純的在改變屬性并沒有動(dòng)畫效果。

在上面的代碼中，我們使用delay這個(gè)屬性來制定元素屬性改變的延遲時(shí)間。

要注意一點(diǎn)的是，在最后一個(gè)序列中我們重新設(shè)置元素的位置為x: ‘-50%’。

TweenLite.fromTo()方法

最后來說一說TweenLite.fromTo這個(gè)方法。

顧名思義，這個(gè)方法我們可以定義元素的起始位置：

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

把上面的代碼放入到codepen中，就可以看到運(yùn)行的動(dòng)畫效果。

我們定義了元素從左邊200px的位置開始運(yùn)動(dòng)到指定的位置。

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

緩動(dòng)曲線

為了使動(dòng)畫效果更有趣，符合真實(shí)的物體運(yùn)動(dòng)效果。這個(gè)時(shí)候緩動(dòng)曲線函數(shù)就派上用場(chǎng)了，GreenSock也提供了各種的運(yùn)動(dòng)曲線。

如果使用的是TweenMax的話，它已經(jīng)包含了EasePack。

EasePack包含下面的這些運(yùn)動(dòng)曲線：

1、Back 2、SlowMo 3、StppedEase 4、RoughEase 5、Bounce 6、Circ 7、Elastic 8、Expo 9、Sine

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

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

試著添加下面的代碼，看看有什么有趣的效果發(fā)生？

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

具體各種運(yùn)動(dòng)曲線的效果可以去這個(gè)地址看看。

回調(diào)函數(shù)

GreenSock提供了豐富的回調(diào)函數(shù)來操作動(dòng)畫效果。

這里以.fromTo()方法來說明它的用法。

比如，我們想要在動(dòng)畫開始的時(shí)候來觸發(fā)回調(diào)函數(shù)。首先來創(chuàng)建一個(gè)start的函數(shù)：

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

觸發(fā)回調(diào)函數(shù)，只需要添加下面這句代碼就可以了onStart:start就可以了，非常簡(jiǎn)單。

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

打開開發(fā)者工具，就可以看到輸出的相關(guān)信息。

你也可以添加onUpdate和onComplete來觸發(fā)對(duì)應(yīng)的回調(diào)函數(shù)：

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

onUpdate會(huì)在動(dòng)畫的每一幀觸發(fā)；onComplete會(huì)在動(dòng)畫結(jié)束的時(shí)候觸發(fā)。

看看最后的效果。

demo地址

最后再來一些好的tips：

1、任何的CSS屬性需要從有－的寫法變?yōu)轳劮迨降膶懛ā１热鏱ackground-color修改為backgroundColor等。

2、CSS中的transform:rotate()變?yōu)閞otation。

3、另外在GSAP中的2Dtransform－scaleX, scaleY, scale, skewX, skewY,x, y, xPercent,和 yPercent 的使用方法可以去這個(gè)視頻看看。

4、如果使用SublimeText來作為開發(fā)工具，可以下載GSAP這個(gè)代碼片段。

5、如果你使用JSHint和JSLint作為代碼質(zhì)量檢測(cè)工具，可以去這看看它在GSAP中的使用方法。

遇到問題隨時(shí)查看GreenSock的文檔。

另外推薦一些有用的學(xué)習(xí)資源：

Jump Start: GSAP JS

Getting Started Guide

GSAP Forum

GreenSock course at Noble Desktop in New York

GreenSock course workbook

GreenSock Workshop

更詳細(xì)的可以去看看我整理的在線版本GreenSock電子書

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

總結(jié)

以上是生活随笔為你收集整理的GreenSock (TweenMax) 极简入门指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。