With the continuous development of the Internet, H5 pages, as the expression layer of direct interaction with users, are becoming more and more complex, and the form of presentation is becoming more and more rich, which requires H5 pages to have more patterns and animation effects. What are the ways to achieve animation effects in the front end? There are roughly as follows:

GIF images

GIF directly affixed to the picture is good, the use is very simple, but GIF sometimes problems are no way to control, such as the common GIF flicker phenomenon.

Second, sequence frame

Sequence frame is actually the spread of a single frame of GIF, combined with CSS animation as a way of implementation.

The specific implementation is as follows:

The main use is animation steps function, compatibility is very good.

The difference in the resolution of the sequence frame in H5 development may cause slight jitter, which can be solved by nesting the DOM in SVG.

Third, the CSS animation

The animation property is used to specify one or more groups of animations separated by commas.

/* @keyframes duration | timing-function | delay | name */ animation: 3s linear 1s slidein; @keyframes slidein { from { transform: scaleX(0); } to { transform: scaleX(1); }}Copy the code

timing-function

The animation-timing-function property defines the pace at which the CSS animation executes during each animation cycle. Possible values are one or more.

For keyframe animation, timing function works on a keyframe cycle instead of the entire animation cycle, i.e. from the start of the keyframe to the end of the keyframe.

Time-function has the following types:

ease-in; / / to accelerate ease - out; / / deceleration ease - in-out; // Speed up and then slow down linear; / / uniform step - start; // Equivalent to steps(1,start) step-end; / / equal steps (1, end) cubic - the bezier (0.1, 0.7, 1.0, 0.1); // Steps (number, end); // Start with the number positionCopy the code

The steps function was used in the sequence above. It is actually an animation function that breaks the animation into n steps and executes it step by step.

Lottie animation

Lottie is an animation framework developed by Airbnb, which is supported on all platforms, including Windows, Android, iOS and Web.

On the Web side, it is essentially an animation realization based on SVG or Canvas and developed with JS. Due to the complexity of the path, it is generally required to coordinate with UI designers to output the corresponding animation path file (JSON or JS format) for rendering in daily development.

The specific call method is as follows, where data is the configuration file of the animation.

Parameter Description:

5. WebGL and Canvas

When the complexity of page animation is high, performance problems may occur when dom is used for drawing, and the picture may be stuck. In this case, WebGL or Canvas can be considered for rendering.

WebGL (Full Write Web Graphics Library) is a 3D Graphics standard that allows JavaScript to be combined with OpenGL ES 2.0.

By adding a JavaScript binding to OpenGL ES 2.0, WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas so that Web developers can use the system graphics card to render 3D scenes and models more smoothly in the browser and create complex navigation and data visualizations.

Of course 3D can only be rendered with WebGL, so let’s compare WebGL2D with Canvas 2D.

1. Performance comparison

As you can see from the results, WebGL outperforms the Canvas 2D Api by a factor of 10 when a large number of drawing tasks are required.

2. Compatibility

(1) webGL

(2) the canvas

In general, if the browser does not support WebGL, it needs to be demoted to Canvas.

How do I detect WebGL support?

Canvas. GetContext (” experimental – webgl “)

If undefined is returned, it is not supported, otherwise WebGL can be used

3. Call method

Draw a simple rectangle filled with red.

How to write using canvas API:

Written using webGL:

Game animation engine

When our animation function is more complex, it is more expensive to develop using webGL or Canvas API directly, so we can choose a game engine suitable for the current scene to develop.

Animation can be subdivided from dimension. 3D animation is usually implemented by a rendering engine such as three. js or other game engines, while 2D animation is also supported by excellent engines.

Here’s a side-by-side comparison of each game animation engine:

1, 2D, 3D, VR all support game engine

(1)Egret

Egret Engine is an enterprise-class game engine, maintained by a team. Egret has done a good job in support of workflow, from coding for Wing, resource integration for ResDepot and TextureMerger, to Inspector debugging, and finally native packaging (APP packaging support), Almost every part of the game development process is supported by tools.

Official website example, tutorial is also more. Egret engine support for WebAssembly is another major performance milestone.

(Photo credit: Egret Engine website)

(2)LayaAir

Support Canvas and WebGL mode adaptation. Support ActionScript3, TypeScript, JavaScript three development languages, suitable for 2D, 3D, VR product development. Performance comparable to the original APP, a development of HTML5, APP(Android and iOS), wechat games, QQ play a play released at the same time.

2D and 3D game engines

(1)Three.js

(Photo credit: three.js website)

Three. Js is officially not a game engine, but a JS 3D library. Three.js tends to display visual presentation, and some users directly use Three.js to develop H5 games.

(2)Pixi.js

In general, WebGL renders faster than Canvas, depending on their drawing paths. The biggest feature of Pixi is that it has full WebGL support, but does not require developers to have WebGL knowledge and seamlessly fall back to Canvas when needed.

Compared with many similar products, its rendering ability is relatively powerful. However, Pixi also has some shortcomings. Pixi’s animation support is relatively lacking. In practical development, it is often necessary to introduce additional animation libraries, such as GSAP.

(3)Phaser

Phaser encapsulates Pixi directly in rendering; On the architectural side, Phaser is built into three Physics engines (Arcade Physics, Ninja, p2.js) that provide particle systems, animations, pre-downloads, and device adaptation solutions. For compatibility, Phaser’s focus is on mobile browsers; On the API side, Phaser can implement rich game features and is suitable for complex game development.

(4)CreateJs

(Image credit: CreateJs website)

CreateJS officially provides TweenJS support for animation development, as well as audio and pre-download support via SoundJS and PreLoadJS, which is adequate for the basic features of H5 games. In terms of compatibility, CreateJS supports almost all browsers on both PC and mobile. CreateJS also supports developing and exporting H5 games rendered by CreateJS in Flash CC.

(5)Hilo

Hilo is an open source project launched by Alibaba team, including Hilo.js (2D) and Hilo3D to support modular development, while providing packaged versions of various modular paradigms and cross-terminal solutions, Hilo.js is suitable for developing marketing mini-games. Its volume is also relatively light, only about 70KB.

Main features:

  • Various rendering methods, providing DOM, Canvas, Flash, WebGL and other rendering schemes.
  • Minimal kernel: The Hilo core module is extremely lean and retains the most essential modules for a 2D game engine, while adopting modular management.
  • Physics engine support — Chipmunk supports self-expanding physics implementations; Bone animation support – DragonBones.
  • Abundant cases: supported Tmall and mobile shopping for many large-scale and daily activities, such as Singles’ Day, mid-year Promotion, etc. Represent products such as carnival city.

Case study:

(Photo by Hilo Github)

  • 1111 dance mv
  • Flappy Bird
  • 2048
  • Fruit Ninja

Official Examples:

(Photo by Hilo Github)

Hilo. Js game engine basically meets the needs of daily 2D animation development. Good compatibility, support 4 rendering methods, generally choose canvas, after practice, android4.4 rendering no problem, operation slight lag. The component library is very lightweight, hilo-standalone.min.js is only 70K, compared to Phaser(946K), hilo is extremely friendly in terms of code volume.

7. References

  1. The high cold webGL
  2. H5 Game Development: Introduction to game Engines

Author: Luo Ran