「58UXD」夜校技巧荟Vol.1丨Lottie动效设计指南
江苏龙网_原标题是：夜校技巧荟Vol.1丨Lottie动效设计指南
编者按：近期我们会新增了两个系列专栏 ——「夜校技巧荟」和「夜校公开课」 ，「夜校技巧荟」 主要聚焦于为大家提供丰富、实用的实战设计技巧和工具 ，「夜校公开课」主要给大家提供系统、全面的高阶设计软件（如AE、C4D等）线上培训 教程 。
本期「Lottie动效设计指南」将带领大家了解Airbnb的开源动画库 ， 更多精彩教程会持续更新 ， 敬请期待~
本文图片
01
Lottie 是什么
Lottie 是 Airbnb 发布的开源动画库. 帮助我们实现动效落地 。 同时支持 Android、iOS、React Native 平台（HTML 移动开发框架） 。 可以将我们设计好的动画效果 ， 直接导出 json 文件 ， 让开发直接调用 ， 基本上实现了 0 成本开发量 ， 大大减少了设计师和开发之间的沟通成本 ， 提升团队工作效率 。 Lottie 动画的播放控制 ， 除了常规的控制 ， 还支持进度播放、帧播放 、手势触发 。
本文图片
02
Lottie 怎么用
制作 Lottie 动画 ， 首先你必需使用到两个工具：Ae 和 bodymovin 插件 。 AE 尽量选择 17 以后的版本 ， 然后获取 bodymovin， 该插件的版本非常多 ， 并不一定最新版就适用于你当前的项目 ， 因为前端使用的 bodymovin 解析包可能无法解析你用最新版 bodymovin 插件输出的 json 文件 。 这里推荐两个常用的版本 5.5.8 和 5.6.4版本 。
本文图片
下载地址：https://github.com/airbnb/lottie-web/releases
1.安装插件
安装器安装：
第一种安装方法是通过 Adobe 官方的插件管理工具 ZXP Installer 进行安装：
本文图片
下载地址: https://aes.com/learn/zxp-installer/
【「58UXD」夜校技巧荟Vol.1丨Lottie动效设计指南】
本文图片
手动安装：
第二种安装方法和 PS 软件的插件安装相似 ， 我们需要把下载下来的.zxp 文件重命名为.zip然后解压缩 zip 文件 。 在 Finder(访达)中 使用快捷键 ?+shift+G,输入 ~/Library/Application Support/Adobe/CEP/extensions 到达相应文件夹 ， 将刚刚的解压的文件移入这个文件夹。
本文图片
至此安装结束 ， 我们需要打开 AE 查看插件是否安装 。 在 AE 的“窗口-扩展”中看到 bodymovin 就证明插件已安装成功 。
本文图片
另外别忘了打开 AE-首选项-常规-允许脚本写入文件和访问网络.这样你的插件才可以正常工作 。
本文图片
2.导出动画
在 AE 中完成制作动效后 ， 就可以通过 bodymovin 导出动效了 。 这里我用汉化版的插件来进行说明 。
步骤 1：AE 窗口-扩展中打开 bodymovin 插件 ， 并选中导出合成与存储位置 。
本文图片
推荐阅读
- 老司机的小技巧|国产SUV再度崛起！全独悬＋油耗6.6L，三联屏设计，10.49万起
- 趣头条|都说科三太难，但这些“技巧”没有掌握，就不要再说自己努力过
- 在英雄联盟里面跟别人solo有啥技巧吗一对一的那种〒_〒?
- 你有啥特殊的砍价技巧
- 黄体酮|女性黄体酮不足，有何危害？4个促酮技巧，或能哄子宫“开心”
- Evernote 本地笔记有哪些应用技巧
- 环球车讯网|科二和科三的模拟考试，成为过关“技巧”，有必要花这个钱吗？
- 文章|【作文】高考满分作文技巧
- 宝宝|除了排气之外，你还应该懂的技巧宝宝肠绞痛哭闹不止、睡不好
- 我有特殊沟通技巧|范丞丞在东北冻成范冰冰？范冰冰搞笑回应