After reading this, the front end can quickly develop some H5 animation, designers can also efficiently make their own mind animation to make others high fidelity, hope to bring a little help to everyone.


Speaking of animation H5, as a front end, it is “love and hate”. Love is to add animation effect after the H5 will become lively and interesting, attractive Max; hate is to do animation is one side in the mind of YY effect, while using CSS, JS code, both inefficient and not intuitive, the so-called “product a word, design a thread, a body of sweat, rebuilt body of sweat.” Fortunately, you see this article now, and I’ll introduce an example to illustrate how Adobe Animate CC can be animated efficiently and intuitively, and point out some new features of the 2018 version.

1. a good play comes

First, let’s look at an animation. How long do we need to estimate the H5? The answer is one day.

To complete the H5 so quickly, we rely on the visual animation software Adobe Animate CC. Adobe Animate CC is the predecessor of Adobe FlashProfessional CC. Because of the emergence of H5, many animations that used to be implemented with flash can now be implemented with H5, and flash has always been unsafe, making the industry more and more exclusive of flash, for example, on a page on iPhone. Ash. Adobe thought that this could not be downfallen, so the software went smoothly, and on the basis of maintaining the original Flash development tools, the new H5 animation function was added. For the original flash developers can easily transition, for beginners, this software is also easy to get started.

Before introducing how to animate, let’s familiarize ourselves with the software interface.

The upper left is the animation editing area. There is a stage in the area, which is the animation area we can finally see. The content beyond the stage will not be seen.

The upper right is the toolbar, most of which are similar to Photoshop tools. On the left side of the toolbar is an attribute panel with adjustable numeric values. For example, the location and width of the selected yellow circle are displayed at the moment.

The lower left is the time axis editing area. The reason why animation is active is when we specify what pictures it displays at what time points. There are many layers in the timeline, and the upper layer will cover the underlying layer.

At the bottom right corner, I pulled a code editor panel, which was used to control animation’s playback and pause through code, and to write interactive logic after clicking objects.

There are a few more concepts to understand.

1. key frame

The key frame is used to edit the animation status of the moment. As an example, we add a key frame in the tenth frame and adjust the position, size and rotation angle of the graph. When the play is played, we will see that the figure is not moving in the first 9 frames, and when the key frame is in the key frame, it becomes a newly adjusted state immediately. This can be understood as a state in a percentage of keyframes in CSS3.

We can add an action complement between the two keyframes, so that the picture will change from the initial state to the end state with time.

We can also add shape patches between two shapes so that they can naturally change shapes.

2. graphics graphic and film editing movie clip

These two types of components will often interact with each other in making animations. This needs to be clearly understood. (knocking on the blackboard!)

When we drag the picture onto the stage, the picture is just a bitmap, and there are not many editing functions such as creating patch animation and setting transparency.

And when it is converted to a picture element, it has the above functions. In fact, it is outsourced by a picture. If you double-click the picture elements, you will enter the internal parts and see the pictures before conversion. In front-end development, this is equivalent to building a new multi-functional component and assigning the picture to it.

The movie clip is a movable graphic element, which has its own Timeline. For example, the bubble animation below is a video clip.

The components can be reused, for example, a lot of bubbles are needed in a picture, and only need to place bubble elements on the stage. By double clicking the component to edit the picture inside, it will change the picture of all other elements at the same time.

In general, the added pictures should be converted into graphic elements. If the graphics elements are moved, they will be converted into video clips. In structure, it is equivalent to a graphics element wrapped in the movie clips, and a picture is wrapped in the graphics element.

Well, with the above basic knowledge, the following contents will be easier to understand. Then I will start with this H5 animation as an example to introduce some animation production.

2. Example demonstration

1. hoisted spiders

This is a displacement animation. We put the spider graphics in the starting and ending positions, then add a motion gradient.


We see the example of the spider’s whereabouts have a Duang spring effect, this set up in the patch of a slow motion function on the line. The choice of the commonly used slow motion function is newly added in the 2018 version, and the individual feels very practical.

In H5, click on the spider will continue to play the animation, this click event allows software to automatically generate code. Select spider graphics, double-click the required events in the code panel event, and the software will immediately generate binding events.

We need to write only one sentence: ();

About the code to learn, the most frequently used sentences are:

/ / playback
This.[parent.]play ();
/ / pause
This.[parent.]stop ();
/ / jump to frame num and then play
This.[parent.]gotoAndPlay (Num);
/ / jump to frame num and then pause
This.[parent.]gotoAndStop (Num);
Most of the animated content can be seen as a shift, zoom, and rotational motion, so as long as you have mastered these operations, congratulations on some of the basic animations.

