As we all know, an element that moves is often more eye-catching than static;

A set of operation interface, the appropriate dynamic interactive feedback can bring users a better operation experience;

An H5 operation promotion page, cool animation effects will certainly help spread and brand building.

In the past two years, the word “dynamic design” has become very popular, ranging from loading animation and form dynamic effect to the cool display of various H5 operating pages. And dynamic effect design has long been a field that a qualified designer must know. This paper will explore several common H5 dynamic effect production techniques through some cases.

Let’s dig into the secret of this animation. A simple question: can you tell how this animation is made by looking at the examples above? And how is it presented on the web?

Yes, the answer must be designers are very familiar with the GIF small animation, H5 dynamic effect production first-hand method, is the GIF.

Dynamic effect production technique 1: GIF

GIF images are good at making small animation details, bitmaps, the advantage is that the “body” is very small, compressible, low production cost, in the form of pictures suitable for various operating systems, no compatibility worries. There are many ways to make GIF animation, such as the familiar Photoshop timeline, or use Flash, AE to export animation to GIF format and so on.

GIF animation is most often used in H5 dynamic effects when loading navigation bar, hot small tags and other elements, to control the balance between the size and accuracy of the picture, so it is generally used to make small details of the animation.

H5 page hosting GIF images compared to the following other methods, is the most cost-effective, the most convenient. Just reference it on the page as a background image/content image.

Having covered some of the features of giFs, we must also compare them with their cousin: frame-by-frame animation.

Motion effect production technique 2: frame by frame animation

Frame by frame animation is the use of an equal spacing animation decomposition frame by frame picture, written by JS script simulation or using cSS3 new property step() produced. Step () has good compatibility on mobile, but is a niche use. The difference between a frame-by-frame animation and a GIF animation is that a script can control the speed and pause of a frame-by-frame animation, while a GIF animation cannot change the animation speed and transparency through code at a later stage.

It is indispensable to make a frame-by-frame animation that requires an equal-spacing “animation decomposition frame by frame. PNG”, and then control the background-position of the picture through JavaScript script or the transition function step() of CSS3 animation. Combine the two to quickly output a frame-by-frame animation.

From previous experience with GIFs or frame-by-frame animations, we tend to think that they are only good for small details. In fact, both can also carry some very unique animation effects! As an example, this is a Momo promotional H5 page created by combining frame-by-frame graphics with JavaScript simulation of frame-by-frame animation.

Dynamic effect production technique 3: CSS3

CSS3 should be a member of the animation family that will never be forgotten. Here we define it as animation that is good at the plane layer. The drawback of CSS3 should be that some of its properties are not well supported by browsers. Here’s an example from Adidas’s H5 operations page, “Ross – Never Fade” :





This cool to no friends animation effect is actually mainly rely on CSS3 written to complete.

CSS3: Transform, Transition and Animation

Rotate, skew, scale, translate, matrix, etc. In Ross’s case, it is a combination of these five special effects.

Transition: The ability to modify the properties, duration, rate, and latency of the Transition. The familiar Bezier curve is also assigned to Transition.

*** Extension tools: Bessel custom portal ***

Animation: If Transform is defined as an action and Transition is defined as a Transition, then Animation is a series of actions. Animation allows us to set keyFrames to allow elements to complete multiple actions in a period of time.

But how do we deliver animation design to engineers with high quality and efficiency?

Here’s a little tip: recommend using a “case Demo or shooting script + animation property resolution sheet + footage cutout” package!

Here is an example: this is a small click-feedback animation. When Demo is not available, we can use the “animation property resolution table” method. Animation attribute resolution table allows engineers to write animations according to the values filled in the table, which will be more accurate than communicating with engineers without foundation.

Example animation property resolution table:

Dynamic effect production technique 4: SVG

SVG, which is also a popular method in dynamic effects production, is defined as being good at line animation. The disadvantages are: IE8,Android4.2 and below support is not good. In the following examples, animation along the edge of a meta sketch is usually made by SVG. Of course, it can also implement some complex animations like this emoticon image, but the implementation cost is not very cost-effective.

Knowledge: SVG, or Scalable Vector Graphics, is an image saved in XML format that has some special features:

  • Can be read and modified by various tools (such as notepad)
  • Smaller size, more compressibility
  • vector
  • The pure XML

An SVG diagram is actually generated by wiring a bunch of anchor points. So it can be easily saved as a document format. A reference on a page simply introduces the text. It is important to note that if you want to make an SVG animation, be sure to use the AI tool to draw the output vector for the engineer.

Dynamic effect production technique 5: Canvas

HTML5’s new element, like an artboard, has multiple ways to draw paths, rectangles, circles, characters, and add images. They don’t have the ability to draw. All drawing must be done in JavaScript. We define it as animation that is good at drawing. As shown below, Canvas is good at drawing such an animation effect with a large number of falling elements.

Canvas can be regarded as the cousin of SVG. Most chart animations are made by Canvas or SVG. They have similar animation capabilities, but they also have the following differences:

  • Canvas is a picture frame with its own fixed height and width, while SVG is a resolution-independent vector that can be enlarged or reduced at will.
  • Canvas can save images as.jpg format, SVG as text format
  • Canvas images do not occupy the DOM, whereas every image in SVG is a DOM element
  • Canvas is suitable for image-intensive animation, while SVG is not suitable for extensive use, such as making snow, etc
  • Canvas relies entirely on script drawing, while SVG can be generated directly using vector dump.

Dynamic effect production technique 6: Flash->Canvas

In addition to the above common techniques, Flash to Canvas method is also a particularly popular form this year. Since referring to the once brilliant Flash, the output must be inseparable from the adjective cool: complex and detailed animation made through Flash CC, generated into Canvas file, interactive operations in animation, relying on the footsteps library of CREate.js.

Here are some examples from IEG friends to give you a taste of the magic of this approach.



Dynamic effect production technique 7: video

Using video to output very specific dynamic effects. As for the charm of video, we use the example of Wu Yifan’s H5 page. I believe you can understand it in a moment.

Dynamic effects Technique 8: JavaScript

In fact, as long as it is related to interactive feedback animation, small to scrolling page, to gravity induction, etc., all need JS to process the writing of footsteps. That is to say, all animation effects are inseparable from the support of Javascript students. There are many special Javascript libraries on the market, such as Three.js, which can be used to create extraordinary animation effects.

Finally, we summarize the common production techniques of H5 motion effects with a simple table. We hope that the friends who have read this article can dig out the production principles behind it in the first time when they meet a new animation effect next time and make good use of these 8 techniques. Everyone is an excellent motion effect designer. (The performance losses and implementation costs described in the table are for reference only, and specific animation effects need to be analyzed in order to know which method is most suitable.)