We often see many people sharing H5 links in wechat moments. Some are full of technology, some are dazzling, and some are very creative. Major companies also use H5 as a good way to spread their brands and warm up their activities. Businesses are also favouring this approach, leading to an influx of people in the H5 industry. I have made dozens of H5 in recent years, and every time I thought about the relationship between animation and technology, I recorded it.

H5

When you get a requirement for H5 production, what is the purpose of the requirement? According to the purpose, it can be divided into event marketing, product promotion, conference invitation, brand promotion, enterprise recruitment and so on. Different types of H5s have their own characteristics, but identifying the purpose of the business side will keep you on topic. The next step is to think creatively around this theme. A lot of creativity comes from marketing strategies, methods and understanding of human nature. We won’t discuss these soft ways of thinking. As a programmer, the first thing THAT comes to my mind is how to bring creativity through technology.

Before we get there, let’s take a look at what it takes to make an H5.

A requirement as long as it is crazy explosive growth, industry see the huge market, will try to reduce the cost and the use of threshold, as soon as possible to attract users, so some of the h5 production platform, each in a low threshold, do not know the code also can play, if you have some design thinking and mapping ability, also can make very nice h5 works. Based on my experience, I can summarize as follows:

Mature DOMESTIC H5 production platforms include:

  • Rabbit Exhibition: the platform with the strongest sense of design and creativity, but the production is relatively complex, requiring design foundation.
  • Yiqixiu: the old H5 production platform is constantly iterating and has a large number of cases. You need to pay for using H5 made by others. The ecosphere is fine.
  • First page: Mobile APP, quick production of H5 on mobile terminal. Suitable for individual users to make quickly.
  • Epub360 Italian school: For designers, provide a lot of creative design elements and cases.

Yi Qixiu H5 production background

These platforms can let users with a simple drag and drop to create an elegant H5, this way of packaging the preset better animation mode, very much like our front development of modular thinking, they separate the elements and data, using the data model to describe the elements of the position and movement, developed a set of animation engine at the same time, as long as the model input data, It’s going to be beautifully animated.

I think these platforms are very suitable for the study of WEB animation, in-depth exploration of its animation implementation ideas, so that we can quickly sort out “animation” and “WEB animation technology”.

WEB animation technology

When you do animation, do you really understand what animation is? Wikipedia tells us that animation, which is created by a sequence of still images played in a certain order at a certain speed, is a smokescreen. However, I don’t want to understand him so stiffly. The observation of the real world may give us a more real sense of body. When we think about people in motion, what are the animation elements of our body movements?

Simple animation

  • Move (horizontal, vertical)
  • rotating
  • Zoom in (in, out)
  • Style properties

The movement of the body, the rotation of the skeleton and the expansion of the pupil are the most basic modes of movement. The change of the style is the change of the element’s own attributes, such as color, border and background, which is also the most basic element of most animation programming. You can implement it using CSS3. We know that an animation has elements and changes. CSS3 is based on THE DOM element, with the help of animation Transition Transform Translate. There is a very useful CSS Animate library, Animate. CSS, which presets a lot of useful animation templates, you just need to add the response class to the DOM node.

They are both simple and complex. The complexity lies in the combination of these modes of motion with speed and time to produce speed curves. However, most of the speed curves in nature come from the acceleration of gravity, G, because of which the motion of objects is not as monotonous as the uniform linear motion in a vacuum. And full of life.

Especially when you are doing animation, why do you make animation is very stiff, making people uncomfortable to look at, in fact, people have been used to the way of nature animation, people have stable expectations for each frame of animation, when your animation and the movement of real objects, will become stiff.

This simple animation spawned a form of human animation called “bone animation”.

Complex animation

The production of bone animation is a relatively complex animation form, which is very difficult to write bit by bit through code. Fortunately, the industry has long had mature tools to help you save the complicated coding process and let you only focus on the creation itself. There are two popular programs for 2D bone animation: Spine and DragonBones.

