Lottie 是 Airbnb 开源的一套动画库, 我们可以使用 Adobe After Effects (俗称AE) 设计出动画, 使用 Lottie提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式, 就可以直接运用在 iOS, Android, Web和 React Native之上, 无需其他额外操作.

lottie 官网lottie 官网

lottie-androidAndroid 应用

lottie-iosiOS 应用

lottie-react-nativeRN 应用

lottie-webWeb 应用

AE 破解版AE 破解版下载链接, 相关下载在百度网盘上搜索

Bodymovin 插件AE插件, 用于将 aep 文件导出为 json 文件

AE 插件安装器亲测, 好用

lottie 动画社区lottie 动画库, 有很多轮子可供下载编辑

json文件格式利用 Bodymovin 插件将动画从 AE 中导出的 JSON文件

需要设计lottie的动画时：

官网动画实例 www.lottiefiles.com
ae文件预览 https://www.lottiefiles.com/preview
在为Lottie构建时，您始终必须记住，这些JSON文件需要尽可能小巧令移动产品尽可能小。例如，尽可能使用parenting。在类似的图层上复制相同的关键帧会增加额外的代码。只有在必要时才使用路径关键帧动画。由于它为每个关键帧上的每个顶点添加数据，因此占用的空间最多。诸如Autotrace之类的技术，或者每帧都为您提供关键帧的摇摆器，可能会使您的JSON文件非常大，并可能会对性能产生负面影响。必须与组合物的设置方式保持平衡，以使事物尽可能高效。
将任何Adobe Illustrator，EPS，SVG或PDF资源转换为After Effects中的图层，否则它们将无法在您的Lottie动画中使用。
Lottie尚不支持效果菜单中的表达式或任何效果。
使用alpha遮罩会影响性能。如果你使用的是alpha遮罩或alpha倒置遮罩，遮罩的大小会对性能产生更大的影响。如果必须使用遮罩，请覆盖最小的区域。
混合模式（如Multiply, Screen 或 Add）尚不受支持，也不支持Luma遮罩。
Lottie还不支持阴影，颜色叠加或笔触等图层效果。
导出比您想要支持的最宽屏幕更宽的动画，使开发者在Android上使用centerCrop类型或在iOS上使用aspectFill内容模式。
将图片资源放入JSON，将图片资源整合到动画的 JSON文件中，开发人员的工作量就可以节约很多。

需要先将图片转换成矢量图 SVG 格式，这个设计师一定有办法。
使用 Illustrator 将 SVG 文件另存为 .ai 文件。
使用 .ai 文件在 AE 中做动画处理。
最后通过 Bodymovin 插件，输出动画资源。
官方文档： artwork-to-lottie-walkthrough

附相关教程：

UE专属-五分钟学会用Lottie配合开发做动效

Lottie 的相关下载及使用相关推荐

高德sdk定位当前位置_相关下载-Android 定位SDK | 高德地图API
高德开发 Android 定位SDK 相关下载更新时间:2020年11月16日 { "tab":[ "Android 定位SDK", "Andro ...
RMS 相关下载链接
不知道是自己笨还是真的不习惯windows官网,搜索 sdk和tool的链接耗费了我好久好久!!!突然有一次看到一个整理的很完整的帖子就顺手拿给51的兄弟姐妹们来了. 今天网速不怎么样,抽 ...
Windows Mobile开发资源相关下载收录
最近收集了些关于Windows Mobile开发必备工具.以下资源完全是自己下载过的,直接从迅雷下载页面拷贝过来的地址.链接应该没问题的. Windows Mobile 6 Professional ...
中国移动通信互联网短信网关接口协议及相关下载
为了方便大家,这里提供中国移动通信互联网短信网关接口协议的下载中国移动通信互联网短信网关接口协议DOC版(CMPP3.0).rar 中国移动通信互联网短信网关接口协议DOC版(CMPP2.0).ra ...
仿QQ-----开发工具vs2005 相关下载
仿QQ-----开发工具vs2005 开发技术 > C# > 仿QQ-----开发工具vs2005 C# 仿QQ 界面简洁代码清晰适合初接触开发CS程序开发者相关链接:https: ...
Dynamo相关下载教程分享！（附软件包和Revit使用插件Revit Lookup下载教程）
1.Dynamo下载 (1).下载渠道: Dynamo官方下载渠道:https://dynamobim.org/download/,如果仅仅需要用Dynamo进行功能搭建,选择sandbox即可. 国 ...
myfocus官方网站已经挂掉，相关下载已经从googlecode转到csdn
首先说,我跟作者没有任何关系,只是偶然发现这个东西,努力了1个多小时才有下载,现在友情提供出来. 其次,我找到的是v2.0.4 MS这个是最新的版本,更新日期是2012年10月. 再次,本文原本是准备 ...
鼠标手势软件MouseGesture v1.0.0.3中文绿色版.rar 相关下载
鼠标手势软件MouseGesture v1.0.0.3中文绿色版.rar 开发技术 > 其它 > 鼠标手势软件MouseGesture v1.0.0.3中文绿色版.rar mousege ...
chrome浏览器webdriver相关下载与使用方法
1.检查自己的chrome版本在这里插入图片描述 2.点击https://registry.npmmirror.com/binary.html?path=chromedriver/ 链接进入webd ...

Lottie 的相关下载及使用

UE专属-五分钟学会用Lottie配合开发做动效

Lottie 的相关下载及使用相关推荐

最新文章

热门文章