Javascript smooth animation implementation principle_javascript skills

Of course, considering the poor js execution capabilities of browsers (especially IE), the animation effect will be affected.
Animation effects in browsers mainly rely on js to dynamically change the appearance of Dom elements. But it is said that CSS is developing its abilities in this area. (Wait and see^_^)
We need to periodically change the appearance of the dom element, and this periodicity relies on setTimeout() and setInterval() to complete.
Which one 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 very busy. This affects fluidity.
Usually we use the dynamic assignment of node.style attributes to update the page performance. Everyone knows that the page will be redrawn every time it is called.
There is also a situation of changing multiple attributes at the same time as follows:
.....
node.style.height = 'value1',
node.style.width = 'value2' ,
node.style.top = value3"
......
In this case,
the page will be redrawn 3 times during the movement of each frame of an animated object. The more attributes there are, the more redraws will occur each time.
There is no problem in FF and Chrome, but flickering will inevitably occur in IE.
If you can animate each frame, it will be redrawn. It will be much better.
Under ff we can setAtrribute("style",objStyle); to update multiple attributes at once.
But under ie, style is read-only, and any attempt to assign a value will make ie very angry. , it doesn’t bother you at all.
At this time, there is a property cssText supported by all browsers that can solve this problem.
style.cssText accepts the style string in the embedded format and can be redrawn efficiently at the same time. Multiple attributes.
So, we can use cssText to update multiple attributes of the animated element at the same time, instead of using style.prop to update them one by one.
For example: node.cssText = "heigth:100px; width:100px;top:100px";
Of course, there are the following points to pay attention to for smooth animation:
1. The practice of setInterval has proved that 10 is the limit value, and it may not be certain in the future, but it must not be set less than 10 now. Otherwise, the browser will be exhausted.
2. After calculating all the values ​​of the animation path, use setInterval to update regularly and do not have complicated calculations in the process of redrawing the elements.
3. And there is no need to do so. The total number of steps to complete an animation must be adjusted to the best state with the time parameter of setInterval;
4. Regarding the algorithm of how many steps there are, there is a mature tween algorithm in flash. You can find it by just searching on Google. You can implement it yourself.
Finally, I think if you are interested in js animation effects, why should you hesitate? Just start implementing your own "video" step by step. The fun lies in it.
When implementing the problem, let's take a look at how popular js frameworks do it. This is life....