【Lottie】Web与视频的融合——从动画师的角度讲解Lottie的使用方法

介绍

很高兴见到你。
我叫 Banaco，是一名自由视频编辑和动画制作人。我最喜欢的食物是香蕉。

这次，我负责了 Vook 的 Advent Challenge 2020 页面上使用的动画。这是一个非常可爱的插图，所以我很喜欢制作它！
我在那里使用的名为“Lottie”的功能非常好，所以我将从动画师的角度介绍如何制作它。
我希望这篇文章能在同样的视频创作者向客户咨询“我想使用 Lottie”时有所帮助。

作为一个流程，使用After Effects（以下简称AE）创建后，以指定格式导出， Web团队使用Lottie实现。

有三点。

• 只要您可以安装扩展程序就非常容易
• 有无法使用的AE功能，请先确认是否可以制作。
• 我有时会在意想不到的地方绊倒，所以我在制作时做了一个小预览。

什么是洛蒂？

它是在Web 上表达动画的方法之一，并且由于可以用AE 创建，因此具有很高的自由度。此外，由于路径信息等以文本格式（json）输出并显示为SVG动画，因此文件大小比视频更轻，并且在Web上无论放大多少都很漂亮，这很有吸引力。

其实Lottie里面的实现是针对web团队的，我们视频创作者如果能把AE中制作的动画导出成指定的文件格式就OK了！

查看 Lottie 支持的功能

请注意，
Lottie 并不支持所有 AE 功能。
首先，您需要确保 Lottie 支持您要在制作中使用的 AE 功能。

・观看已发布的动画

如果你访问lottiefiles.com，你可以看到 Lottie 中实现的动画，因此你可以大致确定你可以制作什么样的动画。

・在官方页面上查看

您可以从lottie supported 中查看支持哪些功能。

一个很好的匹配是这次用AI数据创建的路径动画。
但是，在将AI数据加载到AE中后，需要对所有图层进行整形。文本也需要被塑造。