css帧动画点击执行一次_前端动画实现方案和性能瓶颈探究

说到前面：这是一篇不是特别严谨的技术型文章，有很多细节性的东西并没有深入研究和试验。只负责搭架子，细节需要自己填充。

文章大概从以下角度介绍

• 动画的基础理论

• 前端动画实现的性能瓶颈

• 前端实现动画的各种方案，方案的优劣

• 总结动画核心，消耗性能的问题

1，首先说一下动画的基础理论

根据人眼的特性，如果一秒播放连续的24张图片，就可以连续起来，形成动画。视频就是基于这个基础理论来的。也就是最低限度，需要1秒24张图片，俗称24帧。然后根据不同的技术方案，和清晰度诉求，会有24帧版的，25帧版的，30帧版的，60帧版的。

所以，在浏览器里想播放流畅的动画，得保证24帧的最低要求。

当然，如果电脑或者浏览器性能够好，可以增加到60帧，效果炫酷，且不用太担心掉帧。

2，有了动画的基础理论，接下来说一下动画性能的瓶颈。

性能瓶颈，核心都是，如何让浏览器迅速的渲染动画，并保证流畅性。影响因素大概有下面几点：

操作系统级的：cpu 的运算能力和核数，gpu 的图像运算能力，内存的大小。

浏览器级的：cpu 的资源占用率，gpu 图像处理能力的运用，页面渲染层数等。

动画层面的：帧率的高低。

由上面的影响因素可知，cpu 的占用率越高，核数越少，gpu 的图像处理能力未启用或 gpu 的图像处理能力越弱，内存的占用率越高，页面渲染层数复杂，帧率越高，等等，会导致动画的播放效果越差，反之亦然。

所以，可以根据产品面向的用户群体，适当的调整这些因素下的某些点，来达到适当的设备性能，使用适当的动画效果。

3，有了前面的基本理论支撑，下面来说一下，实际生产中，我了解到的一些动画实现方案，以及他们各自的优缺点。方便匹配使用场景。

游戏引擎方案。

业内有很多游戏引擎方案，可以用来做h5小游戏，有复杂的用户交互逻辑。常见的有 egret，phaser，Cocos 等，做一些有用户交互的动画非常方便。

游戏引擎操作动画的方式有两种，可以是龙骨，也可以是 swf 转的 json 加图片，通过对 ui 资源的操作，展示各式各样的动画形式。

游戏引擎对设备的要求比较高，虽然做了很多优化，但是，大量的静态资源加载以及 canvas WebGL 的渲染模式，性能开销偏大。如果可以开启 gpu 加速，性能方面应该是可行的

如果设备性能足够，这个是一个不错的选择。

egret 动画引擎，提供了一套开发服务。优点是文档齐全，开发便捷。缺点是，跟现代的工程化开发方式结合度差，模块化开发模式使用不够，也没有出相关的配合组件。

phaser 动画引擎，优点是，很容易融合到现在的工程化开发模式中，缺点是，文档少，大量的英文文档，使用理解起来非常吃力。

js 库(lottie), 非常轻量级的动画渲染库方案。

lottie 是 Airbnb 提供的动画渲染库，非常轻量，js 和静态资源引入，简单的 api 调用就能做到动画的展示。但是动画的操作空间非常有限，适合动画展示和加简单的动画展示。

lottie 需要的动画资源，可以是由 AE 转换出的 json 加图片的形式，也可以是 svga 的方式。

json + 图片形式，对资源的开销也非常大，几乎等价于游戏引擎模式。如果可以开启 gpu 加速，方案是可行的。

svga 的方式，优点是，性能开销比较小，缺点是 ui 方向的输出有一些问题，比较小众，解决方案不多。如果开发时间够，可以配合 ui 去解决问题，性能消耗还是可以降低更多的。

css 属性控制，animation + keyframe 方案。

这个方案就比较常见了，css3 提供了对应的属性，可以控制展示动画。

优点是，如果做一些非常简单的动画，很容易实现，高版本浏览器可自动开启 gpu 加速。 

缺点是，如果无法开启 gpu 加速，动画的展示会非常消耗性能，动画复杂的话，开发成本比较高。

js 配合 timer 实现动画的方案

js 加定时器，应该是最早期的动画展示模式了吧。在非常低的版本浏览器，也能做到良好的兼容性。

优点是兼容性好，动画的帧率可控，在低版本浏览器中或者无法开启 gpu 加速的情况下，能够较少很多的性能开销。可以做为降级方案来使用。

缺点是，动画复杂的话，开发成本比较高，能实现的效果有限。

animationFrame 方案

这个 api 的使用方案，是根据浏览器的刷新频率来的，16.7s，执行一次，也是 js 控制。如果频率打满，60帧，性能开销也很大。如果性能限制比较高，可以降低频率来使用，跟 js + time 的方案相似。

图片序列帧播放方案

序列帧方案，也是通过 js 来控制图片的变化实现动画效果的，如果帧率比较高的话，性能开销也高，降低帧率，也是可行的。

gif 方案

gif 方案就比较容易了，由 ui 出一些对应的动图，放好位置展示就行。优点是，性能开销特别小，缺点是可控性比较差，不过可以配合其他方案去实现效果。

4，罗列了不少动画方案，对比了不少性能的开销。下面来说一下，主要的开销的点。

gpu 加速如果可以开启，cpu 的压力会降低很多。

如果动画的帧率很高，是很消耗性能的。比如 animation 加 keyframe 方案，以及其他的 js 方案，如果帧率调高，性能的消耗里面就会上来，如果帧率调低，性能消耗就会降低。从这个点出发，可以根据产品需求，去调整适合的方案，去调控动画的帧率，去实现各式各样的降级处理方案。

回归标题，文章罗列了6种动画实现方案，以及各个方案的优劣和性能开销，以及实现动画性能开销大的主要原因。开发者可以根据需求的具体情况，以及代码执行的宿主环境，来选择不同的方案来实现动画。也可以区分设备，做最流畅的动画展示和对应的降级方案。

文中有很多东西都是一带而过，细节方面需要开发者更进一步的去研究细节，和计算机最基础的核心概念的学习和深入。

全文无图，最后补一张别的文章中的图，文案不错。