一、洛蒂洛蒂简介洛蒂是由Airbnb提供的跨平台、完整的动画效果解决方案。设计师可以使用Adobe After Effects设计出精美的动画，然后使用Lottic提供的Bodymovin插件将设计好的动画导出为JSON格式，无需其他额外操作即可直接应用于iOS、Android、Web和React Native。官方地址：官方文件：中文文件(@ Xi常):https://www.yuque.com/lottie/document1.Lottie/body movin介绍洛蒂的用法。首先需要在AE中安装Bodymovin插件。Bodymovin是一个After Effects的插件，可以导出json数据格式的动画供洛蒂使用。2.下载Bodymovin插件1。通过aescripts aeplugins下载，这是官方推荐的做法。aescripts aeplugins是一个类似于商场的软件买卖网站。需要注意的是，Bodymovin插件是自定义价格，在价格区输入0，就可以免费下载。但是注册缺点比较麻烦。Bodymovin官方地址(aescripts AE plugins):https://aescripts.com/learn/zxp-installer/进入下载网站，在价格区输入0即可免费下载。(建议使用谷歌Chrome将原网站翻译成英文)
点击右上角的购物车标志，进入下一步操作。
进入购物车页面，这时你会看到购物车里已经添加了插件并且价格免费，然后结算。接下来需要登录账号，输入一些基本信息。下单后，插件的下载地址会发送到注册账号添加的邮箱或者可以在账号详情中找到。
2.通过Adobe官方商店下载，官方版本保证安全。缺点是需要登录账号，没有账号的话比较麻烦。下载bodymovin(Adobe):https://exchange.adobe.com/creativecloud.details.12557.html3.遵循body movin插件中文版，中文版由@Bigxixi提供。你只需要下载它就可以使用了。Bodymovin(中文@Bigxixi)下载：https://github.com/bigxixi/bodymovin_cn3.安装ZXP install(一款AE插件和脚本安装工具)ZXP install官方下载地址：https://zxpinstaller.com/(选择相应平台下载)1 .以Mac平台为例，打开附件中Mac文件夹下的文件“ZXPInstaller.dmg ”,然后将程序拖拽到应用中，完成安装。
2.打开ZXPInstaller程序，把下载的bodymovin.zxp文件拖进去，然后中间需要输入你的电脑密码，稍等片刻，完成AE插件的安装。
3.打开AE在窗口-扩展中找到bodymovin，然后打开出现程序主页面。
4.为了保证插件的可用性，需要在AE首选项-脚本和表达式中打开允许脚本写文件和访问网络并启用JavaScript调试器。
4.Lottie/Bodymoving支持的AE属性官方文档(支持函数的最新版本):https://airbnb.io/lottie/#/supported-features
图片来自@Bigxixi5。Bodymoving插件功能介绍尽量用中文版。为了便于理解和使用，对每个功能都进行了解释。
二。AEUX简介AEUX是一个用于After Effects和Sketch 52的AE和Sketch插件，也是一个用于Figma的转换器，用于将视觉设计中的图层导入到AE中，并可以完全显示。在导入速写到AE上有很强的表现，是目前市面上最好的选择。详细AEUX《AE动效必备：一键将Sketch文件图层导入到AE》 AEUX官网：https://aeux.io/AEUX0.6.9官方下载：https://github.com/google/sketcpae/releases/download/0.6.9/AEUX . zip 1 .安装素描插件通过官网下载最新版本的AEUX，获得包含“AEUX.sketchplugin”和“AEUX.zxp”文件的压缩包。前者是素描插件，后者是AE插件。草图插件可以直接点击完成自动安装。安装完成后，你可以在Sketch-Plugins的顶部菜单中找到“AEUX”。
2.安装AE插件AE插件是zxp格式的。你需要先安装本文提到的ZXP安装软件，然后将插件拖拽到ZXP install中，完成AE插件的安装。完成后，你可以在AE菜单面板-窗口-扩展中找到AEUX。
3.Sketchaeux插件功能介绍1。将选定的图层或画板发送到Ae。2.输出一个AEUX.json文件，输出后预览里面什么都没有。具体用法需要研究。3.“图像到组件”会将图像转换为组件。4.直译就是把形状扁平化，具体用法需要研究。5.分离草图中的组件。
4.介绍4。AE AEUX插件功能1。草图AEUX插件同步的设计文件会显示在AE插件中，点击后可以同步到AE项目。2.这里是画板的倍数，可以根据需求切换。1x=两位数2x=两位数，以此类推。3.默认选项，待研究的未知函数。4.导入AE时，草图中的组将自动转换为合成前状态。5.选择此选项后，在草图中同步设计文件后，自动同步将在AE中执行，无需手动同步。6.您可以在AE中预先合成文件。7.您可以发布预先合成的文件。8.您可以显示和隐藏导入到草图中的隐藏文件(默认情况下，导入到AE中的草图组将自动隐藏在层中)9。删除该组的文件。
三。洛蒂AEUX使用演示1。草图导出演示首先选择要导入的图层或画板，点击“发送选择到AE”导出到Ae。
2.AE导入演示。进入AE，打开AEUX插件，点击“BUILD COMP”，将Sketch导出的设计文件导入AE项目。
3.Bodymovin渲染演示完成动态效果设计后，打开Bodymovin插件选择要渲染的构图，设置保存路径，然后点击渲染，完成动态效果渲染。如果要预览动态效果，点击渲染动画旁边的预览进入预览界面，点击预览当前文件选择新合成的文件进行预览(由于插件预览可能存在问题，预览结果主要是lottiefiles)
4.lottiefiles平台推出LottieFiles是出于对动画师和设计界的热爱，也是为了让你能给别人带来灵感。LottieFiles是一个基于Lottie的动画展示和内测的在线网站，里面有很多专业动画师分享的各种类型的动画，以供参考。同时对Lottie导出的json文件的预览有很好的支持。为了保证动画的可用性，以LottieFiles的最终预览为主。Lottiefiles官网：https://lottiefiles.com/LottieFiles的使用非常简单。首先登录网站，注册账号，然后进入我的界面，点击上传新动画进入上传界面，上传。需要立即预览的json。
四。常见问题1。尽量优先用英文命名图层，比如comp_XXX。目前已知用中文命名可能会引起不同的问题。如果使用Lottie有问题，先确定图层命名是不是英文的，再检查一下。2.渐变填充生成后，导出json就是黑白效果。解决方案需要将对应图层的渐变填充名称修改为“Grandient”(注意：修改名称是图层内部的渐变填充名称，具体位置对应图层-内容-图层名称-渐变填充)。为了保证没有冲突或者其他问题，可以在命名后添加一个序列号，可以扩展。如果无法显示其他效果，可以改成英文版AE中的名称。命名方式由@北海大佬提供。原文中提到的“渐变”少了一个N，正确的是“Grandient”。LOT @ north sea https://www.zcool.com.cn/article/ZOTkwNTM2.html3.渐变填充简化版更名，渐变填充效果改为红色背景或其他颜色(非黑白)。这种问题只在一些实际项目中出现过。渐变填充修改后，原来的黑白渐变变成了红色背景，部分渐变填充有透明效果，但透明度改变后无法实现渐变。去除渐变透明带来的问题后，经过不断的测试，最终得到以下解决方案：将图层名称修改为英文如“comp _ XXX”在原名称后加一个序号如“grandient 1”先备份一个图层，然后删除原渐变填充效果，重新给图层添加渐变填充。渐变颜色以及“起点”和“终点”的值是根据备份添加的。以上操作完成后，将重新生成json。如果还是达不到效果，需要保留ae文件。如果重启ae，会再次达到效果。是什么原因造成的还不知道。目前我描述的方法可以解决这类问题。如果渐变中有透明，导出出现去了，当然也可以用站酷@北海Boss的方法来解决渐变的透明效果。洛蒂@ northseahttps://www.zcool.com.cn/article/zotywmtc2.html4.中渐变透明的实现研究不完整的图形通过AEUX导入到AE中，有些图形会出现不完整或不完整的效果。问题是有些图形在草图的设计过程中做了布尔运算但最后没有合并，所以出现了这种问题。(注：如果Sketch中有些图形无法合并，可以在ai中合并。)草图通过AEUX导入AE，AE中有相关图层，但不显示。解决方法是在Sketch中整理图层，尽量不要应用图层分组，避免相关问题。本文来源：https://www.ui.cn/detail/494742.html作者：South Bysouth文章参考：思文大哥：https://mubu.com/doc/explore/17880知乎：https://www.zhihu.com/question/5315505北海：https://northsea.zcool.com.cn/往事失传：https://juejin.im/post/5b62e2bae51d4534c34a65e3官方/插件下载：ZXP install官方下载地址：https://zxpinstaller.com/洛蒂官网：https://airbnb.design/lottie/Lottie英文版插件：https://github.com/airbnb/lottie-webLottie中文版插件(@ big Xixi):https://github . com/Airbnb/Lottie-web aeux官网：https://aeux.io
#Win Mac中文版插件下载#请在后台回复关键词“动态效果落地”即可下载。
请私信回复“666”打电话给~颜哥~。还有更多惊喜~……..
UI——越努力，越幸运。
暂无讨论，说说你的看法吧
