摘要：Lottie 动效设计完全指南（基础篇）\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E2. 动态图标\u002F按钮\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fbaa449903aad47978a1897a836d43c9c\" img_width=\"1200\" img_height=\"400\" alt=\"比阿里犸良还强大。Lottie 动效设计完全指南（基础篇）\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E4. 加载\u002F下拉刷新\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F42fa06646885427cb0ab121d5a99fea3\" img_width=\"560\" img_height=\"420\" alt=\"比阿里犸良还强大。

"\u003Cdiv\u003E\u003Cp\u003E动效设计，是 UI 设计当中不可或缺的一环。大家对动效的认知也从最初认为动效只是为了美观酷炫，到逐渐理解了动效对于提升用户体验和产品需求的重要作用。而导致这种认知的转变，相当一部分原因是因为硬件性能的发展和动效输出方式的优化。\u003C\u002Fp\u003E\u003Cp\u003E因为动效实现的过程就是设计师和开发之间互相博弈的过程。设计师可能通过 AE 或者其他工具做出炫酷的效果，和开发对接就懵了。要么无法实现，要么极其复杂。毕竟开发工程师要通过代码把动效实现出来，设计师得用开发所能理解的语言来描述。就如同你能完美地解出一道数学题一样，让你把解题思路教给别人，你可能就没那么顺畅了。一方面取决于你的表述能力，而更重要的是对方的理解能力。过去所广泛采用的通过动效标注输出给开发的方式，都存在还原度的问题。很多时候还原度达到 80% 可能都算比较好的了。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F1d64a286635c4579a15d4fffc4cdd001\" img_width=\"1005\" img_height=\"513\" alt=\"比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E而今天要说到的 Lottie 不仅可以 100% 还原动效，而且无需动效标注。直接通过 AE 输出动效文件给开发。开发人员直接调用，然后完美还原。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003ELottie是什么？\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003ELottie 是 Airbnb 开源的一个动画渲染库，同时支持 Android、iOS、React Native 平台。Lottie 支持渲染播放 AE 动画。通过 AE 插件 bodymovie 导出 json 文件作为动画数据，其工作流程如下：\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F581dd112f40444059eaa0839a5264230\" img_width=\"975\" img_height=\"432\" alt=\"比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E是不是听起来很心动？其实 Lottie 已经火了一两年了，很多人应该也看了一些介绍。希望工作项目中经常涉及到动效设计，但是还在用老方法的同学。可以尝试使用 Lottie 帮助动效落地，提升团队工作效率和个人影响力。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003ELottie有什么用？\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003ELottie 可以应用在 UI 设计的很多场景中。以下举出几个常用例子。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E1. 动态启动页\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002F77e6fd594995436dbf3793868c23e789\" img_width=\"300\" img_height=\"653\" alt=\"比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E2. 动态图标\u002F按钮\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fbaa449903aad47978a1897a836d43c9c\" img_width=\"1200\" img_height=\"400\" alt=\"比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E3. 空页面\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F43b45fa33e2e4307ad5e7b02f198842e\" img_width=\"800\" img_height=\"600\" alt=\"比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E4. 加载\u002F下拉刷新\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F42fa06646885427cb0ab121d5a99fea3\" img_width=\"560\" img_height=\"420\" alt=\"比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E5. Banner\u002F弹框\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fd1ee4854e61549a0a67f9aba9520f4a0\" img_width=\"1000\" img_height=\"530\" alt=\"比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E6. 表情\u002F礼物\u002F动态贴纸\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fb041cd7b053f4e508587c6d3ec08b25f\" img_width=\"800\" img_height=\"328\" alt=\"比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E以上仅列举了部分常用案例，其实 Lottie 的应用场景远不止这些。在 APP 的多个模块中都可以运用，那么我们要如何将 Lottie 运用在自己的工作项目中呢？那就要了解 Lottie 的原理了。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003ELottie的原理是什么？\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E前面已经提过 Lottie 是 Airbnb 开源的一个动画渲染库。我们可以理解为它是一个多功能的视频播放器，开发人员需要将这个播放器部署到相应的环境中。然后设计人员提供视频（动效文件）给开发人员，让开发人员按照要求播放视频文件，即可完成动效的应用。\u003C\u002Fp\u003E\u003Cp\u003ELottie 动画的播放控制，除了常规的控制，还支持进度播放、帧播放。以一个动态按钮的切换为例，方便大家理解。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002Ff1b5e817a80346a8977e428004b02001\" img_width=\"800\" img_height=\"600\" alt=\"比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E△ 用 Swift 制作一个漂亮的汉堡按钮过渡动画\u003C\u002Fp\u003E\u003Cp\u003E上图所示为一个菜单\u002F关闭按钮的动态切换。\u003C\u002Fp\u003E\u003Cp\u003E假设该按钮动效一共10帧，整个按钮切换分为两部分，第一部分：从菜单切换到关闭（1-10帧）；第二部分：从关闭切换到菜单（10-1）。我们可以让开发通过以下控制方式，完成我们想要的效果。\u003C\u002Fp\u003E\u003Cp\u003E按钮动效默认显示第1帧（菜单状态），点击按钮以后开始播放动效，动效播放到第10帧的时候停止，并停在第10帧（关闭状态）。\u003C\u002Fp\u003E\u003Cp\u003E当按钮为关闭状态（第10帧）时，点击按钮以后动效从第10帧倒放到第1帧（关闭状态），并停在第1帧（菜单状态）。\u003C\u002Fp\u003E\u003Cp\u003E通过以上方式就完成了对一个动效按钮的控制。而日常工作中我们可以灵活地运用多种控制方式。\u003C\u002Fp\u003E\u003Cp\u003E首先动效的触发，可以是一次交互事件，比如点击、滑动；也可以是监听到了广播，比如网络异常等。\u003C\u002Fp\u003E\u003Cp\u003E而触发以后的动效控制也多种多样，可以从开始播放到结束，也可以进行倒放；可以循环播放某一段动效；也可以从某一帧播放到另一帧，或者某一个时间点播放到另一个时间点；更多的控制方式需要大家在工作中慢慢挖掘。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003ELottie支持的AE属性\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003ELottie虽然能够满足多种场景需要，但是并非支持所有的 AE 效果。设计制作时，需要考虑该效果是否支持。否则，会导致出错或者所用效果无法生效。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F424c6165daf6443b9f4c9595a6b17fc0\" img_width=\"593\" img_height=\"2336\" alt=\"比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E上图为 Lottie 支持的主要 AE 属性，此处有删减掉部分不常用的属性。可以打开以下链接查看完整版http:\u002F\u002Fairbnb.io\u002Flottie\u002F#\u002Fsupported-features\u003C\u002Fp\u003E\u003Cp\u003E需要注意的是文档中虽然说支持渐变，但是会出错，所以大家在使用矢量图形时，请勿使用渐变效果。关于渐变效果的修复后续文章会提到，官网以后也会修复相关问题，但是没有确切时间。\u003C\u002Fp\u003E\u003Cp\u003E通过上图我们可以了解到，Lottie 支持的 AE 属性基本包含以下几类：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E基础的形状比如圆形、矩形、星形等，也可以支持钢笔工具绘制的矢量形状和从 AI 中导入的矢量图形。\u003C\u002Fli\u003E\u003Cli\u003E支持位移、大小缩放、透明度、旋转、修剪路径、蒙版、遮罩这些基础动画属性。\u003C\u002Fli\u003E\u003Cli\u003E支持图层间建立父子级关系（只支持图层与图层之间建立，当图层的属性之间建立父子关系会失效，比如 A 图层可以和 B 图层建立父子关系，但是 A 图层的位移属性和 B 图层的位移属性单独建立父子关系则不生效）。\u003C\u002Fli\u003E\u003Cli\u003E支持速度贝塞尔插值，可以搭配 Flow 插件生成各种缓动效果。\u003C\u002Fli\u003E\u003Cli\u003E支持导入图片。\u003C\u002Fli\u003E\u003Cli\u003E支持时间拉伸和时间重映射来通知时间和速度。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Cstrong\u003EAE插件安装与使用\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E前面已经提到 Lottie 是通过 AE 插件 bodymovie 导出 json 文件作为动画数据。接下来就为大家讲解插件的安装与使用方法。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E1. 下载bodymovie插件\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E官方英文插件地址：https:\u002F\u002Faescripts.com\u002Fbodymovin\u002F（文末提供中文汉化版下载地址和详细安装教程）\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E2. 自动安装方法\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E下载zxp格式安装器，下载地址：https:\u002F\u002Faescripts.com\u002Flearn\u002Fzxp-installer\u002F，安装成功后，双击步骤 1 中下载的插件即可完成安装。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E3. 手动安装方法\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E如果自动安装失败，可尝试手动安装。首先修改 ZXP 文件后缀名为 ZIP，然后解压缩文件，得到文件夹，将文件夹复制到以下目录。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EWINDOWS：\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003EC:\\Program Files (x86)\\Common Files\\Adobe\\CEP\\extensions or\u003C\u002Fp\u003E\u003Cp\u003EC:\\AppData\\Roaming\\Adobe\\CEP\\extensions\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EMAC：\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u002FLibrary\u002FApplication\\ Support\u002FAdobe\u002FCEP\u002Fextensions\u002Fbodymovin\u003C\u002Fp\u003E\u003Cp\u003E您可以打开终端并键入：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E$ cp -R YOURUNZIPEDFOLDERPATH\u002Fextension \u002FLibrary\u002FApplication\\ Support\u002FAdobe\u002FCEP\u002Fextensions\u002Fbodymovin\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E然后键入：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E$ ls \u002FLibrary\u002FApplication\\ Support\u002FAdobe\u002FCEP\u002Fextensions\u002Fbodymovin\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E以确保它被正确复制类型。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E4. 安装后\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EWindows：\u003C\u002Fstrong\u003E转到编辑>首选项>常规>并选中「允许脚本写入文件和访问网络」。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003EMac：\u003C\u002Fstrong\u003E转到Adobe After Effects>首选项>常规>并选中「允许脚本写入文件和访问网络」。\u003C\u002Fp\u003E\u003Cp\u003E安装完成后即可在窗口>扩展>bodymovin（Window> Extensions> bodymovin）中找到 bodymovin 插件。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F981f408c3e5444abbf3de574532d7de6\" img_width=\"629\" img_height=\"326\" alt=\"比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E插件主界面如图所示。在主界面可以选择需要导出的合成、导出设置、导出文件夹，并且可以预览动效。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F899d3266a3054e729eb441ec1ec9208b\" img_width=\"625\" img_height=\"757\" alt=\"比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E每次导出时都需要进行设置。标红区域为必选选项。字体图形化可以将字体转化为路径，不勾选会因为应用的平台没有相应字体导致文字加载出错；勾选演示模式后会生成 html 文件，打开该文件即可预览动效。\u003C\u002Fp\u003E\u003Cp\u003E当含有图片资源时可以根据需要选择勾选对应的选项。\u003C\u002Fp\u003E\u003Cp\u003E保存好设置后，点击渲染即可生成动效文件给开发。当只有矢量图层时，开发只需要使用 json 文件即可。当含有图片文件时需要将 json 文件和图片文件夹一并给到开发人员使用。需要注意的是不能随意修改文件夹名称和内部文件名。如果需要修改图片名称，应该同步修改 json 内部代码。相关修改方法，后续文章将会详解。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E动效预览\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E为了测试 json 文件是否能在对应平台显示正常，Lottie 提供了预览平台。将导出的 json 文件上传到网站即可预览效果，也可以下载相应 APP 扫码或者导入 json 文件预览。\u003C\u002Fp\u003E\u003Cp\u003E官方社区，可以预览动效和查看其他设计师公开的动效案例（自己上传的预览动效不会被公开）：https:\u002F\u002Flottiefiles.com\u002F\u003C\u002Fp\u003E\u003Cp\u003EiOS 在 app store 搜索 Lottie 即可下载预览软件，安卓需要在 google play 下载安装。考虑到部分朋友无法使用 google play， 文末提供下载。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fbbc81715c42e469c9214dae5ce2d1f14\" img_width=\"1223\" img_height=\"358\" alt=\"比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E推动落地\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E相信大家看完都有跃跃欲试的想法。但是要实际应用在工作项目中就需要各位设计师去推动了。其中可能会面临一些阻力，比如开发人员的能力水平以及个人的沟通方式等等问题。但是对于正确的事，只要我们坚持去做就会有结果的。首先对于 gif 动画而言，Lottie 更加轻量，且性能更好，并且不易失真；对于开发人员自己写动效来说，一方面 Lottie 减少了大量动效标注的时间，并且可以 100% 还原动效，对于开发人员来说无需再手动写动效了。一次部署，终身轻松。相信相关人员了解以后都会去支持的。\u003C\u002Fp\u003E\u003Cp\u003E为了方便开发人员使用，下面列出几个使用网站，如果开发人员不知道如何部署和控制动效，直接把链接扔给他们就行了。\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003ELottie官方介绍和开发文档：http:\u002F\u002Fairbnb.io\u002Flottie\u002F#\u002FREADME\u003C\u002Fli\u003E\u003Cli\u003EYork_魚的lottie介绍和动效控制方法详解：https:\u002F\u002Fwww.jianshu.com\u002Fp\u002F01f6bb509d54\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fdiv\u003E"'.slice(6, -6), groupId: '6719098755678732807