(5)前端好好玩用 GSAP 做一個特效 - 動畫屬性

前言

接著我們要來認識一下關於 GSAP 可以使用的動畫屬性。

動畫屬性

GSAP 提供了非常多的動畫屬性，而這些動畫屬性沒有一個非常明確的表，因為大部分都是基於 CSS 屬性為主，因此 GSAP 的動畫屬性分別兩大類：

• CSS 屬性
• 自訂屬性

以前面的範例來講

gsap.to('.box', { x: 100, duration: 3 })

其實就是使用了 x 這個 CSS 屬性，而這個 x 就是 GSAP 的動畫屬性，而 x 這個屬性就是 CSS 的 transform: translateX(100px) 的縮寫。

當然你也可以乾脆不使用 x 這個屬性，而是使用 transform: translateX(100px) 這個屬性，這樣寫起來就會長這樣：

gsap.to('.box', { transform: 'translateX(100px)', duration: 3 })

說真的這樣子寫起來會很辛苦，因此實際上來講，我們會使用 x 這個屬性，因為這樣子寫起來會比較簡單。

那麼剛剛有提到 GSAP 支援 CSS 屬性，那麼這些 CSS 屬性都有哪些呢？只要你是一名前端工程師，基本上你所熟悉的 CSS 屬性都是可以被 GSAP 使用的，例如邊移動邊旋轉 360 度的動畫：

gsap.to('.box', { x: 100, rotate: 360, duration: 3 })

又或者是邊移動邊縮放的動畫：

gsap.to('.box', { x: 100, scale: 2, duration: 3 })

這些屬性都是你所熟悉的 CSS 屬性，因此你可以使用這些屬性來做出你想要的動畫效果。

但是這邊要注意一下，假設你所使用的 CSS 屬性有「-」字號的話，請使用駝峰式命名法，例如：

gsap.to('.box', { x: 100, backgroundColor: 'red', duration: 3 })

因此這邊的 backgroundColor 就是 background-color 的縮寫，只要你遇到這種情況，請使用駝峰式命名法。

前面我們都是直接在 to() 方法的第一個物件中撰寫 CSS 動畫屬性，但是實際上我們也可以使用 css 物件來撰寫 CSS 動畫屬性，例如：

gsap.to('.box', { css: { x: 100, backgroundColor: 'red' }, duration: 3 })

只是這種做法會比較麻煩因為還要額外寫一個 css 屬性，因此實戰上來講，我們還是會使用前面一開始介紹的做法。

那麼這一篇就先到這邊，自訂屬性部分就讓我們下一篇來介紹。