A, reason

  • Front-end animation scene demand
  • The choice of technical implementation scheme for many animation scenes is vague
    • The merits and demerits of each animation scheme and the understanding of applicable scenes are vague
  • Existing animation library too many, do not know which to choose
    • Mainstream animation library has a vague understanding of applicable scenes

Second, the classification of

Animation purposes

  1. Display animation, like a GIF or a video
  2. Interactive animation: user participation

Rendering technology

  1. Canvas
  2. div
  3. SVG

PS: Video can also be used for simplicity, but unless the playing scene of animation is fixed, the playing display of mobile video is not quite the same in different apps, different models and different systems, which is easy to step on a lot of holes.

Animation types

  1. Tween animation
  2. Sequence frame animation
  3. Skeletal animation
  4. SVG animation
  5. 3 d animation

The dimension

  1. 2D
  2. 3D

Three, the difference of drawing technology

No matter what method is used to make animation, there are no more than three forms to render to the front page: Canvas, DIV, SVG.

The characteristics of comparison

  • canvas
    • High efficiency, good performance, high controllability, can only handle bitmaps, constant memory footprint
    • Resolution dependent
    • Event handlers are not supported
    • Weak text rendering capability
    • Ability to save the resulting image in.png or.jpg format
    • Best suited for graphics-intensive games, where many objects are frequently redrawn
  • SVG
    • Vector processing, no distortion
    • Resolution independent
    • Support event handlers
    • Best for applications with large rendered areas (such as Google Maps)
    • High complexity slows down rendering (any application that overuses DOM is not fast)
    • Not suitable for game applications
  • div
    • Including CSS control of DOM animation, JS control of DOM animation
    • More suitable for a simple number of less complex animation

Performance difference

  • In general: JS+Canvas > CSS + DOM > JS+ DOM

Sample code (intuitive)

  • Canvas and SVG comparison:
    • In general, as the screen size increases, the canvas will start to degrade because more pixels need to be drawn.
    • As the number of objects on the screen increases, SVG will start to degrade as we continue to add these objects to the DOM.
    • These metrics are not necessarily accurate, and differences in implementation and platform, whether fully hardware-accelerated graphics are used, and the speed of the JavaScript engine are bound to cause variation.

Four, animation implementation

Front-end dynamic effect development, the first thing to determine is the purpose of animation -> confirm the type of animation -> confirm the drawing technology -> confirm the realization of animation.

Although the final presentation of animation carrier (drawing technology) is three, but there are many ways to achieve animation, we have to start from the type of animation to discuss the implementation of animation:

  • Tween. Tween animation, involving some easing functions (e.g.Commonly used easing functions)
    1. CSS implementation (Transition, animation, etc.)
    2. Js implementation
  • Sequence frame animation
    1. CSS implementation (Animation)
    2. JS + DOM implementation
    3. JS + canvas
  • Skeletal animation
    1. Use tools such as Spine and DragonBones to export resource images and JSON animations to configure resources.
  • SVG animation
    1. Define graphics using XML format
    2. SVG images can be generated using AI and other SVG editing tools, and then animated with existing libraries such as animo.js
  • 3 d animation
    1. DOM manipulation is implemented with CSS 3D. (perspectiveProperties, etc.)
    2. WebGL (three.js, etc.) for scene building
    3. Export 3D model animations in Blender or Maya

The implementation strategies for the animation types listed above, from a development perspective, can be:

  1. Their implementation
  2. Select existing wheels:
    • The animation library
    • Game engine, rendering engine

Their implementation

In order to reduce external dependencies, simple and uncomplicated animations are generally implemented themselves. You can refer to the following implementation mode selection ideas:

The animation library

Here, we have collected the animation library on the Internet as far as possible, and briefly introduced its information. Because of the length problem, we have another article: it may be the most complete summary of front-end animation library

Game engine/rendering engine

Animation is divided into dimensions. 3D animation is generally implemented by a rendering engine such as three. js or a game engine. 2D animations also use engines in certain scenes.

  • Common Game Engines
    1. Cocos
    2. Egret
    3. LayaAir
    4. Phaser
  • Common Rendering engines
    1. Pixi.js(2D animation rendering engine)
    2. Three.js(3D rendering engine)
    3. Babylon. Js (3D rendering engine)

What game frames are available here: Game/Render frame navigation

5. Mainstream animation solutions

  • Tween animation

    • Relatively simple, generally their own implementation.
    • Tween.js (provides some common easing functions)
    • Animate. CSS (a cross-browser animation base library that provides many basic animation solutions.)

  • Sequence frame animation

    • Self implementation (CSS, JS+ CANvs, JS+DOM)
    • SVGA
    • Lottie (Exported by Bodymovin after AE animation)
    • Apng with control library (e.g. Apng-js)

  • Skeletal animation

    • Spine
    • DragonBones

  • SVG animation

    • snap.svg
    • GSAP
    • anime.js

  • 3 d animation

    • DOM manipulation with CSS 3D implementation
    • Three.js

  • Common animation library (applicable, powerful)

    • Animate.css
    • GSAP
    • anime.js
    • snap.svg

  • Common rendering engines:

    • Pixi.js

6. Animation scheme of mainstream products

  • Netease Dada Studio H5: Sequence frame animation -> Cavans implementation
  • Various “one Shot to the end” class H5: Sequence frame animation -> Canvas implementation

Reference documentation

  1. W3school–HTML 5 Canvas vs. SVG
  2. Research and comparison of front-end animation technology
  3. Alibaba front End expert Jin Bro (Nagisa Kaoru) – Progressive animation solutions
  4. Canvas and SVG performance selection