《SVG 動畫開發實戰》 - 🪀 使用 GreenSock 製做動畫

🪀 使用 GreenSock 製做動畫

爲何選擇 GSAP？

先來看一個 GSAP （GreenSock Animation Platform）介紹，如下動畫使用 GSAP 編寫：

https://codepen.io/GreenSock/...

確實現在有不少種方法讓 Web 頁面生動起來，我在《SVG 基本介紹》章節也對比過一些優秀的 SVG 相關類庫，爲何我選擇使用 GSAP 編寫 SVG 動畫，咱們看一張 GSAP 功能全景圖

相比之下 GSAP 有如下優勢：

• 幾乎可讓任何元素動起來，包括 SVG
• 語法簡潔，容易上手
• 擁有操做時間軸功能，對製做線性動畫有很大幫助
• 樣例豐富，在 CodePen 上有大量 Demo
• 插件功能強大，包括 DrawSVG、MorphSVG 等
• 性能良好，兼容性良好

GSAP 到底有什麼用呢，其實 GSAP 的核心功能是提供了操縱元素屬性的能力，更有功能強大的插件輔助，會讓複雜動畫變的可操控。

開始使用 GSAP

下面使用一個小例子講解 GSAP

準備 SVG

咱們在 Sketch 裏繪製了一個圓形，導出優化後的 SVG 代碼以下：

<svg width="960px" height="240px" viewBox="0 0 960 240">
  <g id="shape-page">
    <circle id="circle" fill="#60CCFD" cx="120" cy="120" r="80"></circle>
  </g>
</svg>

簡單位移

// 描述了使目標 circle 在兩秒內向 x 軸位移 320px
gsap.to('#circle', {
  x: 320,
  duration: 2
})

https://codepen.io/xiaoluobod...

若是你也熟悉使用 CSS 開發動畫，那麼下面列表會幫助你理解 gsap.to 中屬性的做用

x: 100 // transform: translateX(100px)
y: 100 // transform: translateY(100px)
z: 100 // transform: translateZ(100px)
scale: 2 // transform: scale(2)
scaleX: 2 // transform: scaleX(2)
scaleY: 2 // transform: scaleY(2)
scaleZ: 2 // transform: scaleZ(2)
skew: 15 // transform: skew(15deg)
skewX: 15 // transform: skewX(15deg)
skewY: 15 // transform: skewY(15deg)
rotation: 180 // transform: rotate(180deg)
rotationX: 180 // transform: rotateX(180deg)
rotationY: 180 // transform: rotateY(180deg)
rotationZ: 180 // transform: rotateZ(180deg)
perspective: 1000 // transform: perspective(1000px)
transformOrigin: '50% 50%' // transform-origin: 50% 50%

是否是看起來像是 CSS transform 屬性的簡寫，沒錯，很容易上手使用對不對。

緩動動畫

GSAP 提供了內置的緩動函數，默認 ease 屬性值爲: 'power1.out' ，好比咱們讓 circle 像球同樣彈起運動。只需設定屬性 ease: 'bounce'

https://codepen.io/xiaoluobod...

GSAP 還支持這些緩動函數： https://greensock.com/ease-visualizer/

時間軸線

gsap.timeline() 是 GSAP 提供的另外一個神器，擁有操縱時間軸線的能力，會讓動畫有序進行，在咱們須要控制一組動畫的時候很是有用

好比讓多個 circle 有序移動：

https://codepen.io/xiaoluobod...

時間控制

gsap.timeline 提供了第三個參數，這個參數可讓動畫運行時間變得可控，讓動畫變得更生動有趣。

下面例子時間軸動畫時長爲 duration: 0.66 ，下面讓第 二、三、4 個 circle 使用相對時間，減去動畫時長，那麼製造了多個 circle 一同運動的效果。

https://codepen.io/xiaoluobod...

時間交錯

gsap.to 提供了一個用於控制時間交錯的屬性：stagger ，這個屬性一樣是對動畫時間的控制，好比讓多個 circle 同時以 0.2s 的時間錯開進行Y軸位移運動

https://codepen.io/xiaoluobod...

GSAP 的簡單使用介紹就到這裏，它的功能遠不止這些。還有一些強大的插件，能寫出更復雜、更有意思的動畫效果。等你去嘗試。

GSAP Tools

GreenSock Animation Platform 提供了一些優秀的助手/調試工具，有助於咱們在開發動畫時候進行調試。這些工具備一些須要加入 Club GreenSock 才能使用

Ease Visualizer

GSDevTools

GSAP Docs

參考

• https://greensock.com/get-started/

關於

本文是《SVG 動畫開發實戰》 系列文章第四章。

Notion 版本

小冊是在 Notion 上完成撰寫的，因此我保留了 Notion 的分享版本，你也能夠點擊這裏查看。

GitHub 版本

小冊提供了 GitHub 版本的在線閱讀體驗，傳送門

微信公衆號版本

關注個人技術公號，一樣也能夠找到此小冊系列，目前在更新中。。。