DragonBones Animation software operation interface

Taking DragonBones as an example, we found that there is a section below, the action bar is a “timeline” that describes the state of each frame of our animation, and there are actually two time-related animation forms.

  • Frame by frame animation
  • Keyframe animation

As a front-end engineer, when we do animation, we usually do not write the state of each frame of animation, but first define the initial state and the transition mode of the middle animation, such as how the speed changes, how the path changes. This is a kind of keyframe Animation. In CSS3, we can use the Keyframes in the Animation to realize the keyframe Animation. The Keyframes define the state of the keyframe, and the Animation defines the time and speed changes.

For frame-by-frame animation, this is obviously not CSS3’s strong suit, which leads to a more powerful weapon — Canvas.

Frame by frame animation

In Canvas, animated elements can be drawn by custom shapes of Canvas panel, or they can be realized by loading pictures. The requestAnimationFrame(callback) function is used to redraw each frame as time passes. One of the better known frameworks in the frame-by-frame animation world is PixiJS.

PixiJS has been known for its high performance 2D rendering engine. Pixi is responsible for rendering. You can create rich interactive graphics, animations, and games without having to dig into the WebGL API or deal with browser and device compatibility issues. PixiJS, meanwhile, has full WebGL support and can seamlessly fall back to HTML5’s Canvas if needed. PixiJS uses WebGL rendering by default. You can also specify Canvas rendering by declaration. WebGL is not supported by Android 4.4 Browser on mobile, but Canvas elegant degradation can be used.

Pixi provides powerful filters and makes it very easy for us to achieve many special effects. However, as a rendering engine, it achieves high performance, ignoring ease of use, high learning cost and complex API. In particular, the way frame-by-frame animation is coded seems counterintuitive, or not very smooth to write, while keyframe animation seems to be more in line with our programming habits, after all, CSS animation is familiar to us by heart.

So how to use Canvas to achieve keyframe animation? The first thing we need to look for in order to achieve something is a method, and the method is usually already summarized and put in front of you. Here we will talk about two frameworks: CreateJS and GreenSock

Keyframe animation

After we define the key frame and the change mode, the algorithm will help us calculate the state of the element in each frame, we call this tween animation. CreateJS and GreenSock are both masters of tween animation.

CreateJS and GreenSock are a set of modular libraries and tools based on HTML5. Not only can Canvas animation be realized, but also DOM animation is supported. The principle of DOM animation is still based on CSS3. Since the three musketeers of CSS animation will not cause the rearrangement and redrawing of browser page content, GPU acceleration can even be enabled. The performance is much higher than directly manipulating the WIDTH, left, margin and other properties of the DOM.

In fact, the performance of CSS animation and Canvas animation can not be generalized, it depends on the scene and browser type you use, the specific performance comparison can be seen here, and I think a key point that prompts us to choose Canvas animation is the obvious different way of thinking between the two.

  • We call the body of the animation an element, and in the DOM, elements are assembled and laid out according to the classic “box model,” which naturally has parent-child relationships and relative positions. This is very handy when we implement some local animations.
  • Canvas does not have the concept of a box, it only has a Canvas label, and this Canvas is called a stage. Any elements on the stage can move freely, which is more like the operation mode of the real world.
  • These two ways of thinking are probably the difference between UI designers and front-end engineers at work. When we use the front “box” thinking to develop a tool for designers to use drag-and-drop page, you can’t natural in asking them to use their familiar way to think, they only have a panel drawing and design, they hit on a uniform grid first, and then get the azimuth, coherent, they care about is finishing the beautiful sex.

Anyway, let’s see, what’s the basic implementation of keyframe animation? CreateJS has a library for keyframe animation, TweenJS, and GreenSock has a library for keyframe animation, TimelineMax.

/ / TweenJS API
createjs.Tween.get(circle, { loop: true })
  .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
  .to({ alpha: 0.y: 175 }, 500, createjs.Ease.getPowInOut(2))
  .to({ alpha: 0.y: 225 }, 100)
  .to({ alpha: 1.y: 200 }, 500, createjs.Ease.getPowInOut(2))
  .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

