GSAP 的 TweenMax 基礎教學
GSAP(GreenSock Animation Platform)是一個老牌的動畫服務，以往用在 flash 上，後來在 js 也都可以拿來使用，最近也滿多人把這隻應用在專案上，所以這邊也來介紹一下。
照文件的說明這隻在 DOM, SVG 和 canvas 都可以使用，使用的方法也是先下載或是透過 cdn 連結就可以開始使用了。
cdn 連結網址: https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js
用法是 TweenMax.to()，裡面包含三個要素：
TweenMax.to(選擇器, 時間(單位: 秒), {屬性});
基本的應用如下：
裡面的屬性結合了 CSS3 的屬性，可以讓我們少寫很多 CSS3 的屬性，對應如下表：
使用 TweenMax.from() 則可以讓動畫從設定的地方回到原本的地方
使用 fromTo 設定前後的樣式
照文件的說明這隻在 DOM, SVG 和 canvas 都可以使用，使用的方法也是先下載或是透過 cdn 連結就可以開始使用了。
cdn 連結網址: https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js
用法是 TweenMax.to()，裡面包含三個要素：
TweenMax.to(選擇器, 時間(單位: 秒), {屬性});
基本的應用如下：
裡面的屬性結合了 CSS3 的屬性，可以讓我們少寫很多 CSS3 的屬性，對應如下表：
| GSAP | CSS |
|---|---|
| x: 100 | transform: translateX(100px) |
| y: 100 | transform: translateY(100px) |
| rotation: 360 | transform: rotate(360deg) |
| rotationX: 360 | transform: rotateX(360deg) |
| rotationY: 360 | transform: rotateY(360deg) |
| skewX: 45 | transform: skewX(45deg) |
| skewY: 45 | transform: skewY(45deg) |
| scale: 2 | transform: scale(2, 2) |
| scaleX: 2 | transform: scaleX(2) |
| scaleY: 2 | transform: scaleY(2) |
| xPercent: 50 | transform: translateX(50%) |
| yPercent: 50 | transform: translateY(50%) |
使用 TweenMax.from() 則可以讓動畫從設定的地方回到原本的地方
使用 fromTo 設定前後的樣式
留言