GSAP

GSAP(GreenSock Animation Platform)，是一套處理動畫與特效的 JS 套件。

之前常見的 TweenMax 就是其中的一個核心功能。從 GSAP3 開始就都合併成 gsap 物件。gsap 物件有各種方法和屬性，可用來創建 Tweens(補間)和 Timelines(時間軸)。新舊版本寫法不同，
但都可以使用。建議使用新寫法，可讀性更好。

ps.補間(in-betweening)：意指如同畫紙漸進方式，產生動畫。補間動畫中，我們只要定義起點、終點、時間軸、動畫時間、速度曲線，那麼框架就會自動幫我們計算出起點到終點間的過渡動畫。

因為 GSAP 可以使用 GPU 加速，因此執行速度效能上會勝過 jQuery。透過其模組化結構，保持了核心引擎的輕量，又加上它是漸變的去改變某個屬性。可使用在任何可操控的屬性上去製作動畫效果，是一個相當好用的工具。

DOM, SVG 和 canvas 都可以使用。

使用

安裝

npm install gsap --save

CDN

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

基本語法

gsap.method('selector', {});

timeline

Code

1
2
3

const tl = gsap.timeline();

tl.method('selector', {});

持續(duration)時間寫法

舊寫法

Code

1 2	// 參數分別是 target目標、duration動畫時間、vars動畫相關參數 gsap.to(".squiggle", 3, { opacity: 0 });

新寫法

Code

// 參數分別是 target目標、、vars動畫相關參數(整合 duration動畫時間)
  gsap.to('.squiggle', {
    // 持續時間
    duration: 1,
    opacity: 0,
  });
  
// SVG 

gsap.to('.squiggle', {
    duration: 3,
    // 參數控制
    strokeDashoffset: 0,
    // 使用 DrawSVG 繪製
    // drawSVG: 420,
})

交錯屬性

之前要創建 Tween 實體再使用，但現在不需要了。

新寫法

Code

gsap.to('.box', {
  duration: 1,
  stagger: 0.5,
  x: 100
});

亂數功能

Code

// 100 - 200

gsap.to('.box', {
  x: 'random(100, 200)',
});

// 四選一

gsap.to('.box', {
  x: 'random([0，100，200，300])',
});

影格(Keyframes)

在同一個 Tween 內完成。

Code

gsap.to('.box', {
  keyframes: [
    { duration: 1, x: 100, },
    { duration: 1, y: 100 },
    { duration: 1, rotation: 360 },
  ]
});

全域動畫

以控制全部的動畫實體。

Code

gsap.globalTimeline.timeScale(0.1); // 控制所有動畫的速率 0 ~ 1
gsap.globalTimeline.pause();        // 停止目前所有動畫
gsap.globalTimeline.play();         // 播放目前所有動畫
gsap.globalTimeline.paused();       // 回傳目前動畫狀態 true:暫停 / false:播放

相對動畫時間

：最近添加的動畫的開始時間
<：最近添加的動畫的結束時間

Code

gsap.timeline()
  .to('.box1', { ... })
  .to('.box2', { ... }, '<')
  .to('.box3', { ... }, '<0.8')
  .to('.box4', { ... }, '<');

Tween(補間)動畫

產生一段動畫效果。

讓動畫從原本的效果改變成到設定的效果

gsap.to(target, vars)

讓動畫從設定的效果變回到原本的效果

gsap.from(target, vars)

設定變化前後的樣式

gsap.fromTo(target, fromVars , toVars)

target：所有符合的 CSS 選擇器都會是設置動畫的對象。
多個元素對象，使用陣列 [element1, element2]。
vars：設置補間效果及屬性狀態。

e.g.

連續動畫效果

Code

1
2
3

gsap.to('.box1', { duration: 1, x: 100, });
gsap.to('.box2', { delay: 1, duration: 1, y: 100 });
gsap.to('.box1', { delay: 2, duration: 1, rotation: 360 });

Timeline

用來控制、管理一連串的動畫。就像先產生一段時間後，再加入動畫效果。

控制多段動畫 / 序列動畫

用 Timeline 來做連續動畫效果，可以不用添加 delay 屬性。

Code

const t1 = gsap.timeline();

t1.to('.box1', { duration: 1, x: 100, })
  .to('.box2', { duration: 1, y: 100 })
  .to('.box1', { duration: 1, rotation: 360 });

放置動畫

有四種方法： to()、from()、fromTo()、set()

Code

1
2
3

const tl = gsap.timeline();

tl.to(element, {duration: 1, x: 100, opacity: 0});

鏈式呼叫

Code

const tl = gsap.timeline();

tl.from(element, {duration: 1, x: 50})
  .to(element, {duration: 1, y: 50});

加入已有動畫

Code

const tween =  gsap.to(element, {
    duration: 1,
    opacity: 0,
  });

const tl = gsap.timeline();
tl.add(tween);

控制動畫插入點

Code

// 插入至時間軸末尾
tl.to(element, 1, {});  

// 插入至時間軸2秒處
tl.to(element, 1, {}, 2);

// 在時間軸結束後2秒鐘插入
tl.to(element, 1, {}, '+=2');
// 在時間軸結束前2秒鐘插入
tl.to(element, 1, {}, '-=2');

// 在3秒處建立spin標籤
t1.addLabel('spin', 3);
// 在spin標籤處插入動畫
tl.to(element, 1, {}, 'spin');
// 在spin標籤處前三秒入動畫
tl.to(element, 1, {}, 'spin+=3');

// 在最近一次動畫的開頭插入
tl.to(element, {x: 100}, '<');

// 在最近一次動畫的開始後1秒插入
tl.to(element, {x: 100}, '<1');

GSAP3：專門處理動畫與特效的 JS 套件

有許多範例可以參考使用。

結合 DrawSVG(jQuery)－製作SVG筆繪動畫

以往要製作 svg 的筆繪效果動畫，需要使用 CSS 來操作，利用 css的 stroke-dashoffset 等屬性，使用 keyframe 的方式去製作動態效果。現在直接可以結合 GSAP3 跟 DrawSVG 來做。

e.g.

Code

squiggle {
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
  animation: draw 2s linear forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

先引用 jQuery

引用 drawsvg(GSAP 有plugin)

使用方式

gsap.fromTo('.squiggle', 2, { drawSVG: "0%" }, { drawSVG: "100%" })

參考：
https://hackmd.io/@chupai/SJStDfFV8
https://medium.com/@faition2/認識tweenmax-1-668549dc312
https://ithelp.ithome.com.tw/articles/10207628
http://blog.wingzero.tw/2018/07/gsapgreensock-animation-platform.html
https://ithelp.ithome.com.tw/articles/10223796
https://junyou.tw/jquery-drawsvg/