[22- Pixi教學] 按鈕動態- Tween

GreenSock

下面是GSAP官網對這個產品的說明:

Think of GSAP as the Swiss Army Knife of javascript animation…but better. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, generic objects, whatever) and it solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms.

因為GSAP可以使用GPU加速,因此在執行速度效能上會勝過jQuery,也因為它是很單純的去漸變改變某個屬性,所以我們可以很容易的使用在任何我們可操控的屬性上去製作動畫效果,是一個十分強大好用的工具。

要嘗試動畫效果的樣式和程式寫法,官網有提供GSDevTools可供我們使用,可以更容易的編輯我們要的動畫樣式

TweenLite

TweenLiteTweenMax是當我們只有一個Tween時可使用的,例如:把一個物件從左邊移到右邊。

而這兩個類別的差異在於TweenMax提供更多的參數和方法可供我們使用

TimelineLite

TimelineLiteTimelineMax則是當我們要做一系列的Tween時可使用的,例如:某按鈕按下去要先放大再縮小再彈回來。

而TimelineLite與TimelineMax的差異也是TimelineMax提供更多方法和參數可以使用。

為按鈕加Tween效果

首先我們要在專案裡加入使用gsap

以及@types/gsap

設定在build的時後要複製TweenLite.min.js及TimelineMax.min.js到libs裡(gulpfile.js)

並在index.js裡加上

接著修改ButtonBase.ts的內容如下:

今日成果

線上成果展示:http://claire-chang.com/ironman2018/1106/
今日成果下載:ironman20181106

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *