作者: 一去、二三里
个人微信号: iwaleon
微信公众号: 高效程序员
终于要介绍动画了,这意味着我们快要把 Canvas 学完了,所以是时候庆祝一下了…
要在 Canvas 上实现动画,需要间隔一定的时间重绘动画的下一帧,而且频率要足够快,这样才能在图像切换时看起来像动画一样。
没明白?那就先来学习一下几个重要的概念 - 动画、帧和帧率,以及它们之间的关系。
完整的思维导图如下:
动画和帧
当我们观看动画时,实际上看到的是一系列静止的图片,这些图片被称为帧。每一帧都是一个完整的图像,通过快速连续地切换和显示这些帧,使我们感知到了流畅和连贯的动画效果。
一般来说,想要画面平滑细腻,帧率(fps - 即:frames per second)应在每秒播放 24 帧及以上。通过调整帧率,可以很容易地控制动画的播放速度和视觉效果。帧率越高,动画就越流畅、越逼真。
来直观感受一下,我们小时候玩的超级玛丽,到底是如何行走的: