沒有時間軸的 gsap 動畫，都是獨立且直接立即播放
直接使用 gsap 的動畫方法，每一段操作的元素都屬於獨立的動畫，在沒有時間軸的安排下，會是直接運行程式碼時立即直接播放動畫。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | gsap.to('#box1', { duration: 5, x: 500, repeat: -1, ease: 'bounce.out', }); gsap.to('#box2', { duration: 5, x: 500, repeat: -1, ease: 'bounce.out', }); gsap.to('#box3', { duration: 5, x: 500, repeat: -1, ease: 'bounce.out', }); |
範例中的 3 個方塊動畫都是一樣的，並且會同時移動。
當然如果不要 repeat 的話，直接放一次透過 delay 屬性來算時間是可以達到，但這只限每個元素動畫放一次的情形下才可以，另外還要算先前動畫的時間透過 delay 來設定，自然不方便了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | gsap.to('#box1', { duration: 3, x: 500, ease: 'bounce.out', }); gsap.to('#box2', { duration: 3, x: 500, ease: 'bounce.out', delay: 3, }); gsap.to('#box3', { duration: 3, x: 500, ease: 'bounce.out', delay: 6, }); |
See the Pen GSAP – duration + delay by Jimmy_Wu (@Jimmy_Wu) on CodePen.
tileline 時間軸
透過 gsap.timeline() 宣告變數 tl，將每個動畫對象透過 tl 變數接 gsap 方法串接
3 個方塊的動畫是依序執行 (意指 A 結束後才接著 B 以此類推)，那麼這時候就需要用到 Timeline 了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | const tl = gsap.timeline(); tl.to('#box1', { duration: 5, x: 500, repeat: -1, ease: 'bounce.out', }); tl.to('#box2', { duration: 5, x: 500, repeat: -1, ease: 'bounce.out', }); tl.to('#box3', { duration: 5, x: 500, repeat: -1, ease: 'bounce.out', }); |
範時會發現在 tl 串接 .to() 方法，在三個方塊一樣同時移動，而且不是獨立播放且重覆播放。
tileline 的 defaults 參數，將共用動畫參數做為預設值共用，增加程式碼可讀性
透過 defaults 參數將相同的屬性寫在一起，程式碼只需要寫一次了，透過這種方式程式碼得可維護性就跟著升高。
1 2 3 4 5 6 7 8 9 10 11 12 | const tl = gsap.timeline({ defaults: { duration: 5, x: 500, repeat: -1, ease: 'bounce.out', }, }); tl.to('#box1', {}); tl.to('#box2', {}); tl.to('#box3', {}); |
使用 timeline 時間軸後的動畫方法，第三參數用來設定播放的時間，說明 num | += | -= | < | <+=num | > | >-num
官方所提供的時間軸參數 codepen。
See the Pen Position Parameter explainer – constructor by GSAP (@GreenSock) on CodePen.
1 2 3 4 5 6 7 8 9 10 11 12 13 | const tl = gsap.timeline({ defaults: { duration: 5, x: 500, // repeat: -1, }, }); tl.to('#box1', {}); // 預設直接開始 tl.to('#box2', {}, 1); // 從時間軸開始處恰好 1 秒插入 tl.to('#box3', {}, '+=2'); // 時間軸結束後 2 秒 tl.to('#box4', {}, "<"); // 上一個動畫的開始。將 < 視為返回上一個動畫開頭的指標，同 #box3 同步。 tl.to('#box5', {}, ">-3"); // 時間軸結束後才開始計算 (在動畫結束再加時間) ，將 -3 於 #box3 #box4 同時結束前的 3 秒啟動動畫。 |
See the Pen GSAP – 30 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
時間設定參數如下：
- 沒設參數：直接開始動畫。
- 1：數值指定 1 秒於時間軸開始後 1 秒啟動。
- '+=2'：時間軸結束後 2 秒。
- "-=1"：時間軸結束前 1 秒。
- <：上一個動畫的開始，加入的動畫會與前一個動畫的開頭齊頭。
- "<3" 與 "<+=3"：上一個動畫開始後 3 秒。
- >：上一個動畫的結尾，加入的動畫會會在前一個動畫的結尾處將開頭接上。
- ">-3"：上一個動畫結束前 3 秒，可理解成 上一個動畫的結尾加 -3 秒
資料來源：