vue3+lottie的使用神器：vue3-lottie (electron也适用)

前言：

        Lottie是一个适用于Android，iOS，Web和Windows的库，它解析使用Bodymovin导出为json的Adobe After Effects动画，并在移动设备和网络上本地渲染它们！

换句话说，就是提供一个json的文件，我们把它渲染到界面上，是一个动图，我们这里来分享下，如何在我们的vue3中来使用他。

原理图：

lottie官方地址：点我

 分享一个可以有免费的动图的地址：

https://lottiefiles.com/featuredhttps://lottiefiles.com/featured

 lottie的优点

• 动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；
• 支持跨平台，开发成本较低，一套Lottie动画可以在Android/IOS/Web多端使用。
• 使用lottie方案，json文件大小会比gif文件或png 序列文件小很多，性能也会更好。
• lottie动画 具有较丰富全面的控制方法和事件监听的支持

话不多说，开始上正菜！！！！！！

使用步骤：

1、安装 npm/cnpm/pnpm/yarn  都可以，装下面插件

vue3-lottie@latest

package.json

2、main.js中配置

import Vue3Lottie from 'vue3-lottie';

const app = createApp(App);
app.use(Vue3Lottie, { name: 'Vue3Lottie' });

3、页面使用两种方法

1）线上地址使用

https://assets9.lottiefiles.com/packages/lf20_suhe7qtm.json

<Vue3Lottie
      width="200px"
      height="200px"
      animation-link="https://assets9.lottiefiles.com/packages/lf20_suhe7qtm.json"
    />

2）本地json文件的使用

<Vue3Lottie
      width="200px"
      height="200px"
      :animation-data="JSONData"
    />


<script lang="ts" setup>
    import JSONData from '/@/assets/loading.json';
...

官方地址：点我

github地址

官方api: 点我看更多

Name	Type	Description	Default
animationData	Object	包含Lottie动画数据的JSON对象
animationLink	String	Lottie JSON对象的URL
width	Number or String	宽度	'100%'
height	Number or String	高度	'100%'
speed	Number	动画的速度。这必须是一个大于0的数字。可以使用介于0和1之间的值来减慢动画的速度，使用大于1的值来加快动画的速度。	1
direction	String	forward or reverse or alternate (正向或反向或交替)	forward
loop	Number or Boolean	动画循环。 Number > 0 or true or false	true
autoPlay	Boolean	动画自动播放	true
assetsPath	String	cdn地址的话用这个
renderer	String	更改动画渲染器的道具 svg or canvas or html	svg
rendererSettings	Object	Lottie渲染器设置	{}
... 更多就看官网把！！！