Lottie 支持哪些动画类型和效果？
Lottie 到底支持哪些动画类型和效果？
Lottie 是 Airbnb 开源的跨平台动画渲染库，能将 After Effects 导出的 JSON 文件在 Web、iOS、Android 等平台上高效播放。但 Lottie 并不支持 AE 的所有特性——了解它的能力边界，才能在设计和开发中少走弯路。
基础变换动画
基础变换是 Lottie 支持最完整的动画类型，涵盖图层的四个核心属性：
- 位置（Position）：控制图层在画布上的 X/Y/Z 坐标，支持多关键帧和贝塞尔曲线插值。这是最常用的动画属性，从元素位移到弹跳效果都依赖它。
- 缩放（Scale）：控制图层的 X/Y/Z 缩放比例，100 表示原始尺寸。可以实现放大、缩小、拉伸等效果。
- 旋转（Rotation）：控制图层绕锚点旋转的角度，支持 0-360 度及更多圈数。常用于图标旋转、指针转动等场景。
- 不透明度（Opacity）：控制图层的透明度，0 为完全透明，100 为完全不透明。淡入淡出是最典型的应用。
这四个属性是 Lottie 动画的基石，所有平台均完整支持，且性能开销极小。
形状动画
Lottie 对矢量形状的动画支持非常丰富：
- 路径变形（Path Animation）：通过关键帧插值路径的顶点（v）、入贝塞尔手柄（i）、出贝塞尔手柄（o），实现形状之间的平滑变形。这是 Lottie 最强大的动画能力之一，液体变形、图标切换等效果都靠它实现。
- 圆角矩形（Rectangle）：支持尺寸和圆角半径的动画，圆角从 0 变到正值可以实现从方到圆的过渡。
- 椭圆（Ellipse）：支持尺寸动画，可以实现圆形呼吸、椭圆拉伸等效果。
- 星形和多边形（Polystar）：支持点数、外径、内径等属性的动画，可以实现星形旋转展开等效果。
- 修剪路径（Trim Path）：这是经常被忽略但非常实用的功能——可以控制路径的起止百分比，实现描边绘制、进度条、环形加载等效果。
填充与描边动画
颜色是 Lottie 动画的重要组成部分：
- 填充颜色（Fill）：对形状的内部颜色做动画，支持纯色和关键帧颜色过渡。比如按钮从灰色变绿色表示启用状态。
- 描边颜色（Stroke）：对形状的边框颜色做动画，同时支持描边宽度的动画。
- 渐变填充（Gradient Fill）：支持线性和径向渐变，可以动画化渐变的色标位置和颜色值，实现流光、极光等视觉效果。
- 渐变描边（Gradient Stroke）：与渐变填充类似，应用于描边。
- 不透明度动画：填充和描边各自支持独立的不透明度属性，可以实现颜色的淡入淡出。
遮罩与蒙版
遮罩是 Lottie 中实现复杂视觉效果的常用手段：
- 遮罩路径（Mask Path）：用一条路径定义可见区域，支持 Add、Subtract、Intersect、Difference 等多种混合模式。通过动画化遮罩路径，可以实现擦除、揭幕、窗口移动等效果。
- 遮罩不透明度（Mask Opacity）：控制遮罩本身的透明度，实现渐变遮罩效果。
- 遮罩扩展（Mask Expansion）：扩展或收缩遮罩的边缘，常配合其他属性做平滑过渡。
注意：Lottie 支持 Alpha 遮罩和 Alpha 反转遮罩，但不支持 Luma 遮罩。
轨道遮罩（Track Matte）
轨道遮罩是将一个图层的 Alpha 通道作为另一个图层的遮罩：
- Alpha Matte：用上方图层的 Alpha 通道遮罩下方图层，实现文字内嵌图片、文字揭示动画等效果。
- Alpha Inverted Matte：反转 Alpha 通道的遮罩效果。
轨道遮罩在文字动画和图标动画中应用非常广泛，主流平台均支持，但部分浏览器在 Canvas 渲染模式下可能有兼容性问题。
父子层级（Parenting）
Lottie 支持图层之间的父子关系——子图层继承父图层的所有变换属性。这意味着：
- 移动父图层时，子图层会跟随移动。
- 旋转父图层时，子图层会围绕父图层的锚点旋转。
- 一个图层只能有一个父图层，但一个父图层可以有多个子图层。
父子层级是构建复杂动画结构的基础，比如人物骨骼动画、机械联动效果都依赖它。
预合成（Precomposition）
预合成相当于"动画中的动画"——将多个图层打包成一个独立的合成，然后在主合成中作为一个图层使用。Lottie 完整支持预合成，这意味着：
- 可以将复杂的动画逻辑封装在预合成中，保持主时间轴清晰。
- 预合成可以嵌套使用，支持多层级的合成结构。
- 预合成内部的时间线独立于主时间线，可以通过时间重映射控制播放。
文本动画
Lottie 对文本的支持有一定限制，但基本功能可用：
- 文本内容：支持静态文本显示，包括字体、字号、对齐方式、行高、字间距等属性。
- 文本动画：可以通过逐字（Per-character）动画实现打字机效果、文字逐字飞入等。
- 文本颜色：支持填充颜色的动画。
需要注意：Lottie 对文本动画的支持不如 After Effects 原生丰富，复杂的文本动画器（如 Range Selector）支持有限。中文字体需要确保客户端已安装对应字体，或使用图片替代方案。
3D 变换
Lottie 支持基本的 3D 变换属性：
- X 轴旋转（Rotation X）：绕 X 轴旋转，实现前后翻转效果。
- Y 轴旋转（Rotation Y）：绕 Y 轴旋转，实现左右翻转效果。
- Z 轴旋转（Rotation Z）：即普通 2D 旋转。
- 3D 位置：支持 Z 轴位置属性。
但要注意，Lottie 的 3D 是伪 3D——它不包含真正的 3D 渲染管线，没有光影、透视网格等效果。3D 变换本质上是对 2D 图层做仿射变换的模拟。
时间重映射（Time Remapping）
时间重映射允许你对预合成的播放时间做动画控制：
- 可以加速、减速、倒放预合成内的动画。
- 可以实现动画暂停后再继续播放的效果。
- 配合表达式可以实现循环播放（但表达式支持有限，建议用关键帧实现）。
这是制作交互式动画的关键功能——比如用户点击时，动画从特定帧开始播放。
缓动函数（Easing）
Lottie 完整支持 After Effects 的关键帧缓动：
- 贝塞尔缓动：通过入贝塞尔手柄（i）和出贝塞尔手柄（o）定义自定义缓动曲线，对应 CSS 的
cubic-bezier()。 - 线性（Linear）：匀速变化。
- 定格（Hold）：关键帧之间不做插值，直接跳变，实现逐帧动画效果。
- 空间贝塞尔（Spatial Bezier）：控制位置关键帧在空间中的运动路径曲线。
缓动函数对动画的质感影响极大——同样的关键帧，不同的缓动曲线会产生完全不同的视觉感受。
Lottie 不支持的重要特性
了解不支持的特性同样重要，避免在设计阶段做无用功：
- After Effects 表达式（Expressions）：Lottie 不支持 AE 表达式。
wiggle()、loopOut()等表达式在导出后不会生效，必须转化为关键帧。 - 效果菜单中的滤镜：高斯模糊、阴影、发光等 AE 内置效果不支持。如需模糊效果，可在设计时直接制作模糊状态的图层。
- 混合模式（Blend Modes）：除正常模式外，叠加、正片叠底等混合模式不支持。
- Luma 遮罩：仅支持 Alpha 遮罩，不支持基于亮度的遮罩。
- 3D 图层和摄像机：支持 3D 变换属性，但不支持 3D 图层、摄像机和灯光。
- 视频图层和音频图层：Lottie 只处理矢量动画，不支持嵌入视频和音频。
- 部分文本动画器：Range Selector 等高级文本动画功能支持有限。
dotLottie 新特性（2025-2026）
Lottie 生态正在快速发展，dotLottie 格式带来了新能力：
- 状态机（State Machines）：在动画文件中定义交互逻辑，无需编写代码即可实现点击切换、悬停响应等交互。支持 Web、iOS、Android 原生 SDK。
- 主题变量（Theming）：通过变量替换动画中的颜色和文本，同一动画可适配不同品牌主题。
- 多动画打包：一个 dotLottie 文件可包含多个动画，减少网络请求。
- AI 动画生成：Lottie Creator 已集成 AI 工具，可直接生成 Lottie 动画。
实际开发建议
在实际项目中使用 Lottie 动画，有几个关键点值得注意：
渲染器选择：Web 端 lottie-web 提供三种渲染器——SVG 兼容性最好，Canvas 性能更优，HTML 适合简单动画。复杂动画建议优先 SVG，动画元素超过 100 个时考虑 Canvas。
性能优化：避免单个动画文件过大，超过 100KB 的 JSON 文件应考虑拆分。减少图层数量和关键帧密度，善用预合成复用动画。
设计协作：设计师应在 AE 中全程使用 Lottie 支持的特性，用 Bodymovin 插件边做边预览，避免最终导出时才发现特性不支持。LottieFiles 提供的在线预览工具可以快速验证动画兼容性。
交互控制：通过 lottie-web 的 API 可以控制动画的播放、暂停、跳帧、速度和方向。结合 State Machines 可以实现更复杂的交互逻辑，减少前端编码量。
Lottie 的核心价值在于让设计师和开发者各司其职——设计师在 AE 中创作动画，开发者只需加载 JSON 文件即可还原，零偏差的动画交付大幅提升了协作效率。掌握 Lottie 支持和不支持的特性清单，才能在设计和开发之间建立清晰的契约。