The efficiency of mobile animation

recently work is very busy, long time no post. A few days ago, to a new unit has received a difficult work project. The core point of the technology in this project is the animation efficiency issue. After nearly half a month to solve all kinds of problems are finally done. At the same time, the mobile browser has a higher understanding of the ability to interpret animation. I would like to share with you here. There is a lack of the Welcome to correct!

do mobile front of the pot friends should all know, animation effects, especially compatible with the Android system, and the Internet side compatible with IE6 as troublesome. A lot of good ideas are not compatible with the Android system and died. In the final analysis, the performance of the Android browser is a problem. Aside from this, the hardware of an Android phone can throw an Apple street. But the opposite is true on the browser. Now Android 4.X has been developed. The memory that can be allocated to the browser is still little poor! Seemingly less than 10%; So some very smooth animations run a little bit of pressure on iOS. But running the card on Android is killing me! Hope Android 5.0 can be more to the point within the browser, as far as possible to improve the browser performance ratio.

at the end of the move, using CSS3 animations is much more efficient than jquery animations on the mobile animation effect. It's especially noticeable on Android phones! So the moving side animation takes the CSS3 animation as the priority.

we know that CSS3 animations fall into two main categories: animation and transform, which are used separately according to the actual project requirements. The former is a keyframe animation, and the latter is a transform animation. Key-frame animations are useful for looping animations. Transform animations are used for one-time animations. Of course, this is not absolute. The two can be converted to use each other. In fact, the two on the mobile side of the more provincial browser performance, I refer to a large number of documents have not come to any conclusions. Anyway, personally, I think it's almost. The key is whether the code is written reasonably. method is applied properly.

make some of your own ideas by doing a lot of testing on this actual project. Everyone is for reference only.

first, let 's talk about transform:

For example, there is a requirement, I need to move a whole element from bottom to top, there are many ways to implement it. For example: To make an element move, we need to add an original animation style to the element.
#erjidiv {
Position:absolute;
width:100%;
heigth:600px;
top:0px;
left:0px;
 
-webkit-transform:translatey (100%);
-webkit-transition:-webkit-transform 0s 0s;
}
You can then modify this style with some event interfaces to
$ ("#erjidiv"). CSS ({
" -webkit-transform": "Translatey (0%)",
" -webkit-transition": "-webkit-transform 0.5s ease-out 1s",
})

This is done by shifting the y-axis translatey. The delay of 1s animation is completed by a fast slow way.

The CSS3 style used in the Internet. Everyone is accustomed to using "-webkit-transition": "All 0.5s ease-out 1s",
but this is not recommended for performance issues on the mobile side. All contains all the attributes. If only the animation is used in one place. Then there is not much difference, at least the naked eye can not see it. But if multiple elements are animated at the same time. Using the all property will cause a lag behavior. And only write to change a property, then the phenomenon basically can be eliminated. Especially on Android. So I'm only using the-webkit-transform property here.

There are children's boots will ask, I change its top coordinate value is not the same can be moved, such as:

#erjidiv {
Position:absolute;
width:100%;
heigth:600px;
top: -600px;
left:0px;
 
-webkit-transition:top 0s 0s;
}


$ ("#erjidiv"). CSS ({
" top": "0px",
" -webkit-transition": "Top 0.5s ease-out 1s",
})

Yes, this can still be achieved. But this is obviously not high on animation efficiency. I refer to a number of articles, saying that this effect is not as efficient as the jquery animation. I did not compare this with the jquery animation. But this is compared with the former. It's really not as smooth as the former. In particular, multiple elements simultaneously perform animations at the same time. In addition, the CSS base properties such as top, left, width, height, and so on, are less likely to participate in the animation without the necessity of moving the end. It really does affect animation efficiency. We use CSS3 's-webkit-transition way to animate. Its good match should also be the CSS3 attribute-webkit-transform, which combines perfectly to maximize the animation effect. Reduce browser memory loss.

In addition, there are children's boots are likely to use the Internet animated way to do mobile animation (I have done this before ...) For example, when an element is in a stationary state, style A is used. When it: hover, style B is used. This makes the animation possible. It is also possible to move this animation in the same way as the mobile side. The principle is nothing more than a two-style toggle. So according to this principle the above requirements can also be turned into this:




. style1{
Position:absolute;
width:100%;
heigth:600px;
top:0px;
left:0px;
 
-webkit-transform:translatey (100%);
-webkit-transition:-webkit-transform 0s 0s;
}


. style2{
Position:absolute;
width:100%;
heigth:600px;
top:0px;
left:0px;
 
-webkit-transform:translatey (0%);
-webkit-transition:-webkit-transform 0.5s ease-out 1s;
}

