How to do animation architecture design

(This is not the end of the story...)

The role of animation in the front end is to enhance the user experience and capture the user’s attention. In different scenes, we need to choose different ways to present according to the characteristics of animation, and the most appropriate technology stack should be selected to deduce the most advanced animation.

Preliminary consideration

Compatibility, stability, volume, performance, user equipment (low-end machine testing).

Technology stack

CSS Animation, SVG, APNG, Lottie, Canvas, WebGL, CoCOS, WebP, TransparentVideo.

css Animation

Disadvantages of pure CSS animated portals: It’s hard to interactively control them as we want.

Usage:

Write @keyFrames + animation name to describe the animation

SVG animation

Advantages: Suitable for dynamic interaction. Features: (1) Vector graphics, scalable, good performance on different platforms or media, no jagged, no blur. (2) Its DOM structure can be controlled by its specific syntax or Javascript, so that animation can be easily realized.

Bitmaps and vector maps

Bitmap: A bitmap, as shown in the image on the left, consists of a grid of cells, each of which contains only one color, and many monochromatic cells (a cell here is a pixel).

Vectorgraph: a picture made of two dimensional coordinates connected by lines, as shown on the right, so no matter how big the area of the picture, it is not jagged, because it is equivalent to a picture connected by coordinates calculated by a mathematical formula.

APNG

Apng animation portal

Description: Animated PNG, born in 2004.

Features:

PNG support for transparent animation (also bitmaps by nature) is an extension of PNG. So on devices that do not support apng, apng static image can be degraded to display. Although GIF and APNG are both giFs, the picture quality of APNG is much better than that of GIF, which needs to be produced by designers (the picture below is the comparison between GIF and APNG). The front side of the use of the same way with other formats of pictures, can be directly inserted into the web page as a picture.

Advantages: small size.

Cons: Compatibility isn’t great at the moment, but there are now tools that support making Animated PNG images.

Lottie

Usage: after the designer finishes the animation on AE, export a JSON file to the front end through AE plug-in BodyMovin, and then the front end takes the JSON file to do rendering.

Advantages: soft moving effect, natural transition.

Disadvantages: The BodyMovin plugin needs to be improved, some effects cannot be exported.

Canvas

Advantages: good at pixel processing, dynamic rendering and large data volume rendering. Cons: Performance is low when the canvas is large, depending on pixels. Features: Focus on the feeling of painting animation, like drawing things freely on a white canvas with a pen.

Applicable scenarios: scratch-off, car dial, chart drawing (Baidu Echarts is an ICON library based on HTML Canvas), small games.

webGL

3D sci-fi fan based on HTML5 webGL

Introduction: 3D dynamic web rendering technology, the essence of JavaScript API.

How webGL works:

Advantages: 1. Good at data visualization; 2. Graphics rendering using the underlying graphics hardware acceleration function, so it can smoothly display 3D scenes and models; 3. Similar to Flash, the browser needs to download the plug-in, but webGL does not need to download the plug-in.

Disadvantages: it is difficult to get started, its language style is more like C++, front-end staff may have a certain learning cost.