前言:
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';
...
官方地址:点我
官方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渲染器设置 | {} |
... 更多就看官网把!!! |