一、Lottie簡介

Lottie是一個庫，可以解析使用AE制作的動畫（需要用bodymovin導出為json格式），支持web、ios、android和react native。在web側(cè)，lottie-web庫可以解析導出的動畫json文件，并將其以svg或者canvas的方式將動畫繪制到我們頁面中

總的來說，

• Lottie通過讀取json文件信息實現(xiàn)動畫效果。
• json信息包括動畫長度、寬度、動畫資源、圖層信息等，這些屬性闡述了動畫該做什么、該怎么做。

1.1 lottie的優(yōu)點

Lottie方法方案是由設計師出動畫，導出為json，給前端播放。所以，使用Lottie方案的好處在于：

• 動畫由設計使用專業(yè)的動畫制作工具Adobe After Effects來實現(xiàn)，使動畫實現(xiàn)更加方便，動畫效果也更好；
• 前端可以方便的調(diào)用動畫，并對動畫進行控制，減少前端動畫工作量；
• 設計制作動畫，前端展現(xiàn)動畫，專業(yè)人做專業(yè)事，分工合理；
• 賣家秀即買家秀，還原程度百分之百；
• 使用lottie方案，json文件大小會比gif文件小很多，性能也會更好。
• 支持跨平臺，開發(fā)成本較低，一套Lottie動畫可以在Android/IOS/Web多端使用。
• 性能好，端上除了解析json，基本沒有其他耗性能的操作；并且相比于需要存儲較多圖片的幀動畫，Lottie可以節(jié)省比較多的內(nèi)存空間。

二、使用方法（附基本代碼）

2.1 前期準備

1. 下載安裝** After Effects **

2. 在AE上制作動畫
3. 安裝插件Bodymovin，并使用插件導出，導出的是json格式的文件結(jié)構(gòu)

4. 使用【lottie-web】依賴讀取該文件導出的json 格式的內(nèi)容 便引入了該lottie動畫

2.2 基本代碼

<template><div class="lottie_page"><div id="lottie"></div></div>
</template>
<script>
import lottie from 'lottie-web';  // 引入lottie 庫
import * as animationData from '@/assets/lottie/data.json'; // 引入素材文件
export default {data() {return {};},mounted() {this.lot = lottie.loadAnimation({container: document.getElementById('lottie'),renderer: 'svg',loop: false,autoplay: false,animationData: animationData.default});},
};
</script>

所以，在網(wǎng)頁上制作動畫就是這么簡單，只需少量的代碼便可以實現(xiàn)！！

三、效果

四、參考

1. 原生插件 用AE導出json | LottieFiles plugin | 原生插件
2. bodymovie插件 https://pan.baidu.com/s/1vcM86DyoZjefwCN5_-GqIA?pwd=2301&at=1711347005762
3. 使用 如何在vue中使用Lottie - 掘金

---

附加：進階玩法

第一階段

整體元素的簡單的播放，暫停，設置播放進度等

第二階段

多個元素各自有自己的播放的規(guī)律

1. AE中有一個總合成，不同元素之間有一個單獨的合成
2. 導出多個不同元素的json文件
3. 在vue中為每個json文件定義一個標簽，并掛載事件
4. 單獨控制元素的播放規(guī)律

第三階段

多個元素有個自己動態(tài)的播放規(guī)律

由于 lottie是用過 json 來控制動畫的，而前端與后端交互最常見的格式是什么？

JSON！！

因此，可以從后端獲取數(shù)據(jù)之后，在前端重新拼接到json中，就可以實現(xiàn)動態(tài)的動畫。

舉個栗子🌰：

1. 拼多多翻牌抽獎（動態(tài)設置金額，指定選中翻牌）