The artifact of vue3+lottie: vue3-lottie (electron is also applicable)

Foreword:

        Lottie is a library for Android, iOS, Web and Windows that parses Adobe After Effects animations exported as json using Bodymovin and renders them natively on mobile and web!

In other words, it is to provide a json file, and we render it to the interface, which is an animation. Let us share here how to use it in our vue3.

Schematic:

lottie official address: click me

 Share an address where you can have free animations:

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

 Advantages of lottie

• The animation is realized by designing and using Adobe After Effects, a professional animation production tool, which makes the animation more convenient and the animation effect is better;
• Support cross-platform, low development cost, a set of Lottie animation can be used on Android/IOS/Web multiple terminals.
• Using the lottie scheme, the json file size will be much smaller than the gif file or png sequence file, and the performance will be better.
• Lottie animation has rich and comprehensive control methods and event monitoring support

Without further ado, let's start the main course! ! ! ! ! !

Steps for usage:

1. You can install npm/cnpm/pnpm/yarn, and install the following plug-ins

vue3-lottie@latest

package.json

2. Configuration in main.js

import Vue3Lottie from 'vue3-lottie';

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

3. The page uses two methods

1) Online address usage

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

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

2) Use of local json files

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


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

Official address: click me

github address

Official api: click me to see more

Name	Type	Description	Default
animationData	Object	JSON object containing Lottie animation data
animationLink	String	The URL of the Lottie JSON object
width	Number or String	width	'100%'
height	Number or String	high	'100%'
speed	Number	The speed of the animation. This must be a number greater than 0. You can use values ​​between 0 and 1 to slow down the animation, and values ​​greater than 1 to speed it up.	1
direction	String	forward or reverse or alternate (正向或反向或交替)	forward
loop	Number or Boolean	动画循环。 Number > 0 or true or false	true
autoPlay	Boolean	Animation autoplay	true
assetsPath	String	For the cdn address, use this
renderer	String	更改动画渲染器的道具 svg or canvas or html	svg
rendererSettings	Object	Lottie renderer settings	{}
... Read more on the official website! ! !