前端逐帧动画性能探究和比较

什么是逐帧动画？

首先看一下维基百科中的定义：

定格动画，又名逐帧动画，是一种动画技术，其原理即将每帧不同的图像连续播放，从而产生动画效果。

简单的来说就是：

以一定的速度切换几张连续图像，让它动起来。

 

人眼的物理性能能识别多少帧？

理论上说，帧率越高，动画会越流畅，目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲帧率为 60 帧时动画效果最好，也就是每帧的消耗时间为 16.67ms。

 

直观感受，不同帧率的体验：

• 帧率能够达到 50 ～ 60 FPS 的动画将会相当流畅，让人倍感舒适；

• 帧率在 30 ～ 50 FPS 之间的动画，因各人敏感程度不同，舒适度因人而异；

• 帧率在 30 FPS 以下的动画，让人感觉到明显的卡顿和不适感；

• 帧率波动很大的动画，亦会使人感觉到卡顿。

 

【同屏帧数对比】24/30/50/60帧：https://www.bilibili.com/video/av19011575/

前端方案有哪些？

直接使用动态图像

GIF

GIF是一种位图，最高支持256种颜色。由于这种特性，GIF比较适用于色彩较少的图片，比如页面Loading图、卡通造型、公司标志等等。

 

（圣诞节时保存下来的一张GIF图像）

 

GIF 优缺点

优点：实现小细节动画，成本较低、使用方便、兼容性好。

 

缺点：

画质上，GIF 支持颜色少(最大256色)、Alpha 透明度支持差，图像锯齿毛边比较严重；

交互上，不能直接控制播放、暂停、播放次数，灵活性差；

大小上，GIF 的每帧都要完整地存下来，而且是无损压缩，文件太大

性能上，GIF 会引起页面周期性的绘制 ，性能较差。

为什么 GIF 格式迟迟没有被取代？

原因有以下几点：

几乎所有的主流浏览器都支持GIF（GIF-1987）；

实现起来简单，制作工具多；

APNG/WEBP格式是怎么回事？

我们先来了解一下图像的有损和无损压缩区别

有损压缩——你看到的不一定是真实的

我的理解是有损压缩是在存储图像的时候并不完全真实的记录图像上每个像素点的数据信息，它会根据人眼观察现实世界的特性（人眼对光线的敏感度比对颜色的敏感度要高，生物实验证明当颜色缺失时人脑会利用与附近最接近的颜色来自动填补缺失的颜色）

我们对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量，又不会影响图像的还原效果。

 

 JPG