Lottie动画:一个免费开源的动画渲染库

技术教程 7个月前 虾米
350 0

Lotie是Airbnb开源的一套动画渲染库,可用于Web、Android,iOS。它体积小,质量高,可以实现非常漂亮的动画。

可以先看看它所实现的动画效果:https://lottiefiles.com/

具体来说,它可以通过Bodymovin插件解析AE(adobe After Effects)导出生成JSON文件,并在IOS、安卓、Web、React Native端实现相同的动画效果,也就是说,设计师可以将AE中的部分动画直接输出给研发同学使用。

Lottie相关网站:

使用准备

1.1下载并安装最新版本的 Adobe After Effects

地址:https://www.qssily.com/app/1074.html

Lottie动画:一个免费开源的动画渲染库
1.2下载安装 Bodymovin
Lottie动画:一个免费开源的动画渲染库
1.2.1 要想使用Bodymovin插件,要先安装 ZXP Installer扩展

下载地址:https://aescripts.com/learn/zxp-installer/

1.2.2 然后再下载 bodymovin 扩展

下载地址:

https://github.com/airbnb/lottie-web/blob/master/build/extension/bodymovin.zxp

Lottie动画:一个免费开源的动画渲染库

1.2.3先安装好ZXP Installer扩展,安装好后,打开File选项,再打开(Open)刚刚下载好的bodymovin扩展

Lottie动画:一个免费开源的动画渲染库

1.2.4打开Adobe After Effects,打开扩展就可以看到Bodymovin了

Lottie动画:一个免费开源的动画渲染库

如何使用

安装好必要的工具之后,我们就可以开始使用了,使用前需要给大家推一个Lottie动画库

地址:https://lottiefiles.com/

LottieFiles 提供了很多设计师上传的 Lottie 动画,并提供预览的效果,并且可以直接下载成 JSON ,或者生成二维码,可供 Lottie App 扫描看效果,非常的方便。

有了这个网站,我们导出的动画JSON文件就可以在线预览,当然,你也可以从LootieFiles上下载动画文件,通过Bodymovin导入AE,进行二次加工

我们在AE里制作好动画,然后通过Lottie的Bodymovin扩展导出,导出的动画JSON文件给到开发者使用,这就是Lottie实现动画渲染的整个工作流程

关于Lottie的详细使用方法,网上已经有视频教程,这里推荐一位字节跳动动效师出的教程,看完他的视频,就可以掌握Lottie的用法了

地址:https://www.notion.so/heyjerio/

 

最后关于Lottie 动画利弊

好处:

  • Lottie 只需要解析导出的 JSON 文件及所需要的图片,就能在各个平台上实现动画效果,上线后可动态替换对应的 JSON 文件就能实现,可配置、可运营;
  • 动画由设计使用专业的动画制作工具 Adobe After Effects 来实现,使动画实现更加方便,动画效果也更好;
  • 各平台 RD 可以方便的调用动画,并对动画进行控制,减少 RD 动画编程工作量;
  • 还原程度好;
  • 体积小,JSON 文件大小通常会比 gif、webp 文件小很多。

不足:

  • 很多 AE 常用的 Effects / 特效、Layer Styles / 图层样式不支持,如高斯模糊、外发光等;
  • 部分 AE 中的动画属性不支持导出,或不同系统设备展示效果不一,如 iOS 端实现的时候不能识别JSON 文件中 Alpha Inverted Matte /反向蒙版(Alpha Matte / 正向蒙版支持),但是 Android 可以识别。
  • 形状图层的大多数属性都支持,但比如 Merge Path / 合并路径、Wiggle Path /扭动路径 等还是不支持;
  • 渐变支持的不好,看系统以及 Lottie 版本,需修改 JSON 代码;

以上供参考,具体以官方更新的动画支持情况为准;

版权声明:虾米 发表于 2022年3月6日 am6:01。
转载请注明:Lottie动画:一个免费开源的动画渲染库 | 四粒米导航

相关文章

暂无评论

暂无评论...