各种动画分类
| 大分类 | 小分类 | 简介 | 优点 | 缺点 |
|---|---|---|---|---|
| CSS 动画 | - animation + @keyframes - transition | animation + @keyframes 比 transition 灵活 Animate.css 采用了纯 CSS 实现 | - 易用 - 可以启用 GPU 加速 - 声明式 | - 不能动态修改 |
| JS 控制 | setInterval, setTimeout | jQuery 的 animate 方法使用 | - 易用 - 兼容性好 | - 精度不够 - 通常会导致页面频繁性重排重绘 |
| JS 控制 | requestAnimationFrame | - 流畅 | - 执行时间无法控制 | |
| JS 控制 | WAAPI | Web Animations API, 可以替代 CSS animation | - 灵活, 适用于复杂逻辑 | - 兼容性不高 |
| 原生格式 | GIF | Graphics Interchange Format, 图像互换格式, 本质上是会动的图片 | - 实现简单 | - 体积大, 压缩后会失帧 - 不支持 Alpha 通道 |
| 原生格式 | APNG | Animated PNG, 是 PNG格式的位图动画扩展. | - 支持 Alpha 通道 - 体积比 GIF 小 | |
| 原生格式 | WebP | 谷歌研发 | ||
| 原生格式 | AVIF | Chrome 95 以上支持 | - 体积小 | - 兼容性不高 |
| 原生格式 | MP4 | - 体积小 - 支持效果多 | - 需要借助 Canvas 以解决 alpha 通道问题 - 移动端无法自动播放 | |
| 原生格式 | SVG | 通过 SVG 内部的 SMIL 在 Chrome45 后被弃用 | - 矢量图形，不受像素影响 - 自定义性高, 易于换色 | |
| 自定义格式 | 序列帧 | 静态的图片文件 + CSS animation | ||
| 自定义格式 | SVGA | 多平台动画格式 | - 多平台支持 | 比 MP4 能实现的效果少 |
| 自定义格式 | PAG | 腾讯开发，https://pag.art/ Web 使用 WebAssembly | - 多平台支持 - 体积小 - AE 支持好 | |
| 自定义格式 | VPA | 腾讯/企鹅电竞开发，简介，基于 MP4 | - 多平台支持 - 体积小 - 支持 Alpha 通道 | |
| 自定义格式 | Lottie | json 格式, 提供了 SVG, Canvas 和 HTML 三种渲染模式, 一般使用第一种或第二种 | - 多平台支持 | |
| 自定义格式 | Spine | 骨骼动画格式 | ||
| WebGL | 多用于游戏引擎, three.js | - 学习成本高 - threejs 的 WebAssembly 版本还不成熟 |
渲染模式
- 图片
- Video 标签
- SVG
- Canvas（Canvas 2D & WebGL）
- HTML: 通常通过更改 CSS 的 transfrom 属性
驱动方式
- 文件格式本身
- JS
- CSS 动画
CSS 动画
- transition: 定义过渡
- transition-property: 应用 transition 属性的名称: all, transfrom, margin-right, width, none…
- transition-duration: transition 所需的时间: 0s, 3s, 3ms…
- transition-timing-function: transition的状态变化节奏: ease, ease-in, ease-out, ease-in-out, linear…
- transition-delay: transition 效果开始作用之前需要等待的时间: 0s, 3s, 3ms…
- 可以利用
transitionend事件监听 transition 完成
- animation(需要与 @keyframes 配合), 比 transition 更灵活
- animation-name: 指定应用的一系列动画，每个名称代表一个由
@keyframes定义的动画序列 - animation-duration: 动画周期的时长: 0s, 3s, 3ms…
- animation-timing-function: 每一动画周期中执行的节奏: ease, ease-in, ease-out, ease-in-out, linear…
- animation-delay: 动画开始之前需要等待的时间: 0s, 3s, 3ms…
- animation-iteration-count: 动画在结束前运行的次数: 1, 2, 2.3, infinite…
- animation-direction: 指示动画是否反向播放: normal | reverse | alternate | alternate-reverse
- animation-fill-mode: none | forwards | backwards | both
- forwards: 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义)
- animation-name: 指定应用的一系列动画，每个名称代表一个由
- transform(不属于动画范畴, 但是经常和动画一起用, 所以写到这里了): 修改CSS视觉格式模型的坐标空间
- transform-origin: 更改一个元素变形的原点,
- 可以有 x, y, z 轴三个参数
- 像 left 这种的属于简写, 等于 0%, center 等于 50%
- 默认应该是在元素中心
- transform-origin: 更改一个元素变形的原点,
其他
- 缓动函数速查表
- GSAP https://greensock.com/gsap/ 补间动画库（在使用gsap编写动画时只需要关注元素的开始状态和结束状态即可）
性能
所有非 JS 的帧率貌似都不容易通过 RAF 的形式拿到