🤟 Vue + GSAP 實戰

在學習過基礎 SVG 動畫原理後，如果結合我們熟悉的技術棧使用豈不是更爽。GSAP 提供了 npm 安裝包，下面我們來在 Vue 項目中集成 GSAP。

安裝 GSAP

yarn add gsap -S
// or
npm i gsap -S

在 Vue 組件中使用 GSAP

假設我們讓一個矩形旋轉 240 度，無限循環。

<template>
  <div id="app" class="app">
    <div class="box"></div>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  name: 'App',
  mounted() {
    gsap.to('.box', {
      rotation: 240,
      repeat: -1
    })
  }
}
</script>

<style>
.box {
  padding: 0.25rem;
  background: lightgreen;
  width: 3rem;
  height: 3rem;
  margin-right: 0.25rem;
}
</style>

項目演示

付費功能

使用 npm 安裝的 gsap 類庫中，部分高級功能是需要加入 GreenSock Club （付費）才能使用的。比如之前介紹過的，描邊動畫會用到的 DrawSVG 、變形動畫會用到 MorphSVG 等，這些只有加入 club ，成為會員才有使用權。不過 GreenSock 仍然提供了免費的試用版本。

如何在項目中使用付費功能？

💡 免費試用版本付費插件使用的是在線 CDN

聰明的你可能想到了。既然提供了免費的試用版本 CDN，那麼 CDN 資源我們是能獲取到的。比如我們使用 Vue 完成一個 SVG 描邊動畫 例子 Hi There。

獲取 CDN

在 GreenSock 提供的 CodePen Demos 中，我們可以免費體驗 GreenSock Club 中的插件功能。查看 CodePen 使用的 JS 資源，會發現 DrawSVGPlugin 的身影，這個資源不是一個公開的放在 cloudflare CDN 服務地址上的資源，像是上傳到 CodePen 上的資源。我們可以打開這個 JS 鏈接，Copy 代碼放在本地。

引入 DrawSVGPlugin

import { gsap } from 'gsap'
import DrawSVGPlugin from '@/plugins/DrawSVGPlugin'

gsap.registerPlugin(DrawSVGPlugin)

項目樣例

OK，到這我們也可以在 Vue 中使用付費的插件了。但是，這種方法仍然是一個投機取巧的方法。我們得不到 GreenSock 的功能更新，因為付費插件沒有集成在 GSAP 類庫中。

當 GSAP 升級了插件，我們只能再去獲取新的插件 CDN，不過作為個人練手項目，或者本地使用的項目。這到是個不錯的方法。使用其他付費插件同理。

warning
⚠️ 不建議在公開的項目中使用 GreenSock 付費插件，畢竟涉及版權問題。

🙏 感謝

感謝你閲讀到了這裏，到此本小冊內容就完結了。希望小冊內容能讓你對 SVG 有一個簡單的瞭解。對 SVG 動畫的表現形式有初步的概念。甚至能自己動手去實現你的動畫 idea 又或者能把動畫技術運用到項目中。

如果你是一個前端開發者，那麼你有可能對《前端技術棧月刊》感興趣，這是我整理維護的一份月刊。📖 聚焦前端，記錄過去一個月看到的優秀的文章、工具，豐富前端技術棧。每月28日更新。感興趣的可以關注下。

最後推薦一本書給大家，Sarah Drasner 的 《SVG Animations》，是這本書給予我關於本小冊的很多有用的知識點。Sarah 是一個活躍於開源社區的程序媛，屢次獲獎的線下 CONF 演講者，Vue 開源項目的核心成員，Netlify 的 Tech Leader。她的這本書以及在 CSS Tricks 上的文章確實讓我學到不少有趣的知識。

寫於 2020.06.17，更新於 2020.12.15

關於

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

Notion 版本

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

GitHub 版本

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

微信公眾號版本

關注我的技術公號，同樣也可以找到此小冊系列，目前在更新中。。。