Shulou(Shulou.com)06/01 Report--

This article focuses on "how to achieve animation through JSON in html5", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to achieve animation through JSON in html5"!

There are a lot of inline things in 1.demo.html, and it doesn't look good when you use it.

If you take a closer look, in fact, demo.html has put both js and json in it. At this time, we can separate js from json. For js, you can use the address provided on cdn.

The json data needed for animation is placed in the data.json file, but the data format in the given json file is like this.

So if you want to use script in a separate html to introduce the json file, it will report an error, so you need to modify the json file, add variables in front of it, and assign values.

In this way, you can introduce the json in the same way as the js file:

In this way, the available demo.html is reduced to this:

Body {background-color:black; margin: 0px; height:100%; overflow: hidden;} # lottie {background-color:#fff; width:100%; height:100%; display:block; overflow: hidden; transform: translate3d Text-align: center; opacity: 1;} var params = {container: document.getElementById ('lottie'), renderer:' svg', loop: true, autoplay: true, animationData: animationData}; var anim; anim = lottie.loadAnimation (params)

Of course, if you are using js modular programming, you can simply import in without changing data.json, as follows:

Import animationData from'. / data.json'

two。 Fit the animation to the mobile

The reason why I think this is a pit is that the animation given to me by the designer is full-screen and non-transparent, and then she asked me to position the animation with a width of 100% vertically in the middle. I tried it in the browser, under the screen of 360 to 640, the width is 100%, the form of expression is like this (it seems that the height of 100% of the width fits the middle side of the black background color. See the blue box in the image below)

Under the screen of iPhone X, on the contrary, it shows that the width is highly adapted to the center, with a black background color leaking from top to bottom, as shown in the blue frame below (the reason is that the iphonex screen is longer.

This layout is so familiar, which is consistent with the performance when img's object-fit attribute is set to contain (object-fit is also a treasure, interested students can study it, it is very easy to use)

I am here to solve the needs of designers mainly to add the following code:

Js section: setTimeout (function () {document.getElementsByTagName ('svg') [0] .style.height =' auto';}, 50); css section: (add flex layout to lottie) # lottie {width:100%; height:100%; transform: translate3d (0L0L0); 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;} so far, I believe you have a deeper understanding of "how to achieve animation through JSON in html5". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.