爱意满满：在你的 NativeScript 应用中使用 Lottie 动画

几周前，Airbnb 设计团队开源了 Lottie，这是一个漂亮的全新动画库，它允许开发者在 After Effects 中创建动画，并将其导出为 JSON 文件，供原生移动应用使用。Lottie 风格的动画跨平台兼容性极佳，流畅自然，风格时尚，可以比标准的关键帧或框架动画更加复杂。Airbnb 设计页面上有一个很好的例子。你可以为你的应用制作一个漂亮的启动画面，或者像 Twitter 一样添加一个小巧的自定义“喜欢”的心形动画。如果你能掌握 After Effects，你就可以在你的原生应用中运用你的设计技能。让我来教你如何做到这一点！

注意，这不是一个 After Effects 教程。作为基础，并且只有在具有矢量和 Flash 使用经验的情况下，我大约花了半天时间学习了软件，才能够导出动画。你可以在这里了解有关 After Effects 基础知识的更多信息。我发现这个软件相对容易理解。

首先，从 Creative Cloud 获取 Adobe After Effects 的副本（我使用的是 After Effects CC 2017）。你可以获得一个持续几天的免费试用版，足以让你开始使用。然后，你需要安装BodyMovin，这是一个工具，它允许将 After Effects 文件导出为 json。我不得不安装一个第三方工具来处理 BodyMovin 与 After Effects 的集成（ZXP Installer；说明在 BodyMovin Github 页面上有详细说明）。安装完所有这些内容后，你就可以获取一些矢量图形并开始制作动画了。

我使用 Illustrator 选择并编辑了一些我在网上找到的心形矢量图形的部分。

然后，我将分离的矢量图形导入到 After Effects 中。有两个图层：实心红色心形和一个由心形组成的紫色心形。我将它们拖到时间轴上并在一个两秒钟的循环中为它们制作动画；红色心形膨胀，紫色心形膨胀并逐渐消失。完成矢量动画后，将这些矢量转换为形状图层，以便 BodyMovin 能够将其转换为 json，因为 Lottie 无法直接处理使用矢量创建的动画。要进行此转换，请按照此处的说明操作。

注意，当你将矢量转换为形状时，你可能会丢失它们的颜色！通过选择形状并点击顶部的“填充”命令来重新着色，以恢复颜色。

好的，这有点像我想要的效果……现在是时候将这个动画放到应用中了！

通过点击 Window > Extensions > Bodymovin 转换并导出动画。一个面板会弹出，你将被提示导出“渲染”，也就是你在 After Effects 中创建的动画。

注意，确保你在“设置”面板中设置 After Effects 能够写入本地磁盘。在 Preferences > Output > General 中设置此项，方法是切换“允许脚本写入文件和访问网络”，此项默认可能未启用。

如果一切顺利，你将拥有一个准备导入到 NativeScript 应用中的 json 文件！

现在，你只需要设置你的应用来享受这些动画。为此，你将使用 Brad Martin 和 Nathan Walker 新开发的跨平台 Lottie 插件。我在 CLI 中使用 Vanilla TypeScript NativeScript 创建了一个示例应用：tns create heart --tsc，并在新创建的应用的根目录下添加了插件：tns plugin add nativescript-lottie，如插件ReadMe中的说明所示。现在，将你从 After Effects 生成的 .json 文件添加到你的应用中。

注意，此步骤目前在 iOS 中比 Android 更容易。对于你的 iOS 应用，只需将 .json 文件添加到 App_Resources/iOS；当应用构建时，它将被复制到正确的位置。对于 Android，正如 Brad 所指出的，你需要确保 /platforms/android 文件夹已到位，然后将你的 .json 文件添加到 platforms/android/src/main/assets 中。这目前意味着每次删除 platforms 文件夹时，你都需要手动将 .json 文件添加回来才能供应用使用。希望这很快就能改变。

一旦你的文件就位并且插件正确安装，你就可以在适当的位置添加你的动画了。对于我的小应用，它只在首页上显示。

<Lottie:LottieView src="heart.json" loop="true" autoPlay="true" loaded="lottieLoaded" />

你可以使用 Lottie 友好的参数来使你的动画看起来并表现得像你想要的那样。例如，如果你希望动画只在点击时发生，则将 loop 和 autoPlay 设置为“false”。

最终效果如下！

hearts-crossplat

我很享受为你创建这个小巧的 Valentine 信息。我希望你也能享受创建自己的 Lottie 动画的乐趣！我真的很喜欢这个库，并且想看看你正在构建什么。请在下面的评论中告诉我！