比阿里犸良还强大!Lottie 动效设计完全指南(基础篇) - 优设网 - UISDC

比阿里犸良还强大!Lottie 动效设计完全指南(基础篇)

2019/07/15 39084评论 26

动效设计,是 UI 设计当中不可或缺的一环。大家对动效的认知也从最初认为动效只是为了美观酷炫,到逐渐理解了动效对于提升用户体验和产品需求的重要作用。而导致这种认知的转变,相当一部分原因是因为硬件性能的发展和动效输出方式的优化。

因为动效实现的过程就是设计师和开发之间互相博弈的过程。设计师可能通过 AE 或者其他工具做出炫酷的效果,和开发对接就懵了。要么无法实现,要么极其复杂。毕竟开发工程师要通过代码把动效实现出来,设计师得用开发所能理解的语言来描述。就如同你能完美地解出一道数学题一样,让你把解题思路教给别人,你可能就没那么顺畅了。一方面取决于你的表述能力,而更重要的是对方的理解能力。过去所广泛采用的通过动效标注输出给开发的方式,都存在还原度的问题。很多时候还原度达到 80% 可能都算比较好的了。

而今天要说到的 Lottie 不仅可以 100% 还原动效,而且无需动效标注。直接通过 AE 输出动效文件给开发。开发人员直接调用,然后完美还原。

Lottie是什么?

Lottie 是 Airbnb 开源的一个动画渲染库,同时支持 Android、iOS、React Native 平台。Lottie 支持渲染播放 AE 动画。通过 AE 插件 bodymovie 导出 json 文件作为动画数据,其工作流程如下:

是不是听起来很心动?其实 Lottie 已经火了一两年了,很多人应该也看了一些介绍。希望工作项目中经常涉及到动效设计,但是还在用老方法的同学。可以尝试使用 Lottie 帮助动效落地,提升团队工作效率和个人影响力。

Lottie有什么用?

Lottie 可以应用在 UI 设计的很多场景中。以下举出几个常用例子。

1. 动态启动页

2. 动态图标/按钮

3. 空页面

4. 加载/下拉刷新

5. Banner/弹框

6. 表情/礼物/动态贴纸

以上仅列举了部分常用案例,其实 Lottie 的应用场景远不止这些。在 APP 的多个模块中都可以运用,那么我们要如何将 Lottie 运用在自己的工作项目中呢?那就要了解 Lottie 的原理了。

Lottie的原理是什么?

前面已经提过 Lottie 是 Airbnb 开源的一个动画渲染库。我们可以理解为它是一个多功能的视频播放器,开发人员需要将这个播放器部署到相应的环境中。然后设计人员提供视频(动效文件)给开发人员,让开发人员按照要求播放视频文件,即可完成动效的应用。

Lottie 动画的播放控制,除了常规的控制,还支持进度播放、帧播放。以一个动态按钮的切换为例,方便大家理解。

△ 用 Swift 制作一个漂亮的汉堡按钮过渡动画

上图所示为一个菜单/关闭按钮的动态切换。

假设该按钮动效一共10帧,整个按钮切换分为两部分,第一部分:从菜单切换到关闭(1-10帧);第二部分:从关闭切换到菜单(10-1)。我们可以让开发通过以下控制方式,完成我们想要的效果。

按钮动效默认显示第1帧(菜单状态),点击按钮以后开始播放动效,动效播放到第10帧的时候停止,并停在第10帧(关闭状态)。

当按钮为关闭状态(第10帧)时,点击按钮以后动效从第10帧倒放到第1帧(关闭状态),并停在第1帧(菜单状态)。

通过以上方式就完成了对一个动效按钮的控制。而日常工作中我们可以灵活地运用多种控制方式。

首先动效的触发,可以是一次交互事件,比如点击、滑动;也可以是监听到了广播,比如网络异常等。

而触发以后的动效控制也多种多样,可以从开始播放到结束,也可以进行倒放;可以循环播放某一段动效;也可以从某一帧播放到另一帧,或者某一个时间点播放到另一个时间点;更多的控制方式需要大家在工作中慢慢挖掘。

Lottie支持的AE属性

Lottie虽然能够满足多种场景需要,但是并非支持所有的 AE 效果。设计制作时,需要考虑该效果是否支持。否则,会导致出错或者所用效果无法生效。

上图为 Lottie 支持的主要 AE 属性,此处有删减掉部分不常用的属性。可以打开以下链接查看完整版http://airbnb.io/lottie/#/supported-features

需要注意的是文档中虽然说支持渐变,但是会出错,所以大家在使用矢量图形时,请勿使用渐变效果。关于渐变效果的修复后续文章会提到,官网以后也会修复相关问题,但是没有确切时间。

