Demand analysis

Recently, the company needs to embed the H5 activity page in the Understand table App, which has an animation of opening the treasure box (as shown below) :

General encounter animation first reaction is to use GIF dynamic diagram, by UI little sister directly do GIF on the page can be. However, in this requirement, the animation runs on a semi-transparent pop-up layer, while GIF does not support alpha channel, and the requirements of this page require subsequent logical operations after the animation ends. GIF cannot effectively listen for animation completion events.

So it’s Lottie’s turn!

Lottie profile

Lottie is a mobile library for the Web, Android, iOS, React Native and Windows. It can use Bodymovin to parse exported Adobe After Effects animations in JSON format and render them locally on the device! (As shown below)

Lottie’s official website

Get started

Install the Bodymovin after Effects plugin

First, go to the Github repository to see the documentation and download the Bodymovin plug-in according to the documentation. This is a chance to touch the UI sister, touch her mouse, install her AE plugin, and show her how to export json files after animation. After exporting the animation, we get:

  • data.json
  • Put these two files in the images folder (or if the animation is created using layers) into the project.

Lottie instructions

Since we are doing H5 web pages, we use Lottie-Web. Basic usage:

const animation = lottie.loadAnimation({
     container: document.getElementById('box'),
     renderer: 'svg'.// Render: SVG, canvas
     loop: true.// Loop. Default: false
     autoplay: true.// Auto-play, default true
     path: ' '  / / json path
})
Copy the code

Common methods:

animation.play(); // Play from the current frame

animation.stop(); // Stop and return to frame 0

animation.pause(); // Pause and hold the current frame

animation.goToAndStop(value, isFrame); // Jump to a certain time/frame and stop isFrame(default false)

animation.goToAndPlay(value, isFrame); // Jump to a certain point/frame and play

animation.goToAndStop(30.true); // Jump to frame 30 and stop

animation.goToAndPlay(300); // Jump to 300ms and play

animation.playSegments(arr, forceFlag); // ArR can contain two numbers or an array of two numbers. ForceFlag indicates whether the segment is forced to play immediately

animation.playSegments([10.20].false); // After playing the previous clip, play 10-20 frames

animation.playSegments([[0.5], [10.18]], true); // Play frames 0-5 and 10-18 directly

animation.setSpeed(speed); // Set the playback speed. Speed 1 indicates the normal speed

animation.setDirection(direction); // Set the playback direction. 1 indicates forward play and -1 indicates reverse play

animation.destroy(); // Delete the animation, remove the corresponding element tag, etc. When unmount, you need to call this method
Copy the code

Common listening events:

animation.addEventListener('data_ready', () = > {console.log('animation data has loaded'); });

//data_ready: animation data is loaded
// config_READY: after the initial configuration is complete
// datA_failed: When part of the animation cannot be loaded
// loadeD_images: when all images load successfully or incorrectly
//DOMLoaded: when an element is added to the DOM
// config_READY: after the initial configuration is complete
//complete: Animation execution is complete
//loopComplete: The animation loop completes
//destroy: Animation is destroyed
//enterFrame
//segmentStart
Copy the code

Use the exported animation file

Project H5 was developed using VUE. First, do a test page to see the effect of Lottie. Lottie – web installation

npm install lottie-web
Copy the code

Use in pages

<template>
    <div class="share-ai" :class="{bg:hasBg}">
        <div ref="lottie" class="lottie" ></div>
        <button @click="play">play</button>
        <button @click="pause">suspended</button>
        <button @click="stop">stop</button>
        <button @click="hasBg=! hasBg">Testing transparent animation</button>
        <button @click="ChangeSpeed (1.5)">1.5 times the speed</button>
        <button @click="changeSpeed(2)">2 times the speed</button>
        <button @click="ChangeSpeed (0.5)">0.5 times the speed</button>
        <button @click="goToAndStop()">Go straight to the last frame</button>
    </div>
</template>
Copy the code
import lottie from 'lottie-web';
export default {

    data () {
        return {
            hasBg:false,
        }
    },
    mounted(){
        this.aiRobot=lottie.loadAnimation({
            container: this.$refs.lottie, // the dom element that will contain the animation
            renderer: 'svg'.loop: false.autoplay: false.path: '/lottie/chest/coin-500.json' // the path to the animation json
        });
    },
    methods: {
        play(){
            this.aiRobot.stop()
            this.aiRobot.play()
        },
        stop(){
            this.aiRobot.stop()
        },
        pause(){
            this.aiRobot.pause()
        },
        changeSpeed(value){
            this.aiRobot.setSpeed(value)
            this.aiRobot.stop()
            this.aiRobot.play()
        },
        goToAndStop(){
            this.aiRobot.goToAndStop(3920)}}}Copy the code

The running effect is as follows:

GIF, you can freely control the start and end of the pause, you can play back and forth animation, you can listen to play events (such as in the demand, after the completion of the animation, the need for subsequent logical operations and UI display), and the background is transparent, can adapt to any interface UI. This method generates a much smaller animation resource than GIF:

  • gif:684k
  • lottie:186k

Now that the animation scheme has been decided and the test page proved to be fine, all that is left is the tedious UI layout, which I won’t go into here and go straight to the finished image:

Finally, please allow me to water a wave of advertising here: local rich programmers with watches to play watches, you can download [understand table di] APP to play, wool party can also play, there are a lot of points to exchange physical rewards, there are watches oh!