Github Article Archive: Link

In a Web page development, interactive animation needs to be realized (animation progress is controlled according to the scrolling height), and Airbnb’s open source Lottie scheme (Lottie-Web) is used in the connection.

Lottie relies on light weight, convenient docking and high degree of reduction, which can be used as a general dynamic effect scheme. The one-time docking information is recorded here for reference.

Online application 🌰

Bytedance applets open platform home cycle dynamic effect — SVG + Image

Address: Creating Future with Excellent Developers bytedance

Collaboration and docking ✏️

Design students dynamic development

In the cooperation with designers, I learned some Tips for smooth connection between design and front-end

Development: Motion designer development software (After Effects + BodyMovin plugin for exporting Lottie resources)

Product (art assets) Export:

  1. A.json file that describes the animation (more on that later)
  2. If the animation has an image resource, you need to export it together. The image name must be the same as the asset described in THE JSON so that Lottie can reference it directly
  3. There may also be an SVG resource or its description embedded in a JSON file

Key points of optimization:

  1. Choose PNG material, reduce JPEG mask image, tool image
  2. The exported seq_X_X image resources can be directly compressed and used again, ensuring that the name and path remain the same
  3. When possible, use vector materials (directly drawn materials in development software), and eventually you can use SVG for animation, reducing the actual image resource request behind the line

Front end classmate dynamic effect embedding

Lottie access:

  1. For details, refer to the official website documentation. Like using a common toolkit, Vanilla CDN Script is introduced and NPM is installed
  2. You can use free animations from Lottie Market as demos for placeholder development

Engineering – Package construction:

  1. If there is a resource path replacement (CDN, image hashing, etc.) during the packaging process, you need to replace the JSON file path in the jSON-referenced code and replace the image path in the JSON file
  2. In the ASSETS array, each asset has two fields u and P, representing the intermediate path, such as images/, and the actual image name, such as seq_0_0.png. These two will be directly concatenated into the path of the relative JSON file, plus the reference path of the JSON file itself for image access
  3. In general, CDN + hash name replacement is required for JSON when packaging, and the hash name replacement of image name in JSON, namely U field, can be achieved by gulP packaging process or Webpack plug-in

On Lottie 👾

After covering the basic concepts and usage, I’ll introduce and parse Lottie itself from a front-end development perspective.

There is no code for this part, and it may not be enough, but it’s good to know the basics.

What problem does Lottie solve

The animation plate, like the small program kaiping, occupies the main view of the first screen in the web page of the main station of the whole platform, which has high requirements for effect and performance. For such dynamic requirements, intuitively, two solutions may be obtained:

  • Multimedia resource implementation (cutmap/video /…) , or the resources are too large and affect the loading; Or it doesn’t work well;
  • Developing drawing (Canvas/SVG /…) , heavy development workload, limited technical capacity, and difficult to maintain, difficult to cope with changes;

The problem of these two schemes is that the communication cost of design and r&d is high and the flexibility of implementation is poor.

