VueJS

SVG動態背景

Edmond Yip

Dec 22, 2017 — 5 min read

動態 SVG 背景

開始時第一個遇到的問題就是 Background。我構思中是使用 SVG 做背景。每次轉頁是 SVG 動態轉成另一個形狀。

我曾經試用 Snap.svg 及 SVG.js 來做這效果，但由於都比較困難，所以最後選用一個比較舊的 Library SVG Morpheus。先比較一下各 Library 的分別。

Snap.svg

很多人推薦的 SVG animation library。但在做動畫時需要由指定一個 path 轉到另一個 path，不能由現在的 path 轉到另一個 path，雖然還是有方法在控制上不夠方便，暫且不採用。

SVG.js

聲稱速度很快的 SVG animation library。我看 SVG.js 其實有控制 path animation 的 plugin。但是什麼教學也沒有，我在自己測試後，發現雖然可以使用 path.animation().plot 來由現在的 path 轉成另一個 path。但是過程中兩條 path 的形狀結構必需一樣。有多少個 M/C/S 也必須相同，令整個開發受限，也暫且不採用。

SVG Morpheus

一看到 Demo 就知道這個就是我要的東西，可以由隨意一組 path 變成另一組 path，用 <g> group 起的一組 path 有多少個都成，沒有 path 結構的限制，設置也很簡單，雖然開發者已經停止維護了好一陣子，不能在 VueJS中直接 import 使用。

編寫過程

修改程式

首先我要修改一下 SVG Morpheus，下載並打開 svg-morpheus.js file，把整個包成一個 function export 供 Vue 使用，只要修改了就可以跟 components 一樣在 VueJS 中 import 使用了。

import SVGMorpheus from "/js/svg-morpheus"

我 fork 了一個修改了的分支在 GitHub 以供參考

準備背景圖形

用 Adobe illustrator 開一個 720 x 480 的畫版，為了出來跟 viewBox 的大小不會相差太多，在中心點畫一個方形及圓形再 save 成 SVG，儲存設定都用預設的就好，顏色可以用 CSS 控制，不填也可以。

Screen-Shot-2017-12-21-at-12.43.46-PM

畫圖的重點是不要用原生的圖形，要不是出來的 code 就不是 path 了，把 svg 直接拉到Visual Studio Code 就可以見到 svg code。

Screen-Shot-2017-12-21-at-4.07.15-PM

直接用繪圖工具點出來的正方形會由 path 組成如下：

Screen-Shot-2017-12-22-at-2.06.18-PM

v-for path

我在 data 中儲放了 path 的內容然後用 v-for loop 出來，因為在 <g> 中可以同時儲存多個圖形，再在中間儲存多個 path，我之後再講解如何使用。

template 中放一個 SVG 就成，並設定成全畫面背景 (svg tag 中的參數是必須的)

data path 中用 array，可以儲存多條 path

    data: function () {
      return {
        target: this.$route.name,
        svgBg: null,
        svgList: [{
          name: 'home',
          path: [
            'M260,341V141H460V341Z'
          ]
        }, {
          name: 'test',
          path: [ 'M357.75,136C409,136,461.5,190,461.5,241.75,461.5,306,417,343.5,357.75,343.5,298,343.5,258,295,258,241.75,258,185,304.75,136,357.75,136Z'
          ]
        }]
      }
    }

mounted 中建立一個叫 svgBG 的 SVG 動畫指定 id 是 #background-svg
而 target 就是下一個 SVG 的 ID
執行 change 就是 load 完後執行一次 (就是進場時會先轉一次)

    mounted: function () {
      this.svgBg = new SVGMorpheus('#background-svg')
      this.target = this.$route.name
      this.change()
    }

methods 中就是放置 change 的功能，把 SVG 動畫轉到 target 的動畫

    methods: {
      change: function () {
        this.svgBg.to(this.target)
      }
    }

最後 watch 中觀察 vue-router 的動作
偵察 router 有改變就把 target 轉成目標 router 的 name
然後又執行一次 change

    watch: {
      '$route' (to, from) {
        this.target = this.$route.name
        this.change()
      }
    }

在 router 中隨意設定兩頁用來做測試，我使用 home
router name 要跟 svgList 中的 name 一樣哦！

然後就可以 npm run dev 測試一下

test

SVG Morpheus 的其他設定

在 new SVGMorpheus 後面加上 option 調整效果

new SVGMorpheus('#background-svg', {duration: 1500, easing: 'circ-in', rotation: 'counterclock' })

duration 是動畫時間，預設 750
easing 是動畫效果，預設沒有，可用的效果可以參考官方 demo
rotation 是動畫旋轉方向，預設順時針，可以設定逆時針，隨機及不旋轉

test2

因為有 hot-reload 的關係，一修改完後 save 就馬上看到效果了

多個圖形組合

接下來要嘗試多個圖形組合，今次由左上右下兩個方形變成左下右上的兩個圓形，再開一個新的 AI 圖形

test2

由於今次有兩個圖形，所以 path 也會有兩條

Screen-Shot-2017-12-22-at-3.29.11-PM

加上兩頁不同 router name 的頁面後，馬上進行測試

test3

這樣就可以轉頁同時有動態轉動的背景了！

在 github 上載了整個 demo project
(https://github.com/edmondyip/vue-svg-morpheus)
也建立了一個 live demo 供測試之用

如發現有 bug 請通知我，謝謝