前端工程师手册

动画类型

技术分类

todo: 优缺点的比较需要自己再通过代码进一步验证。

JavaScript

通过定时器刷新,间隔来改变元素样式。

CSS3

transition和animation。

HTML5

使用HTML5提供的绘图方式:

  • canvas
  • svg
  • webgl

动画基本属性

绘制频率

页面每一帧变化都是系统绘制出来的(GPU或者CPU)。它的最高绘制频率受限于显示器的刷新频率(而非显卡),所以大多数情况下最高的绘制频率只能是每秒60帧(frame per second,简称fps),对应于显示器的60Hz。

刷新频率

图像在屏幕上更新的速度,也就是屏幕上的图像每秒出现的次数,单位是Hz,刷新频率越高,屏幕上图片闪烁感就越小,稳定性也就越高。人的眼睛不容易察觉75Hz以上刷新频率带来的闪烁感。

硬件加速

硬件有三个处理器:CPU、GPU和APU(声音处理器)。他们通过PCI/AGP/PCIE总线交换数据。GPU在浮点运算、并行计算等部分计算方面,明显高于CPU的性能。

fps

GPU渲染画面的频率, 游戏里谈到掉帧,是指GPU渲染画面频率降低。比如跌落到30fps甚至20fps,但因为视觉暂留原理,我们看到的画面仍然是运动和连贯的。

Hz

显示器刷新屏幕的频率

参考资料