《SVG 動畫開發實戰》- 🤟 Vue + GSAP 實戰

🤟 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 版本的在線閱讀體驗，傳送門

微信公衆號版本

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