The basic concept

The bitmap

A bitmap, also known as a lattice image or raster image, is made up of pixels. The dots are arranged and dyed differently to form the image. Examples: photos taken with a digital camera, pictures scanned by a scanner, screenshots, etc. Bitmaps can show color changes and subtle transitions of colors, producing realistic effects. The location and color value of each pixel need to be recorded when saving, occupying a large storage space. The quality of the image depends on the resolution.

The vector diagram

A Vector, also known as an object-oriented image or graphic image, is mathematically defined as a series of points connected by lines. Each object is a self-contained entity with properties such as color, shape, outline, size, screen position, and so on. The advantage of vector graph is infinite zoom in and out without deformation, but the disadvantage is that it is difficult to show the vivid image effect with rich color levels.

The way animation is done

PNG sequence frame

You can use CSS keyframes to display images for each frame. Each frame is a picture, so it occupies large memory space. The optimization method can combine pictures into Sprites Map, which can also use Tencent AlloyTeam’s GKA (Generate Keyframes Animation) Animation generation tool to Generate Animation.

Gif figure

Graphics Interchange Format (Gif) is a general purpose image file Format standard. It was developed by Compu Serve in 1987 to fill the gap of cross-platform image formats. Gif is also a kind of bitmap, enlarge the virtual.

The front-end Svg API

Vector Graphics SVG is based on XML, a new two-dimensional vector graphics format developed by W3C (World Wide Web ConSortium) in August 2000, and is also a Web vector graphics standard in the specification.

Lottie

The front-end directly references the Lottie-Web library, which by default renders SVG using JS to manipulate the SVG API. But the front end doesn’t need to care about the animation process at all, the Json file has information about each frame of the animation, and the library executes each frame for us.