Javascript 動畫函式庫 GreenSock出品的GSAP

在Flash還相當盛行的時候，ActionScript 是很多動畫製作人員一定要懂的程式語言。可以透過ActionScript 來自動執行一些基礎特效，或是製作如水波的擾動之類的一些特殊的特效。
 
其中滿有名的一個函式庫是由GreenSock所出品的GSAP(GreenSock Animation Platform)，包含TweenLite,TweenMax,TimelineLite,TimelineMax，作用有點類似jQuery，提供了一些簡便的方法製作動畫，可以說是打開了一道好入門的製作程式動畫的通道，個人覺得相當好用，且執行效能也不錯。
近期發現 GreenSock 也把這個函數庫搬到javascript來了，且語法目前看起來大致一樣，不過其實個人覺得最重要的是，他有支援jQuery ！。
 
以下提供一個簡單的範例

基本From 與To 動畫範例程式：

TweenLite.to($('#logo1'),1,{left:"600px",backgroundColor:"blue",color:"white",fontWeight:"bold"});
TweenLite.from($('#logo1-1'),1,{left:"600px",backgroundColor:"blue",color:"white",fontWeight:"bold",ease:Bounce.easeOut});

語法稍微說明一下

  • .to() 跟 .from的差別在於前者的參數是動畫完成的狀態，後者則是動畫開始的狀態
  • 參數格式( 動畫物件 , 動畫時間, {物件屬性及easing的類型})

 

LOGO(to)
LOGO(from)
PLAY