在 After Effects 中创建和导出 Lottie 动画需要遵循以下步骤和最佳实践：
1. 准备工作
安装 Bodymovin 插件
- 访问 https://aescripts.com/bodymovin/ 下载插件
- 或者在 After Effects 的 Window > Extensions > Browse Extensions 中搜索 Bodymovin
- 安装后，在 Window > Extensions > Bodymovin 中打开插件面板
项目设置
// 推荐的项目设置 - 帧率：30fps 或 60fps - 分辨率：根据目标平台设置（如 1920x1080 或 375x667） - 色彩空间：sRGB - 持续时间：尽量控制在 5-10 秒内
2. 创建动画
基础图层创建
1. 创建形状图层 - 选择形状工具（矩形、椭圆、多边形等） - 在合成中绘制形状 - 添加填充和描边 2. 创建文本图层 - 使用文本工具 - 选择合适的字体（建议使用 Web 安全字体） - 设置字体大小、颜色和间距 3. 创建预合成 - 将多个图层组合 - 右键 > Pre-compose - 勾选 "Move all attributes into the new composition"
动画制作技巧
1. 位置动画 - 选择图层 - 按 P 键打开位置属性 - 添加关键帧 - 使用缓动函数使动画更流畅 2. 缩放动画 - 按 S 键打开缩放属性 - 添加关键帧 - 保持宽高比（取消链接） 3. 旋转动画 - 按 R 键打开旋转属性 - 添加关键帧 - 设置旋转角度 4. 不透明度动画 - 按 T 键打开不透明度属性 - 添加关键帧 - 设置 0-100% 的不透明度
3. 优化动画
简化形状
1. 减少路径点数 - 选择形状图层 - 使用钢笔工具简化路径 - 删除不必要的控制点 2. 合并相似图层 - 将相同类型的图层合并 - 使用预合成减少嵌套层级 3. 避免复杂效果 - 限制使用 After Effects 特效 - 优先使用基础变换属性 - 避免使用 3D 图层（除非必要）
性能优化
1. 减少图层数量 - 合并不需要独立控制的图层 - 使用预合成组织图层 2. 优化关键帧 - 减少不必要的关键帧 - 使用缓动函数减少关键帧数量 3. 降低复杂度 - 简化形状和路径 - 减少动画持续时间 - 避免复杂的表达式
4. 导出设置
Bodymovin 导出配置
{ "version": "5.7.0", "generator": "Bodymovin", "settings": { "compress": true, // 压缩 JSON "demo": false, // 不生成演示页面 "pretty": false, // 不格式化 JSON "hidden": false, // 导出隐藏图层 "ignore": false, // 不忽略任何图层 "hidenull": false, // 不隐藏空图层 "trim": false, // 不裁剪动画 "simplify": true, // 简化路径 "exp": false, // 不导出表达式 "mask": true, // 导出遮罩 "guides": false, // 不导出参考线 "camera": false, // 不导出相机 "effects": false, // 不导出特效 "chars": false, // 不导出字符动画 "shapes": true, // 导出形状 "images": true, // 导出图像 "fonts": false // 不导出字体（使用 Web 字体） } }
导出步骤
1. 选择要导出的合成 2. 在 Bodymovin 面板中点击 "Refresh" 3. 选择导出路径 4. 点击 "Render" 开始导出 5. 等待导出完成 6. 检查生成的 JSON 文件
5. 验证和测试
使用 LottieFiles 验证
1. 访问 https://lottiefiles.com/preview 2. 上传导出的 JSON 文件 3. 检查动画是否正常播放 4. 查看文件大小和性能指标 5. 测试不同平台的兼容性
使用 LottieFiles 优化器
1. 访问 https://lottiefiles.com/tools/optimize 2. 上传 JSON 文件 3. 查看优化建议 4. 应用优化选项 5. 下载优化后的文件
6. 常见问题和解决方案
导出失败
问题：导出时出现错误 解决方案： - 检查 After Effects 版本兼容性 - 更新 Bodymovin 插件到最新版本 - 确保合成设置正确 - 检查图层名称是否包含特殊字符
动画不完整
问题：导出的动画缺少部分内容 解决方案： - 检查图层可见性设置 - 确保所有需要的图层都未被隐藏 - 检查预合成设置 - 验证关键帧范围
文件过大
问题：JSON 文件体积过大 解决方案： - 简化形状和路径 - 减少图层数量 - 降低帧率 - 使用 LottieFiles 优化器 - 压缩图像资源
动画卡顿
问题：动画播放不流畅 解决方案： - 减少动画复杂度 - 降低帧率 - 简化形状和路径 - 减少同时动画的元素数量 - 使用 Canvas 渲染器
7. 最佳实践
设计阶段
1. 保持简单 - 优先使用基础形状 - 避免复杂的路径和效果 - 限制图层数量 2. 考虑性能 - 设计时考虑目标设备性能 - 避免过多的同时动画 - 使用适当的帧率 3. 响应式设计 - 设计可缩放的矢量图形 - 考虑不同屏幕尺寸 - 使用相对单位
动画制作阶段
1. 使用缓动函数 - 使动画更自然流畅 - 避免生硬的线性动画 - 使用标准缓动函数 2. 保持一致性 - 使用统一的动画风格 - 保持一致的缓动和时序 - 遵循品牌设计规范 3. 测试和迭代 - 定期测试导出结果 - 根据测试结果优化 - 保持版本控制
导出阶段
1. 验证导出结果 - 使用 LottieFiles 预览 - 测试不同平台 - 检查文件大小 2. 优化文件 - 使用优化工具 - 压缩 JSON - 优化图像资源 3. 文档记录 - 记录动画参数 - 标注关键帧 - 提供使用说明
8. 高级技巧
使用表达式
// 循环动画 loopOut() // 摆动效果 wiggle(5, 20) // 时间延迟 thisComp.layer("Layer 1").transform.position.valueAtTime(time - 0.5)
使用遮罩和蒙版
1. 创建遮罩 - 选择图层 - 使用形状工具创建遮罩 - 设置遮罩模式 2. 使用蒙版 - 设置图层蒙版属性 - 调整蒙版不透明度 - 添加蒙版动画
使用预合成
1. 组织复杂动画 - 将相关图层预合成 - 创建嵌套动画 - 简化主合成 2. 重用动画 - 创建可重用的预合成 - 在多个合成中使用 - 保持动画一致性
9. 工具和资源
推荐工具
1. LottieFiles - 预览和测试动画 - 优化和压缩文件 - 社区动画库 2. Bodymovin - After Effects 插件 - 导出 Lottie 动画 - 配置导出选项 3. Lottie Editor - 在线编辑器 - 修改动画属性 - 测试动画效果
学习资源
1. 官方文档 - Lottie 官方文档 - After Effects 教程 - Bodymovin 使用指南 2. 社区资源 - LottieFiles 社区 - GitHub 仓库 - Stack Overflow 3. 视频教程 - YouTube 教程 - 在线课程 - 实战案例
通过遵循这些步骤和最佳实践，你可以创建高质量、性能优异的 Lottie 动画，并在各种平台上流畅运行。