GSAP3 教學- tweens 補間動畫

分享:
標籤: GSAP javascript

最近發現 GSAP 更新到 3.x 版了,寫法也跟以往不一樣,覺得變簡單也更好懂了,這邊一樣做一下筆記。

首先讀入 GSAP,使用 cdn:

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

 

或利用 npm install:

npm install gsap

 

GSAP3 跟以往的差別是現在統一使用 gsap 物件,不用像以前需要分 tween 或 timeline 了,以下是使用方法:

  • gsap.to(target, vars)- 設定結尾的樣式
  • gsap.from(target, vars)- 設定開頭的樣式
  • gsap.fromTo(target, fromVars, toVars)- 設定開頭跟結尾的樣式
  • vars 為 CSS 的屬性與值,只要是可以做漸變的值都可以設定

範例像這樣,只要設定好 target 跟 CSS 的變化就可以自動產生效果了:

gsap.to(".red", {rotation: 27, x: 100, duration: 1});

 

 

GSAP 預設的 CSS trasform 有比較簡易的寫法,以下是對照表:

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%)

 

這就是基礎的 GSAP3 的設定方法。