The most popular eight kinds of HTML 5 dynamic production methods

A set of operating interface, the appropriate dynamic interactive feedback can bring users a better operation experience; a H5 operation Propaganda page, cool animation effects will help spread and brand building.

Nearly two years, small to loading animation, form dynamic effect, large to a variety of H5 operating page cool show, "Dynamic Design" is a fire across the river, and dynamic design has already become a qualified designer must know the field. This article will be through a number of cases, and we dug together several common H5 dynamic production methods.

We dig into the secret of this dynamic production, an entry-level small problem: look at the picture of these animation examples, we can say how the animation is produced? And how to appear on the page?

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

　　The 1:gif of the production technique of dynamic effect

GIF pictures are good at making details of small animation, bitmap, the advantage lies in "size" is very small, can be compressed, low production costs, to the shape of the picture applicable to a variety of operating systems, no compatibility of worries. There are many ways to make GIF animations, such as the Photoshop timeline we are familiar with, or we can use Flash,ae to export animations into GIF format and so on.

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

The way the H5 page hosts GIF images is the most cost-saving and easiest method to introduce. Just use the background picture/content picture as a reference on the page.

Having talked about some of the features of the GIF animation, we must simultaneously compare its cousins: frame by animation.

　　Dynamic Production Method 2: Frame animation

Frames-by-frame animation is the use of an equal spacing of the animation to decompose frames by frame picture, by JS script simulation or the use of CSS3 new Attributes Step () produced. Step () compatibility at the mobile end is good, but the use of a relatively small audience. The difference between frames-by-frame animation and GIF animation is that the script can control the speed of the frame-by-step animation and the pause of the action, while the GIF animation can not be animated at a later rate and the transparency of the changes.

Do a frame-by-step animation must be indispensable is the need for an equal spacing of the "animation decomposition by frame picture. png", then control the background-position of the picture through JavaScript script or CSS3 animation step (). Together, you can quickly output a frame-by-row animation.

From past experience to see GIF animation or frame-by-animation, we often think that they are only suitable for small details of the animation. In fact, they can also carry some very unique animation effects! As the following example, this is a street propaganda H5 page, it is by the frame decomposition diagram +javascript script simulation by frame animation.

Video Direct viewing H5 effect: http://v.qq.com/page/r/4/t/r0174e7fg4t.html

　　The 3:css3 of the production technique of dynamic effect

CSS3 should be a member of the animation family that will never be forgotten. Here we define it as an animation that excels at the plane layer. CSS3 's flaw should be that some of its attributes are not yet well supported by browsers. Let's take a look at the H5 Operations page from Adidas, "Ross-Never Fade":

Video Direct viewing H5 effect: http://v.qq.com/page/w/6/l/w0174ud2x6l.html

This cool to have no friends animation effect is mainly rely on CSS3 writing completed.

Here to introduce the three properties of CSS3 Animation: Transform deformation, Transition transition, and animation animation.

Transform variants: With rotate rotation skew twist scale zoom translate move matrix deformation five special effects, Ross's example is the full combination of these changes in the effects of the product.

Transition transition: The ability to modify the properties of the execution transformation, the time, speed, and latency, and the Bezier curve, which is well known to all, is also attributed to the Transition setting.

Development tools: Bezier Custom Delivery Door * * *

Animation Animation: If the transform interpreted as an action, transition interpreted as a transition, then Animation is a continuous number of actions, that is, animation. Animation we can set the value of the keyframes to allow the element to complete multiple actions over a period of time.

But how can we convey the animation design to the engineers with high quality and efficiency?

Here a small tips: recommended use of "case demo or shooting script + animation property decomposition Table + material cut map" of the suit!

Here's an example: This is a little animation that clicks feedback, and we can use the "Animation property Decomposition Table" method when we can't provide the demo. An animated Property breakdown table allows an engineer to animate the values that are filled out in a form, more accurately than a thin-air communication with an engineer.

Animation Property Decomposition Example:

　　The 4:svg of the production technique of dynamic effect

SVG, but also dynamic production can not be ignored in a hot way, we define it as a good at line animation, the disadvantage is: ie8,android4.2 and the following support is not good. Take a look at a few examples of this, involving the animation along the edge of the meta sketch, usually from the hand of SVG, of course, it can also achieve some complex animation, similar to this expression picture, but to achieve cost is not very cost-effective.

Knowledge Popularization: SVG, Scalable Vector graphics (Scalable vector Graphics), is stored as an image in XML format, it has some special places:

Can be read and modified by a variety of tools (e.g. Notepad)

Smaller size, more compressible

Vector

Pure XML

An SVG diagram, in fact, is generated by a bunch of anchor-point lines. So it's easy to save as a document format. and the reference in the page, it is also simple to introduce this text. The point to note here is: If you want to make an SVG animation, please be sure to use the AI tool to draw output vector graphics to the engineer classmate Oh.

　　The 5:canvas of the production technique of dynamic effect

A new element of HTML5, like an artboard, has several ways of drawing paths, rectangles, circles, characters, and adding images. itself is not capable of drawing. All drawing work must depend on JavaScript completion. We define it as an animation that specializes in painting. The following figure, the animation effect of drawing such a large number of elements, is what canvas is good at.

Canvas can be regarded as the SVG cousins, most of the graphic animation is made by canvas or SVG, the two animation capabilities similar but there are the following differences:

Canvas is a frame, has its own fixed high width, SVG is not dependent on the resolution of the vector, you can zoom in at any rate.

Canvas can save images in. jpg format, SVG is text format save image

Canvas draws images that do not account for the DOM, and each image in SVG is 1 DOM elements

Canvas is suitable for image-intensive animations, while SVG is not suitable for heavy use, such as making snow

Canvas relies entirely on scripting, and SVG can be generated directly using vector dump.

　　The 6:flash->canvas of the production technique of dynamic effect

Remove the above several common methods, flash canvas method is also this year a particularly hot form. Since the mention of the once brilliant flash, the output must be inseparable from the adjective cool: through the flash cc production of complex and fine animation, into canvas files, animation in the interactive operation, relying on the create.js of the footsteps of the completion of the library.

Here are some examples of how we ieg our small partners to let you explore the magic of this approach.

Video Direct look H5 effect: http://v.qq.com/page/o/m/7/o0174u3cim7.html

　　The 7:video of the production technique of dynamic effect

Video output is very specific to the dynamic effect. About the charm of video we use Wu Yifan H5 Page example, I believe that we can understand the instant ^ ^.

　　The 8:javascript of the production technique of dynamic effect

In fact, as long as it is related to interactive feedback animation, small to roll screen, large to the gravity induction, etc. need JS to handle the preparation of footsteps. In other words, all the animation effects are inseparable from the support of JavaScript students. There are a number of special JavaScript script libraries, such as three.js, that you can use to make an extraordinary animation effect.

Finally, we use a simple table to summarize the common H5 of this dynamic effect, hope that the small partners read this article can be the next time you meet the new animation effect, the first to dig out the principle behind it, and make good use of these 8 great techniques, everyone is an excellent dynamic performance designer. (the table described in the performance loss and implementation costs for reference only, the specific animation effect needs to be specific analysis, to know exactly which way is the most suitable.) )