With the continuous development of the Internet, H5 pages, as the presentation layer for direct interaction with users, have become more and more complex, and the presentation forms have become more and more abundant, which also requires H5 pages to have more patterns and animation effects. What are the ways to achieve animation effects on the front end? There are roughly the following:
1. GIF picture
Just paste the picture directly on the GIF picture, it is very simple to use, but sometimes there are problems with the GIF picture and there is no way to control it, such as the flickering phenomenon of the common GIF picture.
Two, sequence frame
Sequence frame is actually the unfolding of a single frame of GIF, combined with CSS animation.
The specific implementation is as follows:
The main use is the steps function of animation, and the compatibility is still very good.
In the development of H5, the resolution of the sequence frame of the mobile phone is different, and there may be slight jitter, which can be solved by nesting the dom into the SVG.
Three, css animation
The animation property is used to specify one or more groups of animations, each group is separated by a comma.
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
@keyframes slidein {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}timing-function
The animation-timing-function property defines the rhythm of the CSS animation performed in each animation cycle. Possible values are one or more <timing-function>.
For key frame animation, the timing function acts on a key frame cycle rather than the entire animation cycle, that is, from the beginning of the key frame to the end of the key frame.
There are several time-functions:
ease-in; //加速
ease-out;//减速
ease-in-out;//先加速后减速
linear;//匀速
step-start;//等同于steps(1,start)
step-end;//等同于steps(1, end)
cubic-bezier(0.1, 0.7, 1.0, 0.1);//贝塞尔曲线
steps(number, end);//从number位置开始，逐步执行Among them, the steps function we used in the above sequence frame animation, it is actually an animation function that is divided into n steps and executed step by step.
Fourth, Lottie animation
Lottie is an animation framework developed by Airbnb, which is supported on all platforms, Window, Android, iOS, Web, etc.
On the Web side, its essence is based on SVG or Canvas, using JS for animation implementation. Due to the complexity of the path, in daily development, it is generally necessary to cooperate with the UI designer to output the corresponding animation path file (json or js format) for rendering.
The specific calling method is as follows, where data is the configuration file of the animation.
Parameter Description:
Five, WebGL and Canvas
When the page animation complexity is high, using dom to draw may cause performance problems and the screen will freeze. At this time, you can consider WebGL or Canvas for rendering.
WebGL (Web Graphics Library in full) is a 3D graphics standard that allows JavaScript and OpenGL ES 2.0 to be combined.
By adding a JavaScript binding of 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 display 3D scenes and models in the browser more smoothly, and create complex Navigation and data visualization.
Of course, 3D can only be rendered with WebGL. Here we compare the situation of WebGL2D and Canvas 2D.
1. Performance comparison
It can be seen from the results that when a large number of drawing tasks need to be performed, the performance of WebGL far surpasses Canvas 2D Api, reaching 10 times that of the latter.
2. Compatibility
（1） webGL
（2） canvas
Generally, if the browser does not support WebGL, you need to downgrade to Canvas to handle it.
How to check whether WebGL supports?
canvas.getContext(“experimental-webgl”)
If the return result is undefined, it means it is not supported, otherwise you can use WebGL
3. Calling method
Draw a simple rectangle with red fill color.
How to write using canvas API:
The way of writing using webGL:
Six, game animation engine
When our animation function is more complicated, it is more expensive to develop directly using webGL or canvas API, so you can choose a game engine suitable for the current scene for development.
Animation can be subdivided in dimensions. 3D animation is generally implemented by a rendering engine such as Three.js or other game engines. 2D animation also has excellent engine support.
The following is a horizontal comparison of each game animation engine:
1. A game engine that supports 2D, 3D and VR
（1）Egret
Egret Engine is an enterprise-level game engine, maintained by a team. Egret has done a good job in supporting workflow, from writing Wing code, to resource integration of ResDepot and TextureMerger, to Inspector debugging, and finally to native packaging (app packaging is supported), everything in the game development process The links are basically supported by tools.
There are many examples and tutorials on the official website. The Egret engine supports WebAssembly, which is another milestone for performance improvement.
(Image source: Bailu Engine official website )
（2）LayaAir
Support Canvas and WebGL mode adaptation. Supports three development languages: ActionScript3, TypeScript, and JavaScript, suitable for 2D, 3D, and VR product development.
The performance is comparable to that of native APPs. HTML5, APP (Android and iOS), WeChat games, and QQ games are developed at one time and released simultaneously.
2. 2D, 3D game engine
（1）Three.js
(Image source: Three.js official website )
The official positioning of Three.js is not a game engine, but a JS 3D library. Three.js is more inclined to display visual presentation, and some users directly use Three.js to develop H5 games.
（2）Pixi.js
Generally speaking, the rendering speed of WebGL will be faster than that of Canvas, which is determined by the drawing path of the two. The biggest feature of Pixi is that Pixi has complete WebGL support, but does not require developers to master WebGL related knowledge, and seamlessly fall back to Canvas when needed.
Compared with many similar products, its rendering capabilities are relatively powerful. However, Pixi also has shortcomings. Pixi lacks animation support. In actual development, it is often necessary to introduce additional animation libraries, such as GSAP.
（3）Phaser
Phaser directly encapsulates Pixi in terms of rendering; in terms of architecture, Phaser embeds 3 physics engines (Arcade Physics, Ninja, p2.js), providing particle systems, animations, pre-downloading and device adaptation solutions; in terms of compatibility, Phaser The focus is on the mobile browser; in terms of API, Phaser can implement rich game functions, which is suitable for complex game development.
（4）CreateJs
(Image source: CreateJs official website )
CreateJS officially provides TweenJS to support animation development, and at the same time provides audio and pre-download support through SoundJS and PreLoadJS, which is sufficient for the basic functions of H5 games. In terms of compatibility, CreateJS supports almost all browsers on PC and mobile. In addition, CreateJS also supports Flash CC to develop and export H5 games rendered by CreateJS.
（5）Hilo
Hilo is an open source project launched by the Ali team, including Hilo.js (2D) and Hilo3D. It supports modular development. It also provides packaging versions of multiple module paradigms and cross-terminal solutions. Hilo.js is suitable for developing marketing games . Its volume is relatively light, only about 70kb.
Main features:
- Multiple rendering methods, providing DOM, Canvas, Flash, WebGL and other rendering solutions.
- Minimalist kernel: Hilo core modules are extremely streamlined, retaining the most necessary modules for a 2D game engine and adopting modular management.
- Physics engine support-Chipmunk, supports self-expanding physics implementation; skeletal animation support-DragonBones.
- Rich cases: Support Tmall, hand-shopping many large-scale and daily activities, such as Double Eleven, mid-year big promotion, etc. Representative products such as carnival city.
Case:
(Image source: Hilo Github )
Official Examples:
(Image source: Hilo Github )
Hilo.js game engine basically meets the development needs of daily 2d animation. It has good compatibility and supports 4 rendering methods. Generally, canvas is selected. After practice, there is no problem with android4.4 rendering, and the operation is slightly stuck. 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 size.
Seven, references
Author: Luo Ran