第一次寫博文呢
，這次寫博客是因為應一位同學的要求，寫一下GSAP JS的一個小教程。為什么說小呢？因為它實際上就是小，只是一個入門級的小教程。如果你想問：“那你為什么不寫詳細一點呢？”，我想說，說.,說..，“因為我也不懂，哈哈
”，就是不懂，不騙你們，不懂就是不懂。那我那點英文水平腫么會懂呢？
好吧，言歸正傳。首先說一下GSAP（GreenSockAnimationPlatform）的官網，點這里進入GSAP的官網，也可以點這里直接進入GSAP JS的介紹，有空詳細看一下，並不需要非常好的英語水平才能看，你看博主我這個英文水平都能看懂部分，不懂的部分就多查查有道。看得懂的話就可以完全跳過我的這篇“小教程啦”，真的，我說得一定不夠官方的詳細、全面、好，還有可能會說錯（:汗
好吧，這次真的要開始啦！准備好了嗎？
開始
啦！！！
首先，我們先說一下工具的准備，要學習GSAP，那么我們一定要先准備一個GASP的類包啦,文章結束的時候，博主我會給出一個網盤地址，讓同學本下載，當然，你也可以到GreenSock的官網（http://www.greensock.com）下載最新的版本
GSAP有兩個版本一個為ActionScript 版本，已經在flash平台上運行多年，是一個“輕量級”、“高效率”、強大的2D動畫引擎，一直深受ASer（學ActionScript的人都叫自己 ASer）的歡迎，學AS的人，沒有一個說是不知道、沒使用過GSAP的。
GSAP JS顧名思義是指GSAP的js版本，GSAP JS是GreenSock公司新出的一個2D動畫引擎，可以說是AS版本的移植版，雖然功能還不夠AS版本的完善，但是一樣是非常強大、高效、好用的，據說它的運行速度是JQuery的20倍（想測試的同學可以點這里）。當然，這是說動畫方面的，jQery也有自己的強大之處（比如jQuery強大的選擇器）。
好吧，類包也准備好啦，這一次真的真的要開始啦！
使用之前，就像使用其他任何js類庫，先要導入類包，導入方法如下：
<script type="text/javascript" src="你的類包的路徑" ></script>
導入包的比較常用組合有兩種，CSSPlugin.min.js+EasePack.min.js+TweenLite.min.js 和TweenMax.min.js 這兩種組合;
TweenMax是TweenLite的子類，它承 了TweenLite所有屬性和方法，同時還包含了一些常用的插件（比如CSSPlugin）,所以當你導入TweenMax時就不需要導入 CSSPlugin啦。當然因為TweenMax包含了其他的插件，所以它的“份量”會大一點，不名夠TweenLite小巧，實際使用時，可根據個人需 求進行選擇。
注：
TweenMax包含TweenLite, CSSPlugin, EasePack, TimelineLite, TimelineMax, RoundPropsPlugin, BezierPlugin, AttrPlugin,和 DirectionalRotationPlugin所以可以單獨使用
TweenLite沒有包含CSSPlugin插件（網頁通過css來控制元素變化），所以不能單獨使用，至少要和CSSPlugin一起用
下面的導入的一個示例：
<!--CDN links for the latest TweenLite, CSSPlugin, and EasePack--> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
或
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
我不怎么會說話，直接來一個小實例好啦，邊做邊解說！
我們來做一個簡單的小方塊移動動畫吧：
1）先來創建一個小方塊（用div來做）；
<div id="rect"></div>
2）寫一下div的樣式，讓它看起來更像一個方塊；
.rect{
//元素的position根據需求來設置
//如果position為static，關於元素的坐標的操作將會無效，但對於元素的width,height的操作還是會被執行
//如果position為absolute或fixed或relative時，對於元素的坐標的寬高的操作都能生效
//試着改變下面的position屬性來看一下效果
position:absolute;
width:100px;
height:100px;
background-color:blue;
top:300px;
left:50px;
}
3)開始寫代碼，讓方塊動起來;
這里使用的TweenLite(使用記得導入包，TweenMax的使用方法類似)
TweenLite的構造方法是這個樣子的：TweenLite(target:Object, duration:Number, vars:Object);
target為要操作的dom對象；
duroation為整個動畫的持續時間;
vars為一個自屬性集合對象，可以是一個屬性如：{left:"500px"},或多個屬性如：{left:"500px",top:"200px",width:"200px"}
好了，下面我們先來花1秒鍾把剛才創建的方塊的橫坐標移動到500像素的位置吧！方法如下：
var rect=document.getElementById_x_x_x_x_x("rect");
TweenLite.to(rect,1,{left:“500px”});
上面兩行代碼也可以簡單地寫成：TweenLite.to("#rect",1,{left:"500px"});
TweenLite並不依賴jQuery，但我們還可以利用jQuery強大的選擇器來簡化TweenLite創建動畫的代碼，
比如上面的代碼可以通過id名來（#rect）來簡化動畫的創建過程，當我們導入jQuery時,我們還可以使用
元素的類（例如：".rect"）等來代表元素，從而簡化代碼；
不知道有沒有說清楚，簡單地說
TweenLite(target:Object, duration:Number, vars:Object);
target對象可以用jQuery的選擇器選擇出來的對象（例如：$("#element"),$(".abd"),$("#element p")等等）來代表，從而簡化代碼
4）擴展；
好啦，光讓方塊向右移動一下不過癮？那我們再讓方塊向下移動100像素，同時把它的寬設為原來的兩倍，我們可以這樣寫：
TweenLite.to("#rect",1,{top:"400px",scale:2});//scale為縮放比例的意思
好啦，把這話代碼添加到原來的代碼中去，變成：
TweenLite.to("#rect",1,{left:"500px"});
TweenLite.to("#rect",1,{top:"400px",scale:2});//scale為縮放比例的意思
這個樣子，運行看看！
這個會變成方塊向坐標（500，400）移動，並同樣放大兩倍。
這 是為什么呢？因為我們的兩號代碼沒有時間間隔，同時執行啦，解決辦法是：為第二個TweenLite設置一個延時時間（delay），延時多久呢？因為第 一個動畫的持續時間為1秒，所以我們第二動畫就等它一秒，等第一個動畫播放完再開始吧，也就是說延時1秒，修改后的代碼是這樣子的：
TweenLite.to("#rect",1,{top:"400px",scale:2，delay:1});//scale為縮放比例的意思
以及今天的完整代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <!-- *@author AIJ *@email 1058514799@qq.com *@date 2013-6-28 --> <style type="text/css"> #rect{ position:absolute; width:50px; height:50px; background-color:blue; top:300px; left:50px; } </style> <script type="text/javascript" src="greensock/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="greensock/TweenLite.min.js"></script> </head> <body> <div id="rect"></div> <script type="text/javascript"> TweenLite.to("#rect",1,{left:"500px"}); TweenLite.to("#rect",1,{top:"400px",scale:2,delay:1}); </script> </body> </html>
好啦，今天就先說到這吧，困了，修改天有空，有心情再斷續！
