Attach the official documentation portal first: Lottie – web | official document making

What scenes use Lottie animation

The actual application scenarios are as follows:

1.1 UI designer gives you a data.json file and animation demo directly

The following is an example of a data.json file:

In this case, you can render the target animation by placing the JSON file directly into Lottie’s Path configuration item. High efficiency, good effect.

1.2 The animation contains information strongly related to business that may need dynamic and real-time modification

Animations contain specific business data for the current page, which is rendered by Lottie and then updated in real time with Lottie animations. Specific reference: zhihu | dynamic changes in the text of Lottie example.

1.3 Complex scenes for animation

For some cases where animation effects are difficult to achieve with pure CSS3 and giFs are too large, you can ask the designer to provide data.json files. Then asynchronously render processing on the Client side, does not affect the loading of the main page, experience the best effect.

How to use Lottie to realize animation

Lottie load timing

As can be seen from the figure above, Lottie library is relatively large and belongs to the heavy 3TH library. Therefore, in Web projects, especially H5 projects, it is recommended to use the library on the Client side + lazy loading + shard loading.

See the end for the specific code, and the core code snippet is as follows:

const loadLottie = async() = > {if(process.env.BROWSER && ! lottie && ! lock) { lock =true;
        try {
            // Lottie - Web is bulky and loaded separately by subcontracting
            lottie = await import(
            /* webpackChunkName: "lottie_web" */
                'lottie-web/build/player/lottie_light.min.js'
            );
            setLoaded(true);
        } catch (err) {
            lock = false; sendError(err); }}};Copy the code

SSR pocket bottom animation UI

Note: Before the Lottie animation is loaded, it is a good idea for the page to have CSS style pockets in place. The user experience will be better. For example:

For example, for the animation effect above, if there is no extra processing in the SSR stage, the page will be blank, and it will not be displayed as scheduled until the Lottie animation loading is completed in the Client stage, which is a bad experience. Improved: In SSR, CSS renders a green, round DOM node, which perfectly coincides with the center circle in the target Lottie animation. In this way, SSR straight out of the page, not a large blank. The specific effect is shown below:

As you can see, when SSR comes out of the page, it displays a “start detection” circular DOM node (with no surrounding effect at this point). When entering the Client rendering, the copy is updated to “getting” (there is still no surrounding effect). After the Lottie-Web library is loaded and the SVG animation is rendered, the animation effect is superimposed (the surround effect is displayed). The overall experience is smooth, user interaction is good, and the Lottie-Web library does not affect page performance. As expected. The useLottie Hooks package contains a useLottie. TSX hooks component for quick use by business users. The full code is as follows:

import React, { useRef, useEffect, useState } from 'react';

let lottie = null;
let lock = false;

interface IConfig {
    /* To style the animation container */className? : string;/* Configuration parameter of the loadAnimation() method */
    [key: string]: any;
}

/** * Lottie animation hooks@param AnimPath Path of animation data data.json *@param Config Additional configuration */
function useLottie(animPath: string, config: IConfig) {
    const lottieRef = useRef(null);
    const [loaded, setLoaded] = useState(false);
    // Render a DOM instance of an SVG animation
    const [animInstance, setAnimInstance] = useState(null);

    const{ className, ... animParams } = config || {};const loadLottie = async() = > {if(process.env.BROWSER && ! lottie && ! lock) { lock =true;
            try {
                // Lottie - Web is bulky and loaded separately by subcontracting
                lottie = await import(
                /* webpackChunkName: "lottie_web" */
                    'lottie-web/build/player/lottie_light.min.js'
                );
                setLoaded(true);
            } catch (err) {
                lock = false;
                console.error(err); }}}; loadLottie(); useEffect(() = > {
        // Loaded indicates Lottie - When the web library is loaded, Lottie indicates that the instance is already loaded
        if (loaded || lottie) {
            const inst = lottie.loadAnimation({
                wrapper: lottieRef.current,
                animType: 'svg'.// Animation loops by default
                loop: true.// Animate json data
                path: animPath, ... animParams, }); setAnimInstance(inst); } }, [loaded]);/** * animated DOM rendering function */
    const renderAnimWrap = () = > <div ref={lottieRef} className={className} />;

    return [
        renderAnimWrap,
        animInstance,
    ];
}

export default useLottie;
Copy the code

How do I update Lottie animations

background

As shown above, the circled part is actually an animated background. In each of the four scenes above, the animation is the same. The only difference is the background color. The UI designer was given a data.json file, and if you only use the data.json file to render the animation, it will not be able to meet the requirements of the four background colors. Therefore, you need to dynamically update the background color of the Lottie animation. So, the question is: how do you dynamically change the text and color in Lottie? Two kinds of schemes Specific reference: zhihu | modified dynamically Lottie in the text

Two methods:

1. Introduce lottie-API library

Reference: www.jianshu.com/p/6da067816…

2. DOM animation generated after native operation

The idea is to lock the target DOM element directly and then change its fill value to update the background color.