vue3.0项目中lottie解析json动画格式

前言

最近的项目中有展示动图的需求，ui之前给了gif文件，但扩展性太局限，所以采取了通过json解析动画的形式。

具体实现

采取Lottie来将json解析成动画，但因为项目使用的是Vue3.0，所以Lottie官方提供的npm是无效的，需要使用vue3-lottie

npm install vue3-lottie@latest --save

在main.js文件中引入全局插件

import { createApp } from 'vue'
import App from './App.vue'
import Vue3Lottie from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
const app = createApp(App);
app.use(Vue3Lottie);

具体使用（animationData传入json动画文件，animationData是必填项，具体配置可以参考LottieGithub文档）

<Vue3Lottie :animationData="toJSON" :height="13":width="16"  />

注意：json文件需要用require引用，并且在setup里面初始化toJSON,以便模板使用
需要用require引用的原因：如果在标签上直接写图片/动画的路径，路径会被转为base64格式。但是如果通过require引入变量，设置静态路径，不会转base64，而是显示正常路径

const toJSON = require('@/assets/json/half.json')