Faced with this problem, Lottie did:

  • “Painless” design. Lottie workflow supports art students to develop dynamic effects in their familiar environment, such as AE. With plug-ins, the animation can be exported to a. Json format that can be directly used for research and development, and the entire animation can be expressed in one file.
  • Seamless docking. Ready for resources and running environment, a JSON (visual animation material form may also have the corresponding picture resources, font, etc.) can move up on the page, animation effect, progress control can interfere with a high degree;
  • Not bad performance:
    • Support a variety of rendering modes (Lottie-Web supports HTML, Canvas and SVG. Generally, SVG is the best, can be vectorized to the maximum extent, and has the most features. If it is a picture resource, it will also be packaged into SVG Image and transformed);
    • The pros and cons of patterns are the same as those of ordinary visualization basics: Canvas will definitely be inferior in large picture size and number of elements, and drawbacks of SVG and HTML will also be reflected when they encounter a large number of elements. Each model has different ability focus and deviation;
    • Vector, atomic, art in the development process of vector quantization can material can be serialized, picture material based deformation and displacement, pulling away, minimize data, said a page of my personal development, the first screen of the pixel size (a smooth, clear animation, all add up Lottie resource volume a little more than 2 MB, It is convenient to use and control.

At present, Lottie has been a relatively mature dynamic effect scheme, and besides Web, it also has good performance in various Native development scenarios.

By the way, I have seen something similar before: Ant Financial shared a set of workflow Oasis in SEE Conf 2020, from 3D dynamic effect development, resource docking synchronization to front-end embedding. I haven’t had much experience in maturity and docking efficiency, so it’s not easy to evaluate. But the design and vision of the whole platform is really cool, and it’s kind of on the cutting edge of the field. (Share video address)

How did it work out

Asset management

In the first step of the Lottie workflow, after the art student designs the animation effects, the animation project can be exported to the Format under Lottie protocol through the plug-in, which is mainly a.json file representing the animation information and possible resource materials.

JSON describes the basic information of the entire animation, such as canvas size, frame rate, start and finish frames, resource information, layer information, etc. (even 3D support). In resources and layers, the material in the animation (dependent resources, animation elements) and the drawing (layer distribution, element representation) are represented by hierarchy.

Data to move

When Lottie loads an animated JSON, apart from the most basic parameter initialization, the most important thing is the Renderer selection. The previously mentioned HTML, Canvas, and SVG renderers have different renderers.

The Renderers first read the aforementioned basics of the entire animation, initializing the canvas, frame configuration, and preparing the resources. The real drawing begins after all the resources are loaded.

The flexibility and integrity of Lottie protocol lies in the fact that its content is “enumerable”, the element types in dynamic development, such as text, vector shapes, images, etc., are enumerable and definable. For different assets, the renderer calls different constructors to create them (for images, Canvas “draws image” and SVG inserts <image> elements).

On this basis, combined with animation to form, each frame what did each element (positioning, deformation, transparency, and implicit) can be accurately through data agreement, said or at low cost calculation (here said to calculate, because sometimes it takes “curation”, can’t be listed each frame description), thus, it is not hard to understand the rendering process.

Let the animation fly

Animation drawing is much the same, and the reader is recommended to explore the related links shared earlier: 📈 To learn the visual graphics library AntvF2 and byte applets adaptation – section 4.2 “animation” how to do.

When it comes to animating, you still need a requestAnimationFrame, which reads the frame information within each slice of calculated time, performs calculations based on the element motion information, and calls the corresponding renderer’s drawing method to draw or change the element as needed.

RequestAnimationFrame is fixed at about 16.66ms running at 60FPS, animations like 20/30fps need to be calculated as a percentage. That is:

The graphics calculation will still be run every 16.66ms or so, and each calculation will calculate how many frames have “advanced” by multiplying the frame rate by the time diff of the previous calculation and the time diff of the current one. (Of course, the frame number can also be a floating point number, such as 29.97 frames, which is common for video processing with AE.) Then interpolate according to the motion state of each element and the setting of the easing function. In layman’s terms, this means figuring out how much the moving element is currently moving, updating element attributes, and updating the drawing as needed.

Not much is known about the implementation of on-demand drawing. However, a general inference can be made: HTML and SVG are mostly based on CSS attributes (Opacity + Transform Matrix is also used in most cases), so if no updates are made, no drawing will be performed automatically. It relies on a very low-level rendering engine, and its performance and implementation are relatively guaranteed. Due to the overlapping redrawing problem of Canvas, sometimes it is better to directly redraw all of the calculation as needed, supplemented by the optimization method of drawing level.

Summary & Thoughts

To be clear, there are probably not too many difficulties and subtleties at first glance, but the implementation of the design is quite good, both technically and productively, as it is fully compatible with flexible systems, full multi-platform/multi-renderer compatibility, complete workflow, and a decent experience. We have to look at the code.

Thanks for reading.