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

携手创作，共同成长！这是我参与「掘金日新计划 · 8月更文挑战」的第11天，点击查看活动详情

前言

最近的项目中有展示动图的需求，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是必填项，具体配置可以参考vue3-lottie.vercel.app/examples.ht…文档）

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

常用属性

// 动画循环次数
:loop="1"
// 反转动画
direction="alternate"
// 鼠标悬停时，动画暂停
:pauseOnHover="true"

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

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