/ / TimelineMax API
var tl = new TimelineMax();
tl.to(element, 1, {left:100}).to(element, 1, {top:50}).to(element, 1, {opacity:0});
Copy the code

As you can see, both apis are very similar in that they use a chain call method to define each key frame and time, as well as the key motion curve. The difference is that TweenJS focuses on the movement of a single element, while TimelineMax focuses on the movement of different elements in a timeline.

In comparison, GreenSock uses many Flash methods for animation implementation, with many plug-ins, more complete functions and more dazzling effects. In fact, when we choose an animation framework, remember not to take on too much, on the basis of meeting the needs, in-depth study of a framework, to achieve proficiency, to make better effects and creativity. I always believe that innovation is a natural development based on rich knowledge reserves and insights, especially the depth of technology. If you keep trying different frameworks, you can only keep learning various APIS and forget that the essence of animation is not technology, but good ideas.

When we are in the realization of animation, slowly will find that most of the elements are images, and image is programmed in advance, can’t change, can replace with new image, when we smile to achieve animation, for example, need to draw two pictures, one is with their mouth closed, one was grinned, then play by frame. When you have enough frames, it doesn’t look stiff. Once you get below 24 frames, it becomes unnatural. How can you achieve smooth changes without increasing the workload? We grafted the thinking of keyframe animation to the distortion of the element itself, thus giving birth to the concept of “flexible animation”.

Flexible animation

As can be seen from the above figure, elements can change with each other and are very smooth. Such animation does not need Canvas as a heavy weapon, but can be realized with simple DOM. SVG is really a magic tool, which not only has distinctive features in realizing ICONS and fonts, but also has its own school in realizing flexible animation. SVG is still DOM, and it has its own Animation tag, but it also supports the properties of CSS. The essence of its Animation is to rely on lines and fillings. The change of lines leads to the change of the filling area, thus causing the change of shape. And the line is dependent on the path and anchor point, path and anchor point change, directly affect the change of the line.

The example above uses GreenSock’s SVG animation plugin, MorphSvgPlugin, which can convert different SVG elements to and from each other with a very smooth transition.

SVG animation is relatively local and small, and the scope of use is relatively narrow, but when we achieve complex flexible animation, or even games, we still need to use Canvas to achieve.

From the picture above, we can see that the dragon’s wings are a picture, but the muscle contraction and relaxation brought by the flapping of the wings can be realized through local distortion and deformation of the picture. How does this animation work? This brings us to a very important concept in bone animation: mesh.

Here we discuss this concept in a superficial way. In order to achieve local changes in an image, we need to divide the image into blocks, and each block is called a grid. Each grid has its own vertices and edges. Whether the concept of grid is very similar to path and anchor point, no matter what technology, the implementation logic is similar. The important thing is not to always focus on the different and changing parts, but to find those unchanged places, so as to achieve the effect of connecting by analogy.

Making animations like this isn’t complicated — you can use tools like Spine and DragonBones — but it’s really a manual job, and you need to constantly tweak it to get to a point where it looks comfortable.

conclusion

Under the concept of big front end, WEB animation is a very gorgeous and profound field, even not limited to the front end, it pays more attention to the user interaction experience, and the virtualization of the real world. We have only discussed the tip of the iceberg here, and there are many animation forms that need further study and consideration, such as:

  • Particle animations
  • The special effects animation
  • 3 d animation
  • Data visualization animation…

As we dig deeper, we see the importance of mathematics, the importance of aesthetics, the importance of creativity. Technology is just a tool, and what emerges is a kind of pursuit and experience of beauty. It’s not obvious, but it’s worth thinking about.

reference

  • The performance comparison
  • How Browsers Work

The article can be reproduced at will, but please keep this link to the original text.

Please send your resume to caijun. HCJ (at)alibaba-inc.com.