About the various ways to implement animation "Go"

As is known to all, an element that moves often attracts more attention than static;

A set of operating interface, the appropriate dynamic interaction feedback can give users a better operation experience;

A H5 operation Flyer, a cool animated effect that will help spread and build your brand.

Nearly two years, small to loading animation, form a dynamic effect, large to a variety of H5 operation page of cool show, "Dynamic Design" is the word is fire all over the north and south, and the dynamic design has become a qualified designer must know the field. This article will be through some cases, and everyone together to explore several common H5 dynamic production techniques.

We dig into the secret of this dynamic production, a small entry-level problem: Look at these animated examples, can you say how this animation is made? And how does it appear on top of the web?

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

Dynamic production Technique 1:gif

GIF pictures are good at making details of small animation, bitmap, the advantage lies in "size" is very small, compressible, low production cost, to the shape of the picture for a variety of operating systems, no compatibility worries. There are many ways to animate gifs, such as the Photoshop timeline that we are familiar with, or the use of Flash,ae to save animations to GIF format, and so on.

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

H5 the way a page carries a GIF image is the most cost-efficient and easy-to-save method compared to the other methods described below. You only need to refer to the page as a background image/content picture.

Having talked about some of the features of the GIF animation, we must also compare its cousins: frame-wise animation.

Dynamic Production Technique 2: frame-wise Animation

Frames-by-frame animation is the use of an equal-spaced animation to decompose frames-by-frame images, written by JS script or using the CSS3 new attribute step (). Step () Compatibility on the mobile side is good, but the use of a relatively small audience. The difference between frames-by-frame and GIF animations is that the script can control how fast and slow the animation moves over and over, and GIF animations cannot be modified later by code for animation rates and transparency.

It is necessary to do a frames-by-frame animation is required to an equal spacing "animation decomposition frame by picture. png", and then through the JavaScript script or CSS3 animation's excessive function step () to control the picture background-position, The combination of the two allows you to quickly output a frames-per-frame animation.

From previous experience in GIF animations or frame-by-frames animations, we tend to think that they are only suitable for animating small details. In fact, they can also carry some very unique animation effect! As the following example, this is a promotional h5 page of Mo Mo, it is by the frame decomposition diagram +javascript script to simulate a frame by piece animation.

Dynamic production Technique 3:CSS3

CSS3 should be a member of the animation family that will never be forgotten. Here we define it as an animation that specializes in plane layers. The flaw in CSS3 should be that some of its properties have not been well supported by the browser. Let's take a look at an example from the Adidas H5 Operations page "Ross-Never Fade":

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

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

Transform variants: With rotate rotation skew twisting scale scaling translate moving matrix matrix deformation five effects, Ross's example, is to fully combine the effects of these changes in the product.

Transition transition: Having the ability to modify the properties, duration, rate, and delay time of the transformation, the Bezier curve, which is familiar to everyone, is also attributed to the Transition setting.

Extension tool: Bezier Custom Portals * * *

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

But how do we convey the animation design to the engineer with high quality and efficiency?

Here's a little tip: it's recommended to use the "case demo or shooting script + animation attribute decomposition table + footage cut" Package!

For example: This is a small animation of click Feedback, we can use the "Animation attribute decomposition table" When the demo is not available. The animation attribute decomposition table allows the engineer to animate according to the values entered in the table, and communicates with the engineer in a more precise and accurate form.

Example of an animated attribute decomposition:

Dynamic production Technique 4:svg

SVG, is also the dynamic production of a popular method can not be ignored, we define it as good at line animation, the drawback is: ie8,android4.2 and the following support is not good. Look at a few examples, related to this animation along the side of the meta-sketch, usually from the hand of SVG, of course, it can also achieve some complex animation, similar to the expression picture, but the implementation cost is not very good.

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

• Can be read and modified by various tools (e.g. Notepad)
• Smaller size and greater compressibility
• Vector
• Pure XML

An SVG diagram is actually generated by a bunch of anchor-point connections. So it can be conveniently saved as a document format. and the reference in the page is also simple to introduce this text. The point to note here is: If you want to make an SVG animation, be sure to use the AI tool to draw output vectors to the engineer.

Dynamic production Technique 5:canvas

The new element of HTML5 <canvas>, like an artboard, has a variety of drawing paths, rectangles, circles, characters, and methods for adding images. There is no drawing capacity in itself. All drawing work must be done by JavaScript. We define it as an animation that specializes in painting. For example, drawing such a large number of elements falling animation effect is what canvas is good at.

Canvas can be a cousin of SVG, most of the chart animation is made from canvas or SVG, the two have similar animation ability, but also have the following differences:

• Canvas is a picture frame, has its own fixed high-width, SVG is not dependent on the resolution of the vector, you can zoom out arbitrarily.
• Canvas can save images in. jpg format, SVG is the format of text to save images
• Canvas-drawn images do not occupy the DOM, and each SVG image is a 1 DOM element
• Canvas is suitable for image-intensive animations, and SVG is not suitable for heavy use, such as making snow, etc.
• Canvas relies entirely on scripting, and SVG can be generated directly using vector dumps.

Dynamic production Technique 6:flash->canvas

In addition to the above several common methods, flash to canvas method is also a special hot one form this year. Since the mention of once brilliant flash, that output must be inseparable from cool this adjective: through the flash cc to make complex and fine animation, into the canvas file, the interactive operation in the animation, relying on the create.js of the footsteps of the library to complete.

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

Dynamic production Technique 7:video

The video output is particularly dynamic. About the charm of video we use the Anna H5 page example, I believe we can understand the moment you are ^ ^ ^.

Dynamic production Technique 8:javascript

In fact, as long as it is related to interactive feedback animation, small to Roll screen page, big to the gravity sensor and so on need JS to process the pace of writing. In other words, all animation effects are inseparable from the support of JavaScript classmates. There are many special JavaScript script libraries, such as three.js, that can be used to make extraordinary animations.

Finally, we will use a simple form to summarize the H5 of the dynamic effect of the common production techniques, hope to read the text of the small partners can meet the next time the new animation effect, the first time to dig out the production principle behind it, good use of these 8 big tricks, everyone is a good dynamic designer. (The performance of the table described in the loss and implementation costs for reference only, the specific animation effect needs to be analyzed, only to know which way is the most suitable.) ）

About the various ways to implement animation "Go"