Common methods for making H5 animation, h5 hands-on Method

Common methods for making H5 animation, h5 hands-on Method

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

A set of Operation interfaces and appropriate dynamic interaction feedback can provide users with a better operation experience;

An H5 operating publicity page, cool animation effects can help spread and brand building.

In the past two years, from loading animation, form animation, to the cool display of various H5 operation pages, the word "animation design" can be described as a fire across the north and south of the river, the dynamic design has already become a field that must be known by qualified designers. This article will explore several common H5 animation production methods through some cases.

Let's explore the secret of animation production from a simple perspective. An entry-level question: Can you tell us how this animation was made? But how is it presented on a webpage?

Yes, the answer must be a gif animation that designers are very familiar with. The first-hand method of H5 animation production is GIF.

 

Animation production method 1: GIF

GIF images are good at making small animations of details. Bitmap has the advantage of being small, compress, and low production costs. GIF images are suitable for various operating systems in the form of images without compatibility concerns. There are many ways to create GIF animations, such as the familiar Photoshop timeline or using Flash and AE to export the animations into GIF formats.

GIF animation is most often used in H5 animation effects as a load ing navigation bar, hot small labels and other elements, to control the balance between the image size and accuracy, so it is generally used to make small details of the animation.

The following describes how to host GIF images on an H5 page. You only need to reference the background image or content image on the page.

After talking about some features of GIF animation, We must compare its cousin: frame-by-frame animation.

 

Animation effect Creation Method 2: frame-by-frame animation

Frame-by-frame animation breaks down frame-by-frame images using an equi-spacing animation, Which is simulated by js scripts or produced by using step () of css3. The compatibility of step () on mobile terminals is good, but it is relatively small. 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 GIF animation cannot modify the animation speed and transparency through code later.

To make a frame-by-frame animation, you must compile an equal-distance animation into a frame-by-frame image. PNG ". Then, you can control the background-position of the image through JavaScript scripts or CSS3 animation's excessive function step (). In combination, you can quickly output a frame-by Frame.

Looking at GIF or frame-by-frame animations from past experiences, we often think that they are only suitable for small-Detail animations. In fact, they can also carry some very unique animation effects! As shown in the following example, this is a publicity h5 page of Momo. It is formed by a frame-by-frame decomposition graph + JavaScript script to simulate frame-by-frame animation combination.

 

Animation creation method 3: CSS3

CSS3 should be a member of the animation family that will never be forgotten. Here we define it as an animation that is good at the surface layer. The drawback of CSS3 is that some of its properties have not been well supported by browsers. Let's take a look at an example. The H5 operation page "Rose-never fades" from Adidas:

This cool, no friend animation effect is actually mainly written by CSS3.

Here we will introduce three attributes of CSS3 Animation: Transform deformation, Transition, and Animation.

Transform Deformation: it has five special effects: rotate skew twist scale translate move matrix deformation. In the example of Ross, it is the product that fully integrates these change effects.

Transition transition: it has the ability to modify the attributes, duration, speed, and latency of the transformation. The familiar besell curve is also under the Transition setting.

* ** Expansion tool: besell custom portal ***

Animation: If Transform is interpreted as an action and Transition is interpreted as a Transition, Animation is an Animation of several consecutive actions. Animation allows us to set the value of keyframes so that the element can complete multiple actions within a period of time.

 

However, how can we deliver high-quality and efficient animation design to engineers?

Here is a small Tips: We recommend that you use the "case Demo or split shot script + animation attribute decomposition table + Material Cut graph" package!

For example, this is a small animation with click feedback. When the Demo cannot be provided, we can use the "animation attribute decomposition table" method. The animation attribute decomposition table allows engineers to write animations based on the values entered in the table, which is more accurate than simply communicating with engineers.

Animation attribute decomposition example:

 

Animation creation method 4: SVG

SVG is also a hot method that cannot be ignored in animation production. We define it as a line-based animation with the disadvantages of IE8, Android4.2 and the following. Let's look at several examples. This kind of animation along the sketch edge is generally from the hands of SVG. Of course, it can also implement some complicated animations, similar to this emoticon image, however, the implementation cost is not very cost-effective.

Knowledge Popularization: SVG, Scalable Vector Graphics, is an image stored in XML format. It has some special features:

• Can be read and modified by multiple tools (such as NotePad)
• Smaller in size, more compact
• Vector
• Pure XML

An SVG graph is actually generated by a bunch of positioning anchor lines. Therefore, it can be easily stored in the document format. The reference in the page simply introduces this text. Note: If you want to create an SVG animation, you must use an AI tool to draw an output vector map for engineers.

 

Animation creation method 5: Canvas

HTML5 new element <canvas>, similar to the canvas, has a variety of ways to draw paths, rectangles, circles, characters, and add images. Itself is not capable of drawing. All the painting work must be completed by JavaScript. We define it as an animation that is good at painting. For example, Canvas is good at drawing an animation with a large number of elements falling.

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

• Canvas is a frame with its own fixed height and width. svg is a vector independent of resolution and can be scaled up or down.
• Canvascan save images in .jpg format, while svg saves images in text format.
• The image drawn by canvas does not occupy DOM, while each image of svg is a DOM element.
• Canvas is suitable for image-intensive animations, but svg is not suitable for a large number of use cases, such as making snow float.
• Canvas is completely dependent on script painting, while svg can be directly generated using vector transfer memory.

 

Animation creation method 6: Flash-> Canvas

Apart from the above several common methods, the Flash-to-Canvas method is also a particularly popular form this year. Since the previous brilliant Flash, the output must be inseparable from the cool adjective: Using Flash cc to make complex and fine-grained animations, leading to Canvas files, interactive operations in animations, relying on Create. complete the js step library.

The following is an example of our IEG partner to show you the magic of this method.

 

Animation production method 7: video

Video output is very efficient. We will use the example of Wu Yifan H5 page to show the charm of video. I believe you will understand it in an instant ^.

 

Animation creation method 8: JavaScript

In fact, as long as it is an animation involving interactive feedback, it is as small as rolling screen pages, and as large as gravity sensing, js is required to write the processing steps. That is to say, all animation effects cannot be achieved without the support of Javascript. There are many special Javascript script libraries on the market, such as three. js, which can be used in detail to make outstanding animation effects.

Finally, we will use a simple table to summarize the common production methods of H5 animation effects. We hope that all the friends who have read this article will be able to see new animation effects next time, this is the first time to explore the production principles behind it and make good use of these eight techniques. Everyone is an outstanding animation designer. (The performance loss and implementation cost described in the table are for reference only. You need to analyze the animation effect to find out which method is most suitable .)

 

To https://isux.tencent.com/h5active.html