如何在Vue中使用lottie加載SVG動畫

時間 2020-01-31

標籤如何 vue 使用 lottie 加載 svg 動畫简体版

原文原文鏈接

背景

最近剛搞完官網，是時候分享一波我在碼官網過程當中遇到的一些小困難。固然，我會分享一些比較重點的內容。如今網頁上比較複雜的動畫基本都採用 SVG，像 Ant Design 全家桶的官網，首頁的 Banner 基本採用 SVG 動畫（太過複雜的 SVG 會消耗 CPU 性能，你電腦的散熱器可能就會嗡嗡響，特別是 AntV 官網的 Banner 動畫，打開久了我電腦的 CPU 會居高不下），但目前實現 SVG 動畫較簡便的方式有兩個：Lottie 和 SVGA（兩個庫各有優缺點，具體對比請轉至《Android 動畫庫對比(Lottie 和 SVGA)》），因爲當時沒找到 SVGA 轉換器（SVGA 轉換器下載：點我），因此只能採用 Lottie。接下來我會講解如何從 After Effect 導出到 Web 去調用整個流程。javascript

舒適提醒：文章篇幅較長，想了解 Web 部分如何使用可直接轉至 Web 部分。html

After Effect 部分

1.安裝ZXP Installer

在安裝 Bodymovin 以前須要先安裝 ZXP Installer，其下載連接爲：aescripts.com/learn/zxp-i…。vue

2.安裝 Bodymovin

而後再下載 Bodymovin，其各版本下載連接：github.com/bigxixi/bod…。java

安裝完 ZXP Installer 後打開它，將 Bodymovin 文件解壓到桌面（記得是 zxp 格式），選擇 ZXP Installer 菜單欄 "File" - "Open"，而後選擇 Bodymovin 便可，如圖：git

這裏我已經安裝完畢，用的版本是 5.5.0，原本用的 5.5.6 版本，可是在 AE CC 2017 版本未能正常顯示。github

3.導出data.json

打開AE，記得先把全部圖層預合成，而後重命名合適的名稱，接着在菜單欄選擇 "窗口" - "擴展" - "Bodymovin"，點擊如圖所示的小齒輪：web

而後選擇 Glyphs 這項，也可同時勾選 Standalone 、Demo ，可是這裏不必也用不上，勾選 Glyphs 便可，如圖：
json

注：Standalone 可導出單獨的 js 文件，裏面包含 json 動畫數據和庫文件，無需再引用 lottie.js 庫文件，而使用本方式時可直接引用 js 文件，代碼以下：
segmentfault

<!-- 注意 data.js 文件與當前 html 文件同級 -->
<script src="./data.js"></script>複製代碼

而後在 <body></body> 內需添加如下代碼便可：
bash

<!-- 注意 id 名稱不可隨意更改，若要更改請先把 data.js 裏面的獲取 DOM 語句更改 -->
<div id="script"></div>複製代碼

而 Demo 會導出單獨的 html 文件，裏面包含 json 數據和庫文件，直接打開便可預覽。可是不推薦使用 Standalone 和 Demo 這兩種形式，json 數據和庫文件整合在一塊兒，文件會很大，影響加載速度！

點擊如圖所示位置可更換文件保存位置：

最後點擊左上角綠色按鈕 "Render" 等待渲染便可。渲染完畢後，打開保存的文件夾，你會發現文件夾裏有個 data.json 文件，裏面保存的就是動畫數據。

爲了省帶寬，我已經把 data.json 上傳至 Github，若是有導出 images 文件夾，須要一同上傳，不然沒法正常顯示！或者你也能夠這樣作：先把 images 上的圖片上傳至圖庫並獲取每一個圖片的連接，記住，圖片順序不能亂。而後打開 data.json，把 "assets" 字段下的 u 集合都刪除，而後 p 集合換成對應的圖片連接，如圖：

整理後的動畫數據應該是這樣子的：

而後下面就能夠直接引用 data.json 文件而無需管理 images 文件夾了。

Web 部分

囉嗦幾句：原本用 vue-lottie 依賴也能夠實現（這個依賴有小坑，解決小坑請看這裏：點我），可是後期爲了優化 build 時的文件，因此沒有采用該方法，畢竟看了下 vue-lottie 依賴封裝的代碼仍是有點多的。

1.引入 lottie.js

打開 public 文件夾下的 html 模板文件，在合適的位置引入 lottie.js，這裏建議把官方的 lottie.js Fork 到本身的 Github，而後本身再引用。官方 lottie-web 具體庫連接：點我，記得選 min 版本哦！如圖：

代碼以下（這裏引用的是我 Github 的連接）：

<script src="//zpfz.github.io/Website/dist/js/lottie.min.js" crossorigin="anonymous" type="text/javascript"></script>複製代碼

2.添加 SVG 舞臺

在須要添加 SVG 動畫的位置添上如下語句：

<div id="lottie"></div>複製代碼

上述的 div 就比如是 SVG 動畫的舞臺，讓它在 id 名爲 lottie 的 div 下進行動畫。

3.添加動做代碼

lottie.js 提供了一些參數，好比是否自動播放，是否循環播放等等，更多方法/屬性請訪問：點我，官方實例請訪問：點我。通常能夠在生命週期函數（好比 created、mounted 等等）添加代碼，這裏推薦在 mounted 週期下執行代碼，其代碼以下：

mounted() {
	// 建立動畫實例，並設置好默認屬性 
	let animData = {
	    // 綁定 id 名爲 lottie 的舞臺
	    wrapper: document.getElementById('lottie'),
	    // 動畫類型
	    animType: 'svg',
	    // 是否循環播放
	    loop: true,
	    // 是否預渲染
	    prerender: true,
	    // 是否自動播放
	    autoplay: true,
	    // json 動畫數據路徑
	    path: '這裏替換成你的 data.json'
	};
	// 執行動畫實例
	let anim = bodymovin.loadAnimation(animData);
}複製代碼