It takes about 12 to 15 minutes to read. It gives a brief overview of Lottie animation and some optimizations. The main optimizations are for React H5

1. What is LOTTIE

Lottie is an open source Aribnb animation library for the Web, iOS, Android, React Native and Windows. It can render After Effects animations in real time and export Bodymovin as JSON. Allows applications to use animations as easily as static images, a highly collaborative software.

To put it simply, UI designers parse JSON animations with AE, and front-end engineers use JSON files to render SVG (Canvas/HTML) in lottie-Web and other frameworks

2. Watch some simple demos

  • Let’s take a look at some web side demos that use the BodyMovin library directly
    • codepen demo1 watching
    • codepen demo2 error!

3. Why choose LOTTIE animations, comparing the same types and choices

  • There are now several schemes for the same type of complex animation implementation

      1. PNG sequence frame:
      • Advantages: good compatibility, engineers controllable, strong operability
      • Disadvantages: it needs a lot of picture material support, animation playback takes up more memory
      1. Video:
      • Advantages: good compatibility, less adaptation work
      • Disadvantages: Weak interaction, high loading cost
      1. GIF:
      • Advantages: Simple implementation.
      • Disadvantages: Some mobile phone frame drop is very serious, the experience is not smooth, seriously affect the user experience

  • Lottie animation solves this problem: Lottie only needs to parse the exported JSON file and the required image to achieve the same animation effect on all platforms. It has a low implementation cost and only needs to dynamically replace the corresponding JSON file when it goes online to achieve configuration and operation

4. Simple principle analysis

Take a look at the basic rendering process of bodymovin animation

  • 1. registerAnimation
    • Register the animation and create oneAnimationItemThe container that puts our nodeselementandanimationDataInitialize the JSON data
  • 2,SetData, setParams
    • toanimationDataSet the base values to determine the data source and initialize the data, and parse the SVG/Canvas/HTML rendering
  • 3, configAnimation
    • Parameters to mount animation data
  • 4, loadAnimation
    • The load of animation
function loadAnimation(params){
    var animItem = new AnimationItem();
    setupAnimation(animItem, null);
    animItem.setParams(params);
    return animItem;
}
Copy the code
  • Lottie uses requestAnimationFrame—- to take full advantage of the refresh mechanism of the display and save system resources.

5. React project implementation

  • Design students design animation, AE export zip animation package, here we first use Lottiefiles, and then can use animation resources according to the situation, generally is directly using JSON files can be; Install ‘React – Lottie’
npm install react-lottie
Copy the code
  • Importing a JSON file
import Lottie from "lottie-react";
import groovyWalkAnimation from "./groovyWalk.json";

const Example = () = > {
  return <Lottie animationData={groovyWalkAnimation} />;
};

export default Example;
Copy the code

It’s easy to implement

