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

用户头像
上海/设计爱好者/7年前/2103浏览
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
举报
|
37
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
新拟态风格 UI设计组件库
3D卡通UI界面图标可爱插画免扣素
UI通用设计素材1
【新年UI图标】汽车icon
高级感金属拟物 UI设计组件库
我的钱包-UI界面设计-app
APP/小程序商业项目UI模板|99个高保真UI+79个原型
UI 登录界面设计模板包
【新年UI图标】体育icon
UI界面 组件
新能源APP应用UIKit
盲盒APP UI设计
【新年UI图标】礼物/活动icon
智能家居中心 简约 UI设计组件库
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
户外旅行飞机情侣假日出行
高级表盘系列UI源文件
钱包ui模板
Security Camera UI kit
【新年UI图标】30个图标
3D渐变流体抽象矢量UI背景图
科技医疗透明柜UI界面设计
拟物风质感写实UI卡片合集源文件
你可能喜欢
相关收藏夹
大家都在看
登录注册