4、动效设计工具：After Effects基础、Lottie与Bodymovin插件、动效导出格式对比
好，咱们进入第四讲。这一章聊的是工具链，说白了就是「用什么做」和「怎么导出来」。
我见过不少设计师，在AE里把动效做得天花乱坠，结果到了开发手里根本跑不起来。嗯，这里要注意——车载仪表盘的动效，不是「好看就行」，而是「能跑、跑得稳、跑得准」。
4.1 After Effects 基础操作
After Effects，简称AE，是动效设计的标配。我个人习惯用2022以上的版本，对Lottie的支持更友好。
在车载仪表盘项目中，你主要用到这几个功能：
- 形状图层：仪表盘里的指针、刻度、图标，基本都是形状图层做的。别用像素图，放大缩小会糊。
- 关键帧动画：位置、旋转、缩放、透明度，这四个属性够你搞定90%的动效。
- 表达式：比如让指针跟着数值变化，用
linear()或ease()就能搞定。
我的小技巧： 在AE里做动效时，先把帧率设为60fps。车载屏幕大多是60Hz刷新率，你做成30fps会显得卡顿。
举个例子，做一个转速表指针从0到6000转的动画：
// 指针旋转表达式
// 假设转速值从0到6000，对应角度从-120°到120°
rot = linear(转速值, 0, 6000, -120, 120);
value + rot;这样写的好处是，你只需要改「转速值」这个变量，指针就会自动跟着转。我在做某款新能源车的仪表盘时，就用这个方式，一口气做了8个指针动画，效率很高。
4.2 Lottie 与 Bodymovin 插件
Lottie是什么？说白了，它是一个能把AE动画变成JSON文件的工具。这个JSON文件很小，几十KB，手机或车机直接解析就能播放。
Bodymovin是AE的一个插件，负责把动画导出成Lottie格式。安装很简单：
- 打开AE，进入「窗口」→「扩展」→「Bodymovin」。
- 选择你要导出的合成。
- 点击「渲染」，生成JSON文件。
注意： 不是所有AE效果都能导出！我曾经踩过坑——用了「高斯模糊」和「投影」效果，结果在车机上直接崩溃。Lottie只支持形状图层、路径、颜色、透明度、位置、旋转、缩放这些基础属性。
Lottie在车载场景下的优势很明显：
- 文件小，加载快。一个仪表盘动效通常不超过100KB。
- 支持交互。你可以通过代码控制动画的播放、暂停、跳转。
- 跨平台。Android、iOS、Web、车机系统都能用。
但也要注意它的限制：
- 不支持3D图层。别想着在Lottie里做三维旋转。
- 不支持表达式。AE里的表达式会被忽略，你得在代码里重新实现。
- 不支持文本。如果你用了文字图层，导出后可能乱码。
4.3 动效导出格式对比
车载仪表盘的动效导出，不是只有Lottie一种选择。我整理了一张对比表，你一看就明白：
| 格式 | 文件大小 | 性能 | 交互支持 | 适用场景 |
|---|---|---|---|---|
| Lottie (JSON) | 小 (10-100KB) | 高 | 强 | 图标、指针、进度条 |
| GIF | 大 (1-5MB) | 低 | 无 | 不推荐，除非兼容性要求 |
| 视频 (MP4) | 大 (5-20MB) | 中 | 无 | 启动动画、欢迎页 |
| SVG动画 | 小 (5-50KB) | 高 | 强 | 简单图形、图标 |
| Canvas (JS) | 小 (代码) | 极高 | 极强 | 复杂动效、自定义渲染 |
我个人最推荐的是Lottie。为什么？因为它在文件大小、性能和交互支持之间取得了最好的平衡。GIF就别用了，颜色少、文件大、还卡。MP4适合那种一次性播放的启动动画，但没法交互。
避坑指南： 我曾经在一个项目里用了SVG动画做仪表盘指针，结果在低端车机上渲染时，CPU占用飙到80%，直接导致系统卡顿。后来换成Lottie，CPU占用降到15%以下。所以，性能测试一定要做。
4.4 导出流程与注意事项
最后，我总结一下完整的导出流程：
- 在AE里完成动效设计，确保只使用Lottie支持的属性。
- 安装Bodymovin插件，选择合成，点击渲染。
- 用Lottie官方预览工具（LottieFiles）检查JSON文件。
- 在车机或手机上做性能测试，确保帧率稳定在60fps。
- 如果发现卡顿，检查是否有过多的路径点或复杂的渐变。
我的习惯： 每次导出后，我都会用LottieFiles的「性能分析」功能跑一遍。它会告诉你哪些图层最耗性能，方便你优化。
嗯，这一章的内容就到这里。工具是死的，人是活的。你只要记住：车载仪表盘的动效，核心是「稳」和「准」。别为了炫酷牺牲性能，那不值得。