Lottie动画的应用及AI导入插件

用户头像
上海/设计爱好者/6年前/2079浏览
Lottie动画的应用及AI导入插件

lottie动画制作及其插件应用

Lottie动画是什么?


Lottie 是 Airbnb 开源的一个动画渲染库,同时支持 Android、iOS、React Native 平台,在AE上创建自己的动画,并且可以在网页、IOS和安卓系统进行测试。只需点击几下即可将你的LOTTIE嵌入任何地方。

首先我们要下载AE的插件 Bodymovie插件

官方英文插件地址:https://aescripts.com/bodymovin/

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

可以选择需要导出的合成、导出设置、导出文件夹,并且可以预览动效。当含有图片资源时可以根据需要选择勾选对应的选项.

下图为例



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


Lottie支持的AE属性


在使用Lottie动画的时候,我们会尽量减少图片的使用,所以在PSD导入AE里时会出现大量的Images图片,往往过多的图片运行的时候会导致内存溢出的现象,所以为了避免这个的出现,我们一般会使用AI进行导入。

从AI中导入AE是要先把AI文件拆分成多个图层,如图所示:

保存后,把AI文件导入AE中,选中AI图层,然后【右键-创建-从矢量图层创建形状】,AI文件即可转换为可编辑的形状图层。

但是如果我们不把AI文件分层直接拖入AE中,会导致所有的形状都在一个图层里面。

  以上的做法很是麻烦,而且有时候会造成有些图片无法转换成形状图层或者丢失且颜色自动填充为灰色的情况,所以我们一般会使用一些AE插件进行导入。


Overlord 让AE与AI无缝衔接


overlord 具有全面而强大的功能。能够满足我们导入文件的各种需求

  • 导出所选内容:AI导出到AE,或者AE导出到AI;

  • 导入所选内容:AI/AE选中内容后,在AE/AI中选择导入,即可导入所选内容;

  • 导出选项:分层导入所选元素、记录形状数据、保持中心点在形状中心,默认是在合成的中心、导出内容到画布中心,默认是保持原位置;

  • 快速切换 AE/AI 窗口;

  • 在 AI 中新建一个与 AE 合成相同尺寸的画布;

  • 导入色板到 AE 中;

  • 将参考线导入 AE。


只需几步轻松的把AI矢量图形导入AE里面,不用再进行图层分级。且在1.1版本中还可以导入多种类型的渐变,综上所述,overlord对我们日常导入和编辑素材来说更加方便快捷,当然如果有更好的方式也希望大家可以互相交流。

以上为近期做lottie动画的心得,欢迎各位大神前来讨论交流,谢谢。

33
Report
|
36
Share
相关推荐
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
大家都在看
Log in