preface

As the front end students, more or less will receive animation requirements. At present, the animation effect is becoming more and more cool, and the difficulty of drawing animation is gradually increasing.

Some time ago, I mainly learned APNG, Lottie and Video animation schemes. APNG and Lottie are mainly shared as follows:

  • Web frame animation solution – APNG principle and implementation
  • Web Frame animation solution – Lottie – Web source code anatomy

In the above two articles, the principles, advantages and disadvantages of APNG and Lottie are described respectively. Today’s topic is Video animation. That is, you can animate by playing a video.

Video

The HTML element is used to embed a media player in an HTML or XHTML document to support video playback within the document.

During a discussion with design students in a requirement, the author found that the size of an animation produced by AE after lossless export is as follows:

  • APNG 27 m size
  • Video only 400 k

However, on the Internet to find information, found a variety of Video pits, you can see the complex frame animation of the mobile end Video pit implementation.

In addition to common problems such as playback, the biggest problem is that there is no Alpha channel in the Video, which means the background of the Video is black as shown below.

However, our usual animation scenes are basically required transparency, so this scheme aborted. Further research revealed that transparent video can be drawn using WebGl.

WebGl + Animation

WebGl concept:

WebGL (Web Graphics Library) is a JavaScript API that renders high-performance interactive 3D and 2D graphics in any compatible Web browser without the need for plug-ins. WebGL does this by introducing an API that is very much in line with OpenGL ES 2.0, which can be used within the HTML5 Canvas element. This consistency allows the API to take advantage of hardware graphics acceleration provided by the user device.

To review the concept of animation:

Animation (English: Animation) is a kind of work and video technology that misperceives a picture or object (picture) as active by taking a series of stationary solid-state images (frames) at a certain frequency and continuously changing and moving (playing) speed (such as 16 frames per second), resulting in the illusion of visual residual images of the naked eye.

Since WebGL requires a certain level of entry to understand the code, I will only talk about the following ideas, and the details of the code can be learned in the field. So don’t get tangled up in code you don’t understand. Understanding the idea is the most important thing.

The main ideas of WebGl to achieve transparent video rendering are as follows:

  • Parses Video Each frame during Video playback
  • Identify the areas that need to be transparent in each frame and set them to be transparent
  • Each processed frame is rendered by WebGl
  • The above process is repeated until the end of the video playback, and the rapid drawing process produces continuous changes to the new animation with transparency

WebGl implements transparent video rendering

Parsing every frame of Video playback and drawing every frame is actually done easily by WebGL APIS. So the point is to understand how to identify the areas that need to be transparent in each frame and set them to be transparent.

For the following video, the simplest solution is to identify the black color and make it transparent. But if the animation also has black elements, then it is a mistake. So this plan is initially not good.

The second plan is to design the students to export the left and right symmetric video. Check the video as follows:

In this video we have left and right symmetry. The animation on the left is pure white, and the animation on the right is colored, which is what we need. Then our drawing idea can be as follows:

  1. The actual animation is 50% as wide as the original video, that is, half as high as the video
  2. If you parse the pixels on the left, white means animation and black means transparency
  3. Resolves the pixel on the rightrgb
  4. Color value changes torgba, thenaThe value of alpha is white on the left1(The pixel has the same color) or black0(The pixel becomes transparent)
precision lowp float;
varying vec2 v_texCoord;
uniform sampler2D u_sampler;
void main(void) {
  	gl_FragColor = vec4( Vec4 represents a 4-dimensional variable, since rGBA is a 4-value variable
        texture2D(u_sampler, v_texCoord).rgb, // RGB on the right
        texture2D(u_sampler, v_texCoord + vec2(-0.5.0)).r // -0.5 represents the left side of the canvas. The value is r in RGB
   	);
}
Copy the code

The above WebGl code is at the heart of transparency, and of course it is confusing to anyone who is new to WebGl (as am I). So we just need to understand the idea, and we can use canvas to achieve the same effect.

Implementation code and effect can be directly see Demo, code does not explain too much.

This scheme relies on automatic video playback, so the compatibility problem is not easy to solve. It is suitable for some scenes in the APP (such as live gifts, etc.).

conclusion

I have made a simple summary of my previous study

  • Web frame animation solution – APNG principle and implementation

  • Web Frame animation solution – Lottie – Web source code anatomy

  • Web Frame animation solution – WebGl implements transparent video rendering

Here are some summaries and comparisons of each scenario.

Explain wrong place welcome to correct, a lot of discussion ~

The resources

  • Developer.mozilla.org/zh-CN/docs/…

  • Juejin. Cn/post / 688567…