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!