One day our UI designer came to me and said that I should replace the animations I wrote in the program with the json animations they gave me. The reason is that some animations are very complicated and cannot achieve their expected effects if I write them myself ( When I wrote this, I suddenly thought of a question, why don't you use gif for such a complicated animation? The Android developer sitting opposite me answered that the quality of gif may not be high when played, okay, I believe it)
I:? ? ? ? The client can add json animation. I have never heard of H5 pages being able to read json animation.
The designer looked sure and said yes, there is a web version.
As I write this, I really want to praise our designer girls. Almost many good solutions were found under their pressure (oh, they can also write H5 pages... they want me to What's the use series
So here comes the question, how to use json animation in H5 page?
How to use json animation within H5 pageAt this time, the designer sent me a link, look here lottie-web; I clicked on it to learn more about it. It is an open source animation library of Airbnb. This library can complete many cool animations and is very simple to use. The designer only needs to Need to export JSON file through animation made by AE software, and then the front-end uses Lottie to directly load the JSON file to generate animation. It does not require the designer to cut many gifs, nor does it require the front-end to perform complex drawing. It kills two birds with one stone, and Lottie is available on all platforms, including ios, Android, web, and React. Native can be used, and it takes up less memory and loads smoothly. (Why am I only discovering such a magical thing now?
Having said so much, how to use it in H5 pages?
It's very simple. The folder generated by the designer is sent to you (the designer only needs to add a lottie plug-in in AE and export it). After opening it, it should look like this. Open demo.html and you will know how it works. Used it (so I am still writing technical articles here)
All joking aside, I actually encountered a lot of pitfalls during use. Here are a few things to pay attention to when using them.
1. There are a lot of inline things in demo.html, which are unsightly when used.Take a closer look. In fact, demo.html puts both js and json in it. At this time, we can separate js and json separately. For js, we can use the address provided on the cdn.
<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script>
The json data required for animation is placed in the data.json file, but the data format in the given json file is as follows (it is too long and cannot be cut off)
If you want to use script to introduce a json file in a separate HTML, an error will be reported, so you need to modify the json file, add variables in front, and assign values. As shown below:
In this way, you can import the json in the same way as the js file.
<script type=text/javascript src=./data.json></script>
In this way, the available demo.html is reduced to the following
<html xmlns=http://www.w3.org/1999/xhtml><meta charset=UTF-8><head> <style> body{ background-color:black; margin: 0px; height: 100%; overflow : hidden; } #lottie{ background-color:#fff; width:100%; height:100%; display:block; overflow: hidden; transform: translate3d(0,0,0); text-align: center; opacity: 1; } </style></head><body><div id=lottie></div><script type=text/javascript src= https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script><script type=text/javascript src=./data.json></script><script> var params = { container: document.getElementById('lottie'), renderer: 'svg', loop: true, autoplay: true, animationData: animationData }; var anim; anim = lottie.loadAnimation(params);</script></body></html>Of course, if you are using js modular programming, you can just import it directly without changing data.json, as follows:
import animationData from './data.json'2. Adapt animations to mobile devices
The reason why I think this is a pitfall is because the animation the designer gave me was full-screen and non-transparent, and then she asked me to position the animation with a width of 100% and a vertically centered interception. I tried it in the browser. , under the 360*640 screen, the width is 100%, the expression is as follows (it looks like the height is 100%, the width is adapted to the center, and the black background color leaks out on both sides, see the blue framed part in the picture below)
Switching to the screen of iPhone
This layout is so familiar. It behaves the same as when the object-fit attribute of img is set to contain (object-fit is also a treasure. Interested students can study it, it is very easy to use)
To solve the designer's needs here, I mainly add the following code:
js part: setTimeout(function() { document.getElementsByTagName('svg')[0].style.height = 'auto';}, 50); css part: (add flex layout to lottie) #lottie { width:100 %; height:100%; transform: translate3d(0,0,0); text-align: center; opacity: 1; position: absolute; top: 0; left: 0; z-index: 3; display: flex; flex-direction: row; justify-content: center; align-items: center;}Final effect:
SummarizeThe above picture screenshots are all static, but they actually have a dynamic effect. I don’t know how to add animations so I didn’t do it. If you are interested, you can give it a try.
Scope of application: I feel that generally full-screen or partially complex animations can use this method. It is smoother than GIF and has good compatibility. Some Android products use this method to open the screen in a cool way. H5 pages If so, simple animations can generally be implemented by your own program, and you can avoid pitfalls.
Reference links:
lottie official website
lottie-web github address
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.