使用 GSAP 的位置參數 (position parameter) 建立更有彈性的時間軸

之前曾經提到,為了幫公司網站的動畫加入轉場的交錯效果,因此使用了 stagger 的方法。但是今天在看 GSAP 的相關資料時,發現如果能夠活用位置參數的話,便能夠更有彈性的操作自己的時間軸。

GSAP 3 的基本時間軸語法

在〈GSAP 3 的使用基礎〉中,曾經提到 GSAP 3 時間軸的基本語法:

// 實體化時間軸
const tl = gsap.timeline();

// 基礎語法
時間軸.方法( '選擇器', {屬性值} );
// 在 to 方法中加入 position 參數
時間軸.to( '選擇器', {屬性值}, 位置 );

預設的情況下,會按照 .to 方法的順序,依序執行時間軸的動畫:

See the Pen GSAP Position Parameter Test by Eric Chuang (@eric-chuang) on CodePen.

但是我們在屬性值之後,可以再加入 position 的參數,進一步控制時間軸。接下來,來稍微筆記一下 position 參數使用的值:

“+=秒數” “-=秒數”

透過 "+=秒數" 這個參數,我們可以遞延時間軸執行的時間。透過 "-=秒數",則是可以提前執行的秒數。

See the Pen GSAP Position Parameter += -= by Eric Chuang (@eric-chuang) on CodePen.

透過 “<” 貼齊前一個時間軸的起始時間

如果每個時間軸都要用秒數來計算,一旦當動畫變得更複雜時,便會難以管理,這是因為 "+=""-=" 的參考對象都是「前一個時間軸物件」。但如果我想要跟前一個時間軸物件同時觸發的時候,該怎麼辦呢?

換句話說,我們來看看下面的兩種情況:

/** 情況一: Circle 與 Triangle 會同時 */
tl.to( square, {duration: 1, x: 400} )
  .to( circle, {duration: 1, x: 400}, "+=1" )
  .to( triangle, {duration: 1, x: 400}, "-=1" );

/** 情況二: Square, Circle 與 Triangle 會同時 */
tl.to( square, {duration: 1, x: 400} )
  .to( circle, {duration: 1, x: 400}, "-=1" )
  .to( triangle, {duration: 1, x: 400}, "-=1" );

此時,如果使用 "<",便可以很直覺的讓想要同時觸發的動畫同時進行。

/** 情況一: Circle 與 Triangle 會同時 */
tl.to( square, {duration: 1, x: 400} )
  .to( circle, {duration: 1, x: 400}, "+=1" )
  .to( triangle, {duration: 1, x: 400}, "<" );

/** 情況二: Square, Circle 與 Triangle 會同時 */
tl.to( square, {duration: 1, x: 400} )
  .to( circle, {duration: 1, x: 400}, "<" )
  .to( triangle, {duration: 1, x: 400}, "<" );

/** 情況三: Square 與 Circle 同時,而 Triangle 會過一秒後執行 */
tl.to( square, {duration: 1, x: 400} )
  .to( circle, {duration: 1, x: 400}, "<" )
  .to( triangle, {duration: 1, x: 400}, "<+1" );

透過數字,指定動畫發生的絕對位置

除了利用 "" 來判斷相對時間外,也可以透過數字直接指定動畫要發生的確切秒數。

/** 指定絕對位置 */
tl.to( square, {duration: 1, x: 400} )
  .to( circle, {duration: 1, x: 400}, 3 )
  .to( triangle, {duration: 1, x: 400}, 5 );

/** 相當於以下的相對位置 */
tl.to( square, {duration: 1, x: 400} )
  .to( circle, {duration: 1, x: 400}, "<+1" )
  .to( triangle, {duration: 1, x: 400}, "<+1" );

透過標籤製作關鍵影格

我們可以透過 add() 這個方法,建立關鍵影格。主要的語法如下:

時間軸.to( 選擇器, {屬性值} )
  .add( "關鍵影格名稱", 時間(絕對/相對) )
  .to( 選擇器2, {屬性值}, "關鍵影格名稱" )
  .to( 選擇器3, {屬性值}, "關鍵影格名稱+=/-=相對時間" );

舉例來說,以下的寫法,會將 circle 與 triangle 組成 group1,並同時執行。

tl.to( square, {duration: 1, x: 400} )
  .add( "group1", "+=1" )
  .to( circle, {duration: 1, x: 400}, "group1" )
  .to( triangle, {duration: 1, x: 400}, "group1" );

需記得的是,如果使用標籤來標記關鍵影格時,相對時間會以關鍵影格的時間來計算。

See the Pen GSAP Position Parameter Tag by Eric Chuang (@eric-chuang) on CodePen.

參考資料

預設圖片
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