web动画知多少

先有问题再有答案

帧动画是一种通过连续展示一系列静态图像（帧）来模拟运动或变化的动画类型。这与传统电影的原理相似，即通过快速播放一连串的单独帧来创造视觉上的连续运动感。

使用图片资源类一般不需要开发,或者通过css&js简单编码即可实现。

在代码层面上，一般控制播放与暂停，实时的交互性较为有限。

CPU

帧动画通常不太会对CPU产生高负荷，因为动画播放本身很少涉及计算密集型的任务。但是，如果有大量大图正在被解码或处理，或者动画和其他DOM元素有大量的交互，这可能导致CPU负载增加。
GPU

在传统的2D帧动画中，GPU主要处理图像的渲染。如果帧率高并且分辨率大，GPU的负荷会显著提高。一旦超出了GPU的处理能力，就会出现掉帧的情况，影响流畅度。
内存

帧动画往往是内存使用的主要瓶颈。高质量的大图需要占用大量的内存空间以保存所有帧的数据。在内存受限的设备上，这可能导致页面崩溃或性能严重下降。
FPS（帧率）

FPS可能受到图像的大小、解码和渲染速度的限制。如果系统无法在每秒钟内按帧动画所需的帧率快速处理和显示所有的图像，那么动画的流畅度将受损，表现为卡顿或延迟。

属性动画一般通过位移、旋转、缩放、斜切、透明度变化的简单动画，这类动画就不需要通过序列帧来实现，而是通过拆解整个动画为一个个单独的元素，每个元素再做单独的属性动画。源代码：codepen.io/ajerez/pen/...

CSS动画：通过@keyframes定义动画序列，改变CSS属性值。相对于JavaScript，CSS动画通常被认为性能更好，因为它们能够利用浏览器的优化。
JavaScript动画库（如GSAP、anime.js等）：提供了高级的API来实现复杂的属性动画，可以控制更广泛的动画属性，提供更复杂的时间线控制等。
SVG动画：SVG允许通过CSS和SMIL（同步多媒体集成语言）对SVG元素属性进行动画处理，例如路径点的移动或颜色的变化。
Lottie动画 ：lottie也可以以帧的形式播放动画，但是在多图的情况下往往内存占用较大不建议这样使用。更好的方式是通过lottie做属性变化 来代替手动开发复杂的css或者js 以此提高开发效率降低实现成本。

这类动画效果可以较为简单也可以极其复杂....这个和开发难度和投入的时间强关联，所以开发成本是和效果有很大关系的。

可以很容易地通过事件和回调函数与用户互动，动态调整动画进程和属性。

CPU

GPU

现代浏览器会尝试利用GPU硬件加速某些类型的动画，例如变换（transforms）和透明度（opacity）变化，这可以减少CPU负担，并提高动画流畅度。
在强制硬件加速的属性（如使用CSS的transform和opacity）上运用动画最小化CPU使用，并且可以提供更流畅的帧率。然而，过度依赖硬件加速也可能导致GPU的负载增加。

内存

动画本身对内存的直接影响通常比较有限，但如果动画涉及创建大量的DOM元素或图形资源，那么内存消耗会增加。
持续的动画可能导致内存占用持续处于高水平，即使用户不再与该页面交互。页面依然不断的计算和重绘，这需要消耗一定的计算资源和内存，尤其是在使用JavaScript实现的复杂或不断运行的动画情况下。

FPS（帧率）

实现方案：

WebGL：使用WebGL API通过浏览器在HTML5 Canvas上渲染交互式3D图形。
Three.js：使用这个JavaScript库简化WebGL的3D模型、场景、动画的创建和渲染过程。
透明视频：透明视频通常是指包含alpha通道的视频文件，这使得视频中的某些部分可以是透明的，从而允许背后的图像或内容显示出来，这种透明视频可以被嵌入Web页面中，与页面背景或其他HTML内容结合，从而达到3D动画效果的展示目的

3D动画通常需要使用WebGL或基于WebGL的库（如Three.js），这要求开发者对3D编程有较深的理解。

可以实现高度的交互，但要同时处理3D模型、视图、光照等方面的变化，编码工作相对复杂

高度依赖GPU，对CPU影响相对较小（除了初始化和物理计算等方面）。内存消耗取决于场景复杂性。FPS会受到硬件能力和场景优化程度的影响，对编码优化和资源管理的要求较高。