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

前言:

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

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

原理图:

vue3+lottie的使用神器:vue3-lottie (electron也适用)_第1张图片

lottie官方地址:点我

vue3+lottie的使用神器:vue3-lottie (electron也适用)_第2张图片

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

https://lottiefiles.com/featuredicon-default.png?t=N6B9https://lottiefiles.com/featured

vue3+lottie的使用神器:vue3-lottie (electron也适用)_第3张图片

 lottie的优点

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

话不多说,开始上正菜!!!!!!

使用步骤:

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

vue3-lottie@latest
package.json

vue3+lottie的使用神器:vue3-lottie (electron也适用)_第4张图片

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

2)本地json文件的使用





                    
                    

你可能感兴趣的:(vue3.0,electron,electron,前端,vue3)