GSAP 3 的使用基礎

在快要一年前,曾經寫過〈使用 GSAP CSSRulePlugin 選取虛擬元素〉,來製作底線的特效。最近則因為公司網站又要再度改版,大幅提升動畫的使用比例,因此開始進一步研究 GSAP 的使用方法。

今天主要是用下面的範例來說明一些 GSAP 3 的基本作法,以及我之前需要修正的錯誤。

See the Pen background-crop by Eric Chuang (@eric-chuang) on CodePen.

GSAP 3 的基礎原理

我在 iT 鐵人賽當中,曾經寫過 GSAP 的簡單介紹,以及應該要如何運用在 WordPress 當中。GSAP 是一款專門製作網頁動畫的 JavaScript 函式庫,而網頁動畫的基本原理,便是將頁面中的元件,根據不同事件 (點擊、捲動、計時等) 來改變樣式屬性值 (例如位置、大小、顏色)。

GSAP 3 的基礎語法

GSAP 3 與舊版最大的差異,在於 GSAP 3 將原本的 TweenLite、TweenMax、TimelineLite 與 TimelineMax 整合為 gsap 物件。

// 舊版將時間軸實體化的作法
const tl = new TimelineMax();

// 新版實體化時間軸的作法
const tlNew = gsap.timeline();

// 基礎語法
時間軸.方法( '選擇器', {屬性值} );
// 讓具有 .title-bg 類別的元素在 0.5 秒內的不透明度變成 1
tlNew.to( '.title-bg', {
  duration: 0.5,
  opacity: 1
};

關於基本語法中的屬性值,如果是遇到有連字號 (-) 的樣式屬性,則需要使用 JavaScript 的「駝峰式大小寫命名法 (Camel Case)」,例如 backgroundSize、backgroundImage、clipPath 等。

其他的版本變更資訊,可以參考官方的升級公告

範例說明

在文章一開始的範例中,除了 gsap 的核心函式庫外,我們引用了另外一個 GSAP 外掛,名叫 SplitText。和之前介紹的 CSSRulePlugin 一樣,我們可以透過引用這個外掛,製作 GSAP 可以選擇的物件。

SplitText 的基本語法如下,透過實體化一個 SplitText 物件,並選擇要分割文字的類型:逐字元 (chars)、逐詞 (words) 或逐行 (lines)。更詳細的組態設定,可以參考官方文件

// 將 .title-bg 中的文字,以逐字元的方式切割
var mySplitText = new SplitText( ".title-bg", {
  type: "chars"
});

// 選擇切割後的所有元素。如果前面的 type 使用了 words 或 lines,
// 也能夠用一樣的方式建立選擇器變數。
var chars = mySplitText.chars;

將字元分割後,我們便可以為它們加上動畫效果:

// 定義時間軸
var tl = gsap.timeline();

// 透過變動 clipPath 的方式,製造出文字從左至右顯示的動畫效果。
tl.fromTo( chars, {
  clipPath: "polygon(0 0, 0 0, 0 100%, 0 100%)",
  webkitClipPath: "polygon(0 0, 0 0, 0 100%, 0 100%)"
	},
{
  duration: 0.5,
  clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)",
  webkitClipPath: "polygon(0 0, 0 0, 0 100%, 0 100%)"
} );

GSAP 的常見錯誤

根據官方網站的〈Most Common GSAP Mistakes〉一文,指出了幾點平常在使用 GSAP 時常見的錯誤:

  • 使用 from() 方法的邏輯問題:from() 的功能是讓物件從定義的樣式,變成「當前值 (current value)」。因此在發生錯誤時,要先從「當前值」下手進行偵錯。
  • 沒有預先設定 transform 屬性值:由於瀏覽器都是以像素 (pixel) 為單位回傳樣式計算結果,因此如果在 CSS 中使用了其他如 vw、vh 或 % 等單位,透過在 gsap 中定義 transform 屬性值,便可以提高準確度,也同時能提高系統效能。
  • 未使用 xPercent 與 yPercent:製作位移動畫時,比起 x: “50%”,用 xPercent: 50 更好。
  • 未使用函式 (functions) 包裝重複使用的動畫。

結語

GSAP 作為網頁動畫的重要函式庫,在 GSAP 3 的重大改版中,大幅減少了檔案的大小,改善效能問題,此外,也持續改進動畫物件的呼叫方式,用來提高轉譯的效率。

這次的範例使用了 SplitText 這款 GSAP 外掛,需要搭配配合 ShockinglyGreen 以上的付費方案,才能使用。費用大約是每年 3,000 元台幣。

隨著接觸 GSAP 越深,越能感受到 HTML+CSS+JavaScript 的緊密關係。許多網頁動畫,其實便是透過改變 CSS 的樣式屬性,達到不同的視覺效果,因此在學習網頁動畫的過程中,與其說是在學習 JavaScript,還不如說是在學習 CSS!

參考資料

預設圖片
Eric Chuang
正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124