$ ("#erjidiv"). Removeclass ("Style1"). AddClass ("Style2");

this way, you can also implement the above requirements by removing and adding styles. So is this a more efficient approach?
through actual testing, when multiple elements are animated at the same time. It is also the first way to use modifying its style to be more efficient than adding and removing styles. Therefore, if the use of-webkit-transform this animation, the best solution is the first, using JS to modify its animation style is the most efficient. Other methods are not efficient. It is not recommended to use on the mobile side.


second, say Animation:

in a strictly speaking sense. Transform mode is not an animation. Can only be regarded as transformation. and animation is the authentic animation. Using animation to animate, we have to mention Keyframe @-webkit-keyframes. The animation is formed by the process setting between its starting and ending states. The use of key-frame animations is not illustrative. Baidu has a lot of a bit.

Animation Animation I personally understand many of the places used for looping animations. The use of this animation requires the highest efficiency. The advantage is that you can add any action state. The disadvantage of individuals is that it is not easy to control. The biggest drawback is that using JS cannot get the animation state parameters inside the keyframe. I want to dynamically change the number of changes in the keyframe, but I can't. The values in this can only be written dead or used as percentages instead of specific values. Under the various adaptation requirements of the mobile side. It is difficult to have too flexible a change. However, there seems to be a JS plugin can write key-frame animation. But I don't have this side because of the time.
A detailed study of the surface. If any of my colleagues have experience in this area, we can enlighten one or two.

The reason that it is not easy to control is not a good starting point. The way I know now is that when I start a keyframe animation, I need to add a style to the element temporarily.

This style writes-webkit-animation-name:xxx that reference the Keyframe animation, and then sets the period, the number of times to play, the mode of change, and so on. For example:

. Fangda {
-webkit-animation-name:fangda;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:ease-out;
-webkit-animation-iteration-count:infinite;
}

@-webkit-keyframes Fangda {
0% {-webkit-transform:scale}
50% {-webkit-transform:scale (1.2,1.2);}
100% {-webkit-transform:scale);}
}


$ ("#erjidiv"). AddClass ("Fangda");

this way, when I add a style to an element, the animation starts. This approach actually goes back to the third method that was used when talking about the transform approach. When I use several key-frame animations in a flash, it is more efficient to use this addition without modifying its style. Will cause the phenomenon of instant lag. This is especially noticeable on Android phones. But the first method can be used to modify the style of JS. Key-frame animations are not modified.

later in order to improve performance. I think it's better to add the style first. But let me pause it first. When you want it to work, you think of the Animation-play-state property in the Keyframe animation to control the pause and run. After testing, sure enough. Test System (android4.0 above, IOS6 above). By comparing this control pause and then starting it more efficiently than a single add style.

. Fangda {
-webkit-animation-name:fangda;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:ease-out;
-webkit-animation-iteration-count:infinite;
-webkit-animation-play-state:paused;
}


@-webkit-keyframes Fangda {
0% {-webkit-transform:scale}
50% {-webkit-transform:scale (1.2,1.2);}
100% {-webkit-transform:scale);}
}

$ ("#erjidiv"). CSS ("-webkit-animation-play-state", "Running");//restart On Demand


the above correction can greatly improve the effect of the CSS3 animation on the mobile browser. Even in the Android browser can be a better embodiment.

Finally, say another personal experience, considering the performance of the mobile browser. Try to avoid multiple animations at the same time. Keyframe animations are not used, or they are paused. Either delete the style directly. Individuals are more inclined to the latter. Sometimes in order to improve the smoothness. If necessary, turn on its render 3d functionality. In the global style, set the following style:

-webkit-transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
-webkit-transform:translate3d (0,0,0)

In addition, the browser during the loading process will have a pre-existing rendering function (the jargon of what is forgotten, the personal name of the easy to understand), is to trigger some animation style, the best browser has been pre-rendered, so that in the implementation of the time will be more smooth. (Because the rendering time is saved) This is a good explanation of why the addition of the way has not changed its style of high efficiency! When you do not add an animated style. The browser is not rendered beforehand. It takes time to add a temporary render and then perform the animation when it is added. The change of style is that the browser has already rendered the animation in advance, except that it is not executed or is in a paused state. You can start right away when you need it. So it's because of this pre-existing rendering feature. In the right way, you can shorten the browser rendering time and reduce the likelihood of the lag! True to improve the efficiency of mobile browser CSS3 animation!

-Turn from (front net W3cfuns-oceanjauh)

The efficiency of mobile animation