Steps to implement JSON animation using lottie in uniapp

1. Introduce related dependencies

npm install lottie-web
# If you have any questions, you can keep it consistent with me: npm install [email protected]

2. Create a new directory structure in the project directory

• The directory where resources are stored, used to store JSON animations:/static/svgJson/*
• Directory for storing animation components:/components/SvgAnimation/*

3. Operation steps

Download the JSON material we need on some material websites, or directly find the UI for you

For example, the iconfon we are familiar with

After downloading, we will get one.jsonWe put the file in the resource directory, for example:/static/svgJson/

Add a custom component to the storage animation component, such as:/components/SvgAnimation/

4. Write custom component code

The template code is as follows:

<template>
  <view class="container-start">
    <view ></view>
  </view>
</template>

<script module="renderScript" lang="renderjs">
import lottie from 'lottie-web'
import start from "../../static/svgJson/";
export default {
    mounted() {
        ()
    },
    methods: {
        ready() {
            ({
                container: ("start"),
                renderer: 'svg',
                loop: true,
                autoplay: true, 
                animationData: start 
            }); 
        }
    }
};
</script>

<style>
/* You can define the relevant styles yourself here. Here is just a demonstration, depending on the interface */
.container-start {
  width: 50%;
}
#start {
  width: 100%;
}
</style>

Note: Start in the code can be replaced with the JSON file you saved

For example: I downloaded a file, and I'm here/components/SvgAnimationAdd a new one in the directory

Then use the shortcut key ctrl+h, and then replace all the start words in the template withendJust go!

V. Use of components

Introduce components into the page and use them directly:

import More from "../../components/SvgAnimation/"

# Use in the interface:<More></More>

Take a mouthful

Because it is lazy and not used too much in the project, it is not encapsulated.

On the one hand, it has been usedrenderjs, encapsulation is not something that can be accomplished in a short time. It involves data interaction between the view layer and the logic layer of uniapp, and there is more of a chance to conduct in-depth research.

On the other hand, it is only a matter of just replacing a name with the template code.

It would be better if there were big guys who had encapsulated code!

More

lottie-common methods

(); // Play the animation and start playing from the currently stopped frame

(); // Stop playing the animation and return to frame 0

(); // Pause the animation, stop and hold in the current frame

(value, isFrame); // Jump to a certain moment/frame and stop. isFrame (default false) indicates whether the value indicates frame or time (milliseconds)

(value, isFrame); // Jump to a certain moment/frame and play

(30, true); // Jump to frame 30 and stop

(300); // Jump to 300 millisecond and play

(arr, forceFlag); // arr can contain two numbers or an array of two numbers. ForceFlag indicates whether to force the clip to be played immediately.

([10,20], false); // Play the previous clip and play 10-20 frames

([[0,5],[10,18]], true); // Play directly 0-5 frames and 10-18 frames

(speed); // Set the playback speed, speed of 1 indicates normal speed

(direction); // Set the playback direction, 1 means forward playback, -1 means reverse playback

(); // Delete the animation, remove the corresponding element label, etc. When unmount, the method needs to be called

Add a click event

<template>
  <view class="container">
    <view ></view>
  </view>
</template>

<script module="renderScript" lang="renderjs">
import lottie from 'lottie-web'
import home from "../../static/svgJson/";
export default {
    data(){
        return {
            animation: null
        }
    },
    mounted() {
        ()
        ()
    },
    methods: {
        ready() {
             = ({
                container: ("home"),
                renderer: 'svg',
                loop: false, // Whether to play it loop                autoplay: true, //Is it automatically played                animationData: home // Load the file name of json            }); // load            (55,true)
        },
        addClickEvent(){
            ("home").addEventListener("click",()=>{
                ([10,65],true)
            })
        }
    },
    beforeDestroy() {
        ("home").removeEventListener("click",()=>{})
    }
};
</script>

Add click events to the component in the interface:

<Home @="clickSvg"></Home>

Ending: Please discover more operations

Summarize

This is the end of this article about using lottie to implement JSON animation in uniapp. For more related content related to using lottie to implement JSON animation in uniapp, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!