2. color scenes

The cover and shape change are mainly used here. First, create a mask layer on the color scene layer, and then make a circular shape with gradual enlargement of the shape on the mask layer.

The mask in this H5 animation is used more, careful observation, will find the beginning of the typing effect, the red packets fall to disappear that moment, in boiling water moving up and down red envelopes, extension of the tongue and other places are used to cover the mask effect.

The realization of the effect of 3. bubbles

Here is mainly a bubble enlargement and disappear animation, it is necessary to pay attention to move the enlarged quasi center downward so as to conform to real life. After the bubble is maximized, a blank key frame is inserted to indicate a short period of blanking after the bubble burst.

There are many bubbles in the picture. I use the method of the multiplexing element mentioned above to achieve it. In addition, the location and size of each element should be adjusted to simulate the irregularity of the actual bubble.

In order to make the bubbles appear to be more natural, I named each component instance and used a random function to control the animation of the component animation.

Function bubbleAni () {
/ / this time there will be a random num bubble
Var num = parseInt (Math.random () *7);
For (VaR i=0; i<num; i++) {
Var target = “bubble” +parseInt (Math.random () *8+1);
Var nextTime = parseInt (Math.random () *100);
SetTimeout (function () {()
_this[target].play ();
}, nextTime);
/ / next bubble time
Var nextTime2 = parseInt (Math.random () *200);
SetTimeout (function () {()
BubbleAni ();
}, nextTime2);
BubbleAni ();
Three. Test animation

In the animation process, we can use the menu bar’s control->Test to put animation in the browser to see the effect. By debugging the generated H5, we can see that Animate CC is drawing animation on the canvas through the createjs engine. About createjs, you can look at its Chinese community or ajex’s blog to learn more.

4. Release animation

After the animation is finished, the animation is published as a web page. File->publish can be released, and the software will export HTML, JS, CSS and other resource files in the directory where the animation source files are located. To see the export effect, you can double-click HTML to open it, but when you click on the event, you will report cross domain security errors. To solve this problem, just put all the files in the server and visit again.

5. performance optimization

As we finish the animation hard on the computer, we look at the enjoyable animation that we have made on the computer browser, and the sense of achievement can not help but rise. Then, when you are happy to pick up Android mobile to enjoy animation, suddenly dizzy: why is card so horrible? No hurry, no hurry. You should rejoice now to see this article. Let me slowly come and give you some optimization suggestions.

Making animation in Animate CC has the concept of FPS, that is, how many frames to play every second. How do we normally control the frame rate in JS? Yes, setTimeout or setInterval. That’s why animation plays carton in Andrews. The solution is to switch to requestanimationframe playback and add createjs.Ticker.timingMode = createjs.Ticker.RAF in the fnStartAnimation method.

FnStartAnimation = function () {
Createjs.Ticker.setFPS (;
Createjs.Ticker.addEventListener (“tick”, stage);
/ / default settings
//createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
/ / recommended settings
Createjs.Ticker.timingMode = createjs.Ticker.RAF;
CustomHandleComplete ();
Because requestanimationframe animation is usually 60 frames per second, so long as FPS is first adjusted to 60, and then start making animation. Animate CC 2018 adds a number of seconds to the time axis, which greatly facilitates time consideration when making animation, and does not use the current frame divided by the current frame by FPs to estimate what time it is at the time.

In an animation test, I found that the animated cartoon was getting more and more stuck on the phone. After detecting memory using chrome, memory leak was detected and increased rapidly. After consulting the relevant information, I think some default export settings are not very reasonable, for example, the size of Sprite map is too large, even 81928192. So I change the Sprite map to 1024*1024 (when the location is not enough, it will automatically create a new Sprite map to store it, so you don’t have to worry about it), and change the setting of the Sprite chart, which is opened by JPG and PNG, and does not export the useless resources, to be changed to the following figure:

After adjustment, the memory footprint is not rising rapidly, but is relatively stable, and occupies less memory. Animation will not be more and more stuck, the optimization is successful!

Ajex’s blog has a “createjs performance optimization”, you can see. However, based on my experience of animation now, I can make the above 2 points of optimization plan more smoothly.
I wonder if you are interested in this way of making animation after reading it? This paper first points out the pain points and difficulties when you write the code for animation, and puts forward the plan of using Animate CC to make the animation efficiently and intuitively, then combine examples to demonstrate some commonly used animation effects, and provide some practical optimization suggestions. I hope you can clearly understand and access this software after reading, to give you some help.






1 thought on “Tencent! Your distance from highly efficient animation is only the distance from this article.”

Comments are closed.