6. Optimization strategy

  • 1. Monitor user sliding events and load the current animation according to the page
  • 2. Designer-side optimization (reduce the number of frames and animations)
  • React Virtual DOM [swiperjs.com/api/#virtua…] Reduce page rendering stress;
  • 4, visual range monitoring (visual range open animation inview display)[github.com/bitmap/reac…]
  • 5, according to the performance of the phone, elegant downgrade
    • (requestAnimationFrame) [zhangchen915.com/index.php/a…].
    • window.performance
    • Frame API
    • React Native allows you to get more phone information and blacklist individual low-end phones. Animations are completely banned

7, practice

  • 1 and 2 can be implemented in most scenarios. Only appeals 3, 4 and 5 are discussed here

7.3 virtual DOM

  • React virtual DOM features, implemented on swiper; The specific principle can be seen in this article Alloyteam brief analysis of virtual DOM

7.4. Use InView

  • Visual range monitoring is mainly used hereIntersection Observer API
    • The Intersection Observer API registers a callback function that is triggered whenever an element being monitored enters or exits another element (or a viewport), or when the size of the Intersection of two elements changes. This way, the main thread of our site no longer has to work hard to listen for element intersection, and the browser will optimize element intersection management itself.
    • Solved resource lazy loading – images are loaded only when they are visible
import { useInView } from 'react-intersection-observer';
import Lottie from 'react-lottie';
import LOTTIE_ANIM_JSON from './lottie.json';

const Anim = () = >{
  const { ref: $LOTTIE_ANIM_JSON_REF; View: $LOTTIE_ANIM_JSON_VIEW } = useInView();
  const $ANIM = (
    <Lottie
    options={{
      loop: true.autoplay: true.animationData: LOTTIE_ANIM_JSON,}}isPaused={! LOTTIE_ANIM_JSON_VIEW}
    />
    );

  return  <div className="lottie" ref={$LOTTIE_ANIM_JSON_REF}>
    {$ANIM}
  </div>
}
Copy the code

7.5. Several ways to measure Web FPS

  • 7.5.1 requestAnimateFrame

The Lottie animation-based feature takes full advantage of the requestAnimationframe feature

window.requestAnimationFrame(callback);
Copy the code

  • RequestAnimateFrame must be front-end students in doing some JS animation has been relatively familiar; Tell the browser that you want to animate and ask the browser to call the specified function to update the animation before the next redraw;

  • The specific implementation is as follows: measure the animation FPS of browser page rendering

// Handle compatibility issues
var rAF = function () {
    return (
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        }
    );
}();
 
var frame = 0;
var allFrameCount = 0;
var lastTime = Date.now();
var lastFameTime = Date.now();
 
var loop = function () {
    var now = Date.now();
    var fs = (now - lastFameTime);
    var fps = Math.round(1000 / fs);
 
    lastFameTime = now;
    // The difference between this value at the beginning and end of the animation is recorded to calculate the FPS
    allFrameCount++;
    frame++;
 
    if (now > 1000 + lastTime) {
        var fps = Math.round((frame * 1000) / (now - lastTime));
        console.log(`The ${new Date()}1S FPS: ', fps); 
        frame = 0;
        lastTime = now;
    };
 
    rAF(loop);
}

loop();
Copy the code

Let’s take a look at the loading speed of the Nuggets home page

  • It is important to note that this method is not consistent with the actual frame rate because it takes only one frame to execute javascript on the main thread, rather than one frame to execute javascript on the main thread plus the composite thread. But for the present, it is a desirable approach.

  • 7.5.2 Chrome Developer Tools

    • Console -> Perfmance -> Refresh the page to open monitoring performance, and you can see the performance indicator of Frames (the upper right corner has the frame rate control for FPS).

  • 7.5.3 Frame API
    • What is the Frame Timing API?

The Frame Timing API is a member of the Web Performance Timing API standard.

- Web Performance Timing API the Web Performance Timing API is a set of Performance API standards released by W3C. It helps developers accurately analyze and control website Performance to improve website Performance.Copy the code
var rendererEvents = window.performance.getEntriesByType("renderer");

// We can see the render time below
{
  sourceFrameNumber: 120.startTime: 1342.549374253
  cpuTime: 6.454313323
}
Copy the code

However, this API is still in the experimental stage, no major browsers support it, so it is only a temporary discussion and understanding, not formal development use;

reference

  • [1] Awesome List
  • [2] bodymovin
  • [3] Lottie animation principles
  • [4] Lottie animation
  • [5] Generation principle/performance analysis
  • [6] Virtual DOM principle
  • [7] Calculate web page performance

Put a little AD at the end of it

  • www.yuque.com/richlab/joi… (Here’s JD details)
Ant Financial, RichLab (Alipay spending and borrowing team) recruitment, P5-P8, graduates can, base: Chongqing, Hangzhou, Beijing; After all, I am Zhangjiahui from southwest China, and I give priority to Chongqing. People from Sichuan and Chongqing, or students who want to feel the style of Chongqing, are welcome to flirt. Green software: LpovexjnCopy the code