通过上图我们可以了解到,Lottie 支持的 AE 属性基本包含以下几类:

  • 基础的形状比如圆形、矩形、星形等,也可以支持钢笔工具绘制的矢量形状和从 AI 中导入的矢量图形。
  • 支持位移、大小缩放、透明度、旋转、修剪路径、蒙版、遮罩这些基础动画属性。
  • 支持图层间建立父子级关系(只支持图层与图层之间建立,当图层的属性之间建立父子关系会失效,比如 A 图层可以和 B 图层建立父子关系,但是 A 图层的位移属性和 B 图层的位移属性单独建立父子关系则不生效)。
  • 支持速度贝塞尔插值,可以搭配 Flow 插件生成各种缓动效果。
  • 支持导入图片。
  • 支持时间拉伸和时间重映射来通知时间和速度。

AE插件安装与使用

前面已经提到 Lottie 是通过 AE 插件 bodymovie 导出 json 文件作为动画数据。接下来就为大家讲解插件的安装与使用方法。

1. 下载bodymovie插件

官方英文插件地址:https://aescripts.com/bodymovin/(文末提供中文汉化版下载地址和详细安装教程)

2. 自动安装方法

下载zxp格式安装器,下载地址:https://aescripts.com/learn/zxp-installer/,安装成功后,双击步骤 1 中下载的插件即可完成安装。

3. 手动安装方法

如果自动安装失败,可尝试手动安装。首先修改 ZXP 文件后缀名为 ZIP,然后解压缩文件,得到文件夹,将文件夹复制到以下目录。

WINDOWS:

C:\Program Files (x86)\Common Files\Adobe\CEP\extensions or

C:\AppData\Roaming\Adobe\CEP\extensions

MAC:

/Library/Application\ Support/Adobe/CEP/extensions/bodymovin

您可以打开终端并键入:

  • $ cp -R YOURUNZIPEDFOLDERPATH/extension /Library/Application\ Support/Adobe/CEP/extensions/bodymovin

然后键入:

  • $ ls /Library/Application\ Support/Adobe/CEP/extensions/bodymovin

以确保它被正确复制类型。

4. 安装后

Windows:转到编辑>首选项>常规>并选中「允许脚本写入文件和访问网络」。

Mac:转到Adobe After Effects>首选项>常规>并选中「允许脚本写入文件和访问网络」。

安装完成后即可在窗口>扩展>bodymovin(Window> Extensions> bodymovin)中找到 bodymovin 插件。

插件主界面如图所示。在主界面可以选择需要导出的合成、导出设置、导出文件夹,并且可以预览动效。

每次导出时都需要进行设置。标红区域为必选选项。字体图形化可以将字体转化为路径,不勾选会因为应用的平台没有相应字体导致文字加载出错;勾选演示模式后会生成 html 文件,打开该文件即可预览动效。

当含有图片资源时可以根据需要选择勾选对应的选项。

保存好设置后,点击渲染即可生成动效文件给开发。当只有矢量图层时,开发只需要使用 json 文件即可。当含有图片文件时需要将 json 文件和图片文件夹一并给到开发人员使用。需要注意的是不能随意修改文件夹名称和内部文件名。如果需要修改图片名称,应该同步修改 json 内部代码。相关修改方法,后续文章将会详解。

动效预览

为了测试 json 文件是否能在对应平台显示正常,Lottie 提供了预览平台。将导出的 json 文件上传到网站即可预览效果,也可以下载相应 APP 扫码或者导入 json 文件预览。

官方社区,可以预览动效和查看其他设计师公开的动效案例(自己上传的预览动效不会被公开):https://lottiefiles.com/

iOS 在 app store 搜索 Lottie 即可下载预览软件,安卓需要在 google play 下载安装。考虑到部分朋友无法使用 google play, 文末提供下载。

推动落地

相信大家看完都有跃跃欲试的想法。但是要实际应用在工作项目中就需要各位设计师去推动了。其中可能会面临一些阻力,比如开发人员的能力水平以及个人的沟通方式等等问题。但是对于正确的事,只要我们坚持去做就会有结果的。首先对于 gif 动画而言,Lottie 更加轻量,且性能更好,并且不易失真;对于开发人员自己写动效来说,一方面 Lottie 减少了大量动效标注的时间,并且可以 100% 还原动效,对于开发人员来说无需再手动写动效了。一次部署,终身轻松。相信相关人员了解以后都会去支持的。

为了方便开发人员使用,下面列出几个使用网站,如果开发人员不知道如何部署和控制动效,直接把链接扔给他们就行了。

下载链接

文件下载链接:https://share.weiyun.com/5DpXrKm 密码:iuaruk

备用下载链接:https://share.weiyun.com/5m2Dinf

关于 Lottie 的介绍就到这里,后续将会持续更新 Lottie 动效设计过程中涉及的各种问题和方法技巧。

欢迎关注作者的微信公众号:「懿凡设计」

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/lottie-dynamic-design-guide

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

界面设计 设计圈干货 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里