Frame by frame animation comparison

This is the third day of my participation in Gwen Challenge

Frame-by-frame animation is a common form of animation (Frame By Frame). Its principle is to decompose animation actions in “continuous key frames”, that is, to draw different content on each Frame of the time axis Frame By Frame, so that it can be continuously played into animation. The advantages and disadvantages of GIF and Sprite are analyzed below.

A, GIF

GIF is a graphics interchange format. Its general principle is that an image is composed of many pixels, each pixel is assigned a color, and these pixels together form an image and support text control, multi-image overlay and multi-frame image animation.

Advantages:

• GIF is supported by almost all major browsers
• The implementation cost is relatively low, and many tools can achieve it
• Supports animation, allows certain pixels to be transparent, small in size, and can be better spread over the network

Inadequate:

• Do not support translucent, support less color, up to 256 color storage, do not support 24bit color mode, the image is more complex will have serrated edge
• Interactive operations such as play control, pause control, and pause control are not supported
• Continuously playing GIFs will cause periodic page drawing, and the CPU and GPU need to work continuously, resulting in performance loss

Implementation method:

• GIF provided by designer
• Turn video GIT

Example:

Simple interaction with GIF:

If you need to be able to pause and play, you can use other plug-ins to support it. For example, the plugin Gifffer is used to pause and play. The specific principle is to convert GIF into Canvas to achieve some interactive operations, as shown in the sample Demo

Sprite

CSS Sprite, also known as CSS Sprite, is a CSS image combination technology, the method is to merge multiple images into one image, using CSS or JS to control the positioning of the image to achieve frame by frame animation.

Advantages:

• It can reduce the request times of loading pictures to the server and reduce the server pressure
• Improves page loading speed

Inadequate:

• Maintenance cost is high, the later picture changes frequently
• The development cost is high, the puzzle and the realization of animation calculation, the coordinate adjustment of picture position is more troublesome

Implementation method:

CSS3

Use CSS3 steps attribute to switch Sprite image sequence frame to form animation effect, refer to Demo for example

JS

JS switch Sprite image sequence frame form animation effect, examples refer to Demo

GIF and Sprite comparison