Javascript smooth animation implementation principle _ javascript skills

Currently, browsers do not have the anti-aliasing effect (not necessarily in the future), so that changes to the appearance of dom elements will be limited to 1 pixel for the best effect. Of course, considering the bad JavaScript Execution ability of browsers (especially IE), the animation effect must be affected.
The animation effect in the browser depends mainly on js to dynamically change the appearance of Dom elements. However, it is said that css is practicing this capability. (Wait and see ^_^)
We need to change the appearance of dom elements cyclically. This periodicity depends on setTimeout () and setInterval.
Which of them is better? See here (an article written by the author of jquery)
I personally prefer setInterval. setTimeout needs to be called recursively and will be delayed when the thread is busy, which will affect smoothness.
We usually use the node. style attribute to dynamically assign values to update the page performance. We all know that every call to the page will be repainted.
There is also a situation where multiple attributes are changed at the same time:
.......
Node. style. height = 'value1 ',
Node. style. width = 'value2 ',
Node. style. top = value3"
......
In this case,
An animated object is in the motion of each grid, and the page is re-painted three times. The more attributes, the more re-painted each time.
There is no problem in ff and chrome, but there is inevitably a flickering phenomenon in ie.
It would be much better if you could re-map each animation.
In ff, We Can setAtrribute ("style", objStyle); repeat multiple new attributes at a time.
However, style is read-only in ie, and any attempt to assign values will make ie very angry and will not miss you at all.
At this time, a cssText attribute supported by all browsers can solve this problem,
Style.css Text accepts strings of built-in styles and efficiently redraws multiple attributes at the same time.
Therefore, we can use cssText to update multiple attributes of an animation element at the same time, instead of using style. prop to update one by one.
For example: node.css Text = "heigth: 100px; width: 100px; top: 100px ";
Note:
1. The setInterval practice proves that 10 is the limit value and may not be in the future, but it must not be set to be smaller than 10 now. Otherwise, the browser will be exhausted.
2. After finding all the values of the animation path, use setInterval to update the animation regularly. do not perform complex calculations when repainting elements.
3. How many steps are involved to complete an animation? The time parameter of setInterval must be used to adjust the animation to the optimal state;
4. There are mature tween algorithms in flash as to the number of steps, which can be implemented by google.
Finally, I feel that if I am very interested in js animation effects, I still have to hesitate to implement my own "movie" step by step. The fun is here.
When you encounter implementation problems, let's look at how the popular js framework is implemented. This is life ....