赞助商
立即赞助

一篇文章帮你了解AE动画插件Lottie的前世今生(附避坑案例)

UI设计3年前 (2021)更新 流光
8.5K 0 0

大好,我是彩。在画落地的过程中,配合Lottie插件输出JSON动画文件家常用的方法。今天这篇分享,将会讲到Lottie这插件怎么的,什么会叫Lottie?使用过程中哪些需注意的?具体又该如何确使用?如果对这里面的知识不熟悉,那这篇文章或许能帮到。

我最接手了一个项目,团队想要做一些态图标和logo。

除做用户验和UI设计之外,我还是一名动效设计师,我接受了AE和Lottie做画的挑战。

网页动画历史

在21世纪初,当flash还是页画之王时,每个设计师都在释放他们的创意。那时候上炫酷炸裂的随处可见,只要你了flash播放器,就可正浏览。中有些看起来更像游戏,当时还没有像现在这么多规范约束,做的都较随意。如果我们现在来分析它们,中很多可都没有符合户体验设计原则。

随着flash的消失,HTML成为使用标准以及用户验的规范化,网站消失。现在我们浏览的大数网站很容易使用,阅读验也很……但它们看来也很普通和相似。

在网页上落地一个动画所付出的努力和工作实在是高了,计做出的动画给开发,能实现的效果非常有限。除了成本高和繁琐外,从头开始用代码创建动画也会导致计稿相差甚远。直Lottie出现,才迎来了转机。

一篇文章帮你了解AE动画插件Lottie的前世今生(附避坑案例)

△ Lottie名字的由来

Lottie是怎么来的?

Hernan Torrisi在2015年提出了在AE中导出动画的想法,使用创建的一个叫Bodymovin的插件,能够导出JSON描述的动画。

他发布了史上第个支持该格渲染,并为浏览提供了个基于JS播放。

2017,Airbnb的程师看到了基于JSON的动画潜力,编写了可以渲染JSON文件的iOSAndroid库,他们称之「Lottie」。

Airbnb的开发者将作为一个开源平台,仅是为了免发布,是为了打一个社区。他们创建了一个github地址(https://github.com/lottiefiles)来与设计师和开发进行交流。这是一个与时俱进的好意,使得Lottie得到快速发展。

LottieFiles是什么?

LottieFiles(https://lottiefiles.com/)是一个独立于Airbnb的平台,设计师可在上面「上传,测试,购和载画」,而这些只需要你有一个免的账号。

LottieFiles同时也是一个AE的插件跟Bodymoving类似,只是功能更加富,允许我们「预览」动画,「上传到」LottieFiles平台,存到我们的电脑上,等等。

作为插件的候其实是比Bodymoving功能更为丰一些,但彩云实际测的候发现,可能会由于网络问题导致刷新预览不及的问题,这个大家可以在用的候留下。彩云给大家找了一个演示视频,一起吧。

 

如何入门?

首先,你需要安装好插件,可以装Bodymovin或者LottieFile(https://lottiefiles.com/plugins/after-effects)

项目的中间阶段,我太多时间去研究它,但我又希望能立马就用。所以,我觉得先按自己的法速试一遍,不去官网一条条的看明。我设了一简单的logo动画,这一拥螺旋桨的无人机,我从Ai导入AE,并用3D图层了一旋转动画。

一篇文章帮你了解AE动画插件Lottie的前世今生(附避坑案例)

△ Logo动画

当我准备导它时,AE给我弹了一堆错误信息。我发现并非有效果都被支持。直到今天,3D图层依然被支持。,在做之前,最好根据规范确认,哪些画可被支持,哪些支持。有时候,一些画在web端支持,但在iOS和Android上却被支持。

一篇文章帮你了解AE动画插件Lottie的前世今生(附避坑案例)

△ Lottie支持表

使用技巧及建议

为web创建画并像传统视频画那样,我们需要考虑几个我们从未考虑过的设置和格式项。

下面是Lottie的者给出的一建议

  • 保持简单:JSON件应该尽可的简洁和保持小的体积
  • 用AE的能力尽能的减少额外的关键帧,例使用子父级方式而不是在每一个上添加一遍关键帧
  • 避免使用路径关键帧,因为它会创建一个非常大的文档,会从路径上转换所有的顶点
  • 避免使用Wiggle表和自动追踪等技术,这些技术会生大量关键帧,做出这么大文件可能会使用JSON文件变常大,从而性能生大负影响。
  • AE中需将任何Ai,EPS,SVG或PDF图层转换形状图层,否则会产错误。
  • 导件时,1倍图导,图形上的每个像素都将转换成iOS和Android的点单位。这是Google汇总的DPS中的设备指标的「集合」 (https://material.io/resources/devices/),担心大打开页,彩贴心的为大制作好了这份对照表,末有获取方式。
  • Lottie还不支持任何表达式或效果。
  • 蒙版或者alpha蒙版应该尽可能的,它的大将响Lottie的性能,所以最好避免出现它或保持它最。
  • 混合模,如叠加,屏幕,相加不支持。
  • 图层样式,如投影,描都还不被支持
  • 空图层可使,但为了它正工作,我们需要将可见打开,并将透明设置为0。

案例演示

接下来我将过个实案例,步步教大家如何使用Lottie.

导入图层,打合,选择所图层,右键单击,选择从矢图层创建形状。这将会创建出新的矢图层,不至于我们导出Lottie时给我们制造麻烦。

一篇文章帮你了解AE动画插件Lottie的前世今生(附避坑案例)

△ 转换图层

我们需要删除有AI件,只保留创建的矢量图层。

一篇文章帮你了解AE动画插件Lottie的前世今生(附避坑案例)

△ 矢量图层

我想为Logo做出3D的旋转动画,但因为它不支持,所以我不得不用传统的方式来模拟,我通在x轴上改变宽度来模拟3D旋转产生的变化。

一篇文章帮你了解AE动画插件Lottie的前世今生(附避坑案例)

△ X轴方向上的缩放动画

在得了想要的旋转动画以后,创建了一个空对象来移动整个Logo,并使其「起飞」和「降落」。在移动过程中使用了曲线,使得移动更加滑。

一篇文章帮你了解AE动画插件Lottie的前世今生(附避坑案例)

△ 空对象的位移路径

正如我们前写到:空象需要被转换为「可见」和「0%透明度」才能正常工作。

当我把动画调整到我的效果后,接下就用到了Lottie插件了。

一篇文章帮你了解AE动画插件Lottie的前世今生(附避坑案例)

△ 打Lottie插件

打开界面后,可查看画,上传lottie件和将它保存到电脑上。为了做到这一点,需要有一个Lottiefiles账号。(彩注:这一点来说,LottieFile插件会Bodymovin功要更全,LottieFile里面还供了大量的免模哦)。

一篇文章帮你了解AE动画插件Lottie的前世今生(附避坑案例)

△ Lottie 插件

总结

通过这种方式来创建画的方法是非令人兴奋的,因为它保持了很的质量,易于实现,并给我们创亮点的产供了条件。

因为我们是为页面打造的动画形式,而不是做一个动画视频,里面需要适应和理新媒,我们需要清楚能做什么以及是什么。

相在未来,将能够添加更多的性动画,但就目前而言,最好保持简。要记住一个计则,在多情况下,少即是多。

彩云补充

提lottie插件,就不得不提安装的问题。这彩云给大家安利一个方便实用的工,叫ExtensionManager,有mac和win版本,对于Adobe系列的软件插件,安装管理起来非常方便,直拖进去就OK了。

一篇文章帮你了解AE动画插件Lottie的前世今生(附避坑案例)

插件安装神器+尺寸对照表+Lottie安装包的文件,链: https://pan.baidu.com/s/1YWGsIoPQFGp86_Y3tV9ctw 提取码: ruig

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

欢迎关注译者的微信公众:「彩云译设

一篇文章帮你了解AE动画插件Lottie的前世今生(附避坑案例)

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

编者按:本文由负责Material Design 动效设计的谷歌设计师撰写,帮助大家深入理解动效的作用,才能做出更好的动效设计。 有...
UI动效
编者按:Google 设计团队为了更好地推进 UI 和动效设计,自己开发过不少新的工具,打通 Sketch2AE 是其中之一,如今的 AEUX ...
AE动效
在 UI 界面当中使用动效已经成为这几年一直被讨论的热门话题了。动效要怎么用,什么样的动效更优秀等等,这样的探讨层出不穷...
UI动效
一、微交互到底是什么? 微交互通常关注于单个事件或者单个任务,这些交互元素遍布于整个 APP 的各个角落。这些微交互存在的...
交互设计
本文介绍了 4 种常见的 SVG 交互动画方法,帮你了解 SVG 交互动画的原理和简单方法。 优秀的人机交互和舒适合理的动画,一直...
SVG
今天这篇文章,讲的又是大家感兴趣的动效知识。现如今,动效对于品牌的传达变得越来越重要,所以我想尽可能多的去搜集动效相...
UI动效
在经典的尼尔森十大启发式当中,「系统状态可见性」可以说是如今交互设计领域当中,最为重要的原则之一。通过向用户展现当前...
交互设计
阿里作为中国互联网企业的标杆,不仅一直在为广大人民群众提供快捷便利的服务。也不断引领行业,在各个专业领域,给专业人员...
UI动效