Author: Yiqu, Ersanli
Personal Wechat ID: iwaleon
Wechat Official Account: Efficient Programmer
Animation is finally being introduced, which means we're almost done with Canvas, so it's time to celebrate...
To implement animation on Canvas, you need to redraw the next frame of the animation at a certain interval, and the frequency must be fast enough, so that it looks like animation when the image is switched.
not understand? So let's first learn a few important concepts - animation, frame and frame rate, and the relationship between them.
The complete mind map is as follows:
animations and frames
When we watch animation, what we actually see is a series of still pictures called frames. Each frame is a complete image, and by switching and displaying these frames in rapid succession, we perceive smooth and coherent animation.
Generally speaking, if you want the picture to be smooth and delicate, the frame rate (fps - ie: frames per second) should be 24 frames per second or above. By adjusting the frame rate, it is easy to control the playback speed and visual effect of the animation. The higher the frame rate, the smoother and more realistic the animation.
Let's intuitively feel how the Super Mario we played when we were young walks:
