SVG-Morpheus製作過場小動畫

文章引用：

• 套件Demo網址及安裝檔
• 供Vue.js使用的安裝檔
• SVG-Morpheus實現SVG圖示圖形間的補形動畫
• SVG動態背景
• Demo

安裝方法：

製作步驟：

• 先從繪圖開始吧。
• 開啟Adobe Illustrator，新增一個畫布，在上面繪製圖案。

  

• 圖案繪製完成後，轉存檔案，檔案格式需選擇SVG。

  

• 按下儲存後，出現SVG Option視窗，找到SVG Code按鈕，點下。

   

• 會開啟一個文件檔案，裡頭滿滿的座標。

  

• 選取含SVG標籤中的所有程式碼，複製。

  

• 開啟程式碼編輯器，新增一個.html檔案。
• 將剛剛複製的SVG程式碼，貼到body標籤內，另加入下方Script檔案。

  

• 儲存檔案後，開啟網頁檔就完成囉。p.s.可以從上方Demo連結點開看效果唷。