Lottie-和-AfterEffect-UI-动画-全-

Lottie 和 AfterEffect UI 动画（全）

原文：zh.annas-archive.org/md5/b7c29e086f0fbe0ffd610f855272191a

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

Lottie 是一个小型且可扩展的基于 JSON 的动画文件。LottieFiles 是一个平台，可以上传、测试和共享 Lottie 动画。通过结合 LottieFiles 插件和 LottieFiles 平台，你将能够创建令人惊叹的动画，这些动画易于与任何设备集成。你还将了解如何使用 Bodymovin 插件在 Adobe After Effects (AE)中导出你的动画到 JSON 文件。

本书首先为您概述 Lottie 和 LottieFiles。随着你继续阅读，你将了解整个 Lottie 生态系统，并亲自动手学习经典的 2D 动画原则。你还将获得一个逐步的导游，从构思、为叙事草图，设计一个能满足用户需求和期望的图标，基于 UX，最后在 AE 中动画化它。这将帮助你熟悉 AE 环境，使用矢量形状层，通过图层属性创建和修改关键帧，探索路径、父子链接功能，并轻松调整时间以创建看起来专业的动画。

在这本动画书的结尾，你将能够使用 AE 创建和导出你自己的 Lottie 动画，并在使用 React Native 的移动应用程序中实现它们。你还将了解 2D 动画的最佳实践和原则，你可以将这些应用到自己的项目中。

这本书面向谁

这本书是为已经熟悉 React Native 的开发人员和工程师，以及想要通过 React Native 创建自己的动画并将其集成到他们平台上的 UX 和 UI 设计师而写的。假设你具备 JavaScript 编程的基本知识。虽然不是必需的，但还偏好具备入门级插画技能。

这本书涵盖的内容

第一章，开始使用 Lottie，探索 Lottie 和 LottieFiles 的世界以及为什么它们对设计师和开发者来说如此有价值。了解 Lottie 是什么，是谁创造了它，以及 LottieFiles 是如何工作的。你还将发现制作 Lottie 动画所需的工具。

第二章，创造错觉：从 2D 经典动画的基本原则开始滚动，在简要概述动画历史之后，重点关注将帮助我们创建更逼真动画的 12 个经典 2D 动画原则。随着你对叙事、缓动和节奏越来越熟悉，你将对自己的动画生态系统更有信心。

第三章，学习工具：熟悉 After Effects，教你使用 After Effects 进行动画的基础知识。术语如合成、时间轴和关键帧将开始听起来熟悉，并为你开始学习打下基础。

第四章, 移动起来！使用 After Effects 制作我们的第一个 Lottie 动画，是一个易于遵循的、一步一步的指南，用于创建您第一个动画。通过使用真实世界的例子，您将学习如何设置合成，导入文件，动画制作，调整以及学习基本技巧和特效动画技术。

第五章，与世界分享：使用 LottieFiles，是关于如何导出动画到 JSON Lottie 文件供开发者使用的指南。它还描述了如何完全使用 LottieFiles 平台，并享受创建用于 Telegram 的动画贴纸和图标集的乐趣。

第六章，继续前进！探索持续前进的插件和资源，是找到所有持续前进资源的章节。包括 Adobe After Effects 最佳实践和导出动画时避免问题的注意事项的详细表格。本章还将提供安装创建动画所需的所有插件和工具的逐步说明。

第七章**，lottie-react-native 简介，简要解释了 lottie-react-native 是什么，支持哪些平台，以及如何浏览项目的不同部分，如代码仓库、npm 仓库及其文档。

第八章**，安装 lottie-react-native，是我们将动画在我们的移动应用中运行的第一步。我们将通过必要的步骤，确保 lottie-react-native 在 iOS 和 Android 应用中正确安装。它涵盖了常见陷阱、平台和替代方案，以及为我们的应用准备好首次 Lottie 动画渲染所需的一切。

第九章**，让我们做一些魔法：集成您的第一个 Lottie 动画，解释了如何在我们的应用中集成 Lottie 文件并通过 lottie-react-native 渲染它们。到本章结束时，我们将在 iOS 和 Android 应用中运行一个功能性的动画。

第十章**，如何做到完美：控制您的动画，教您如何播放 Lottie 动画向前、向后、暂停、加速或减速。在本章中，我们将学习如何执行所有这些动作以及许多其他动作，这将使我们能够完全控制动画在我们 React Native 应用中的使用方式。

第十一章**，有任何问题？lottie-react-native 常见问题解答，是使用 lottie-react-native 库时最常问问题的汇编。这份列表提供了库维护者对使用库时最常见问题和挑战的实质性回答。列表按流行度排序，不仅应作为新开发者的快速参考指南，还应作为陷入使用此库的复杂问题的经验丰富的工程师的参考指南。

为了充分利用本书

如果您正在使用本书的数字版，我们建议您亲自输入代码或从本书的 GitHub 仓库（下一节中提供链接）获取代码。这样做将帮助您避免与代码复制和粘贴相关的任何潜在错误。

下载示例代码文件

您可以从 GitHub（github.com/PacktPublishing/UI-Animations-with-Lottie-and-After-Effects）下载本书的示例代码文件。如果代码有更新，它将在 GitHub 仓库中更新。

我们还提供了其他代码包，这些代码包来自我们丰富的图书和视频目录，可在github.com/PacktPublishing/找到。查看它们吧！

下载彩色图像

我们还提供了一份包含本书中使用的截图和图表彩色图像的 PDF 文件。您可以从这里下载：static.packt-cdn.com/downloads/9781803243801_ColorImages.pdf。

使用的约定

本书中使用了多种文本约定。

文本中的代码：表示文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 昵称。以下是一个示例：“我们将通过进入 React Native 项目中的ios文件夹来实现这一点。”

代码块设置如下：

"peerDependencies": { 

    "lottie-ios": "³.2.3", 

    "react": "*", 

    "react-native": "|=0.46" 

  }, 

  "dependencies": { 

    "invariant": "².2.2", 

    "prop-types": "¹⁵.5.10", 

    "react-native-safe-modules": "¹.0.3" 

  }

当我们希望您注意代码块中的特定部分时，相关的行或项目将以粗体显示：

include ':lottie-react-native' 

project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')

任何命令行输入或输出都如下所示：

npm i --save lottie-react-native

粗体：表示新术语、重要单词或屏幕上看到的单词。例如，菜单或对话框中的单词以粗体显示。以下是一个示例：“让我们打开 AE 并点击创建新项目按钮。”

小贴士或重要注意事项

看起来是这样的。

联系我们

我们始终欢迎读者的反馈。

customercare@packtpub.com 并在邮件主题中提及书籍标题。

勘误表：尽管我们已经尽一切努力确保内容的准确性，但错误仍然可能发生。如果您在本书中发现错误，我们将不胜感激，如果您能向我们报告，我们将不胜感激。请访问www.packtpub.com/support/errata并填写表格。

copyright@packt.com，附有材料链接。

如果您有兴趣成为作者：如果您在某个领域有专业知识，并且您有兴趣撰写或为书籍做出贡献，请访问authors.packtpub.com。

分享您的想法

一旦您阅读了《使用 Lottie 和 After Effects 进行 UI 动画》，我们很乐意听听您的想法！请选择www.amazon.ae/review/create-review/error?asin=1803243805为这本书留下您的反馈。

您的评论对我们和科技社区都非常重要，它将帮助我们确保我们提供高质量的内容。

第一部分 - 使用 After Effects 和 LottieFiles 建立基础

在本的第一部分，我们将熟悉 After Effects 和 Lottie。我们将学习从头开始创建 2D 动画。

我们在本节中将涵盖以下章节：

• 第一章, 从 Lottie 开始入门

• 第二章, 创造幻觉：运用 2D 经典动画的基本原理开始滚动

• 第三章, 学习工具：熟悉 After Effects

第一章：开始使用 Lottie

现在，矢量动画几乎被应用于每一个移动应用和网站。它丰富了良好的用户体验设计，帮助设计师引导用户进行交互，并使任何屏幕都充满活力。

然而，将动画添加到我们的网页、iOS、Android 或 React Native 应用程序并不总是像您想象的那么简单。当时，实现动画通常非常耗时，并且会大大增加文件的大小。但有一天，Lottie 终于发布了，光明和色彩进入了动画的世界，尤其是对于移动应用和网站。

在本章中，我们将向您展示如何使用这本书，以便您能最大限度地发挥其作用。此外，您还将了解 Lottie 是什么，为什么它被创建，以及它为设计师和开发者提供的巨大价值。

您将了解 LottieFiles 平台，它的用途，以及 Lottie 动画与 LottieFiles 之间的区别。

此外，您还将了解您将需要用于创建 Lottie 动画的工具以及从哪里获取它们。

到本章结束时，您将完全了解 Lottie 动画是什么以及它如何让设计师和开发者生活更轻松。此外，您将了解 LottieFiles 平台的作用以及如何获取所有必备工具，以便您准备好开始思考您的第一个动画。

在本章中，我们将涵盖以下主要内容：

• 如何使用这本书

• Lottie 简介

• LottieFiles 是什么？

• 理解创建 Lottie 动画的工具

技术要求

如前所述，在本章中，我们将讨论在创建 Lottie 动画的过程中我们将需要的必备工具。其中大部分工具对您免费使用。请注意，Adobe After Effects 不是免费提供的；然而，您可以下载一个 7 天的免费试用版。

此外，您还需要选择一个浏览器，例如 Chrome 或 Safari。

如何使用这本书

在本节中，我们将引导您了解本书的主要方面以及为什么我们认为这是您学习如何使用 Lottie 创建动画的最佳方式。我们不希望这本书只是另一本 After Effects 手册，教您如何动画化图标（当然，我们也会涉及这一点），但我们认为掌握基础知识并能够在打开任何软件之前勾勒出自己的想法并将其实现同样重要。您可以直接跳转到与您兴趣最匹配的章节，但我们强烈建议从头到尾阅读整本书。

我们希望你意识到，创建动画不仅仅是使用一些计算机工具给一个绘图添加一些运动。整个流程创造了魔法，从构思、最初的草图，到通过不同的动画技术如顺畅、节奏和关键帧时间线来创造运动的错觉。在某个时刻，你可能想过为什么这本书会谈论所有这些老式的玩意儿，比如经典 2D 动画？

嗯，我们本可以只涵盖下载动画、将其导入 After Effects 并转换为 Lottie 的过程，这样你就可以在极短的时间内使用 React Native 在你的应用中实现它...是的，那将是最简单和最短的部分（我们也会这样做，不用担心）。

然而，我们想要给你一些关于动画的更多背景知识、技巧和技术，这样当你读完这本书后，你将能够有远见，从头开始创建你自己的独特动画。无论你想动画化什么，我们都会教你基础知识，并提供足够的资源和工具，让你可以在自己的时间和节奏下继续学习。

正因如此，我们决定将这本书分为三个主要部分：

• 第一部分，使用 After Effects 和 LottieFiles 构建基础

• 第二部分，破解 Lottie 动画

• 第三部分，将你的 Lottie 动画添加到移动应用中

在这本书的第一部分，你将学习基础知识。作为一个初步的接触，我们将介绍 Lottie；你将熟悉Lottie和LottieFiles这两个关键词。在你继续阅读的同时，我们将深入了解整个 Lottie 生态系统，并快速浏览一下经典动画的历史。

我们将亲身体验经典 2D 动画的原则，以理解顺畅和关键帧的重要性，这两种流行的技术将帮助我们创造运动的错觉。我们将浏览 Adobe After Effects 环境，了解最相关的功能，以便在第一部分，使用 After Effects 和 LottieFiles 构建基础结束时，我们将为开始我们的第一个动画做好准备。

一旦我们理解了 Lottie、2D 动画和 Adobe After Effects 环境的基础知识，我们就会开始创建我们的动画图标。在这本书的第二部分，我们将引导你逐步游览一个真实项目，以创建我们的第一个独特动画。我们将把在前三章中学到的所有知识付诸实践。如何做到呢？嗯，我们将从一个简单的项目开始，在这个项目中，我们将动画化我们的第一个图标。

通过绘制和草图，我们将创建一个故事板，这将帮助我们理解我们想要我们的图标做什么。一旦完成，我们将把这个图标导入 Adobe After Effects，并应用书中早期学到的二维动画技巧来让它栩栩如生。到第二部分结束，即破解 Lottie 动画，我们将知道如何最好地导出我们的动画，并准备好将其交给开发者。

所以，想想看；无论你是设计师还是开发者，一旦你完成了这本书的前两部分，你将能够构思、草图、插图、动画和导出你自己的独特想法。

让我们继续前进。所以，我们已经完成了我们的第一个动画并导出了它。一切准备就绪。我们迫不及待地想看到它在我们的应用或网站上实现。那么，接下来是什么？

现在是这本书的第三部分发挥作用的时候了，这就是为什么它如此重要的原因。让我们想象一下，你已经花了几天时间设计和创建你的动画（是的，做得好；动画不是一件容易的事情，至少不是第一次）。你试图将它上传到你的应用或应用的网站上，但出了点问题？也许它看起来不像它应该的样子，或者应用中的动画看起来和网站上的不一样。也许它太重了。它是模糊的吗？它是响应式的吗？

有很多事情可能会毁掉你的精彩动画，但别慌张。这就是第三部分，将你的 Lottie 动画添加到移动应用中，派上用场的地方。那里，你将学习所有你需要知道的内容，了解如何简单、轻松地将你精彩、令人惊叹且精心制作的 Lottie 动画应用到任何平台上。多亏了 Lottie 和 React Native，你的动画不会看起来像素化，也不会太重，或者做任何其他奇怪的事情。

一旦你掌握了使用 React Native 创建自己的动画并将它们上传到你的平台的过程，这些问题就不会再发生了，你那精彩而独特的动画将像它本应的那样在屏幕上闪耀。

现在，既然你已经了解了为什么这本书被分为三个不同的部分，以及为什么它们都如此重要，让我们继续探索 Lottie 是什么。

Lottie 简介

现在我们彼此了解得更好了，让我们看看所有这些关于 Lottie 的喧嚣是怎么回事。让我们从开始讲起，谈谈一些历史。

为什么叫 Lottie？

Lottie这个名字是为了纪念 20 世纪的德国电影导演夏洛特·“洛特”·莱因格尔，她成为了剪影动画的最杰出先驱。这是一种基于逐帧移动和用摄像机拍摄的剪影人物的技术。

舞台背后的男人

在苹果公司决定 Macromedia Flash 不能接近任何 iPod 或 iPhone 之后，将动画添加到我们的应用程序和网站上变成了一个噩梦。动画必须以低质量格式导出；否则，开发者必须自己重新编写代码。你可以想象有多少这样的动画最终变成了什么样子：文件大小太大，可视化效果真的很差，过程痛苦，结果令人沮丧。

但然后，在 2015 年，一直担任 Action Script 开发者的 Hernan Torrisi 有了一个想法。他开始构建一个用于 After Effects 的播放器和导出器，这就是 Bodymovin 插件诞生的地方。为了清楚起见，Bodymovin 插件将动画转换成 JSON 文件，但我们将稍后讨论这一点。

Torrisi 还开发了一个基于浏览器的渲染器，它可以将 Bodymovin 插件的 JSON 文件播放回动画。

然后，当 Airbnb 工程师 Brandon Withrow（iOS）、Gabriel Peal（Android）和 Leland Richardson（React Native）意识到这些基于 JSON 的动画的强大功能后，他们决定与动画师和经验丰富的设计师 Salih Abdul-Karim 合作，帮助开发 Bodymovin 插件的 JSON 的 Android、iOS 和 React Native 渲染器。

同时，LottieFiles 平台也发布了，一个由动画师、设计师和开发者组成的庞大社区应运而生。在这里，他们可以预览、测试和分享自己的动画。

2020 年，dotLottie 被创建出来，作为一种标准化格式的手段。

2021 年初，同一个团队提出了 .JSON 格式；然而，LottieFiles 插件增加了额外的功能，我们将在稍后更深入地介绍。

什么是 Lottie？

图 1.1 – Lottie 图标

我花了一些时间才弄清楚 Lottie 究竟是什么。关于 Lottie、LottieFiles、Lottie 文件、Lottie 动画、dotLottie 和 LottieFiles 插件 的讨论有很多，有时可能会有些令人困惑。

实际上，Lottie 是一个用于 iOS、Android 和 React Native 的库，它将我们在 Adobe After Effects 中创建的动画转换成代码行。它做得很简单，而且不需要编写任何代码；我们只需在 After Effects 中安装一个开源插件，按下一个按钮来渲染我们的动画，然后将其导出为 JSON。这不就像魔法一样吗？

如果你是一名设计师（或者愿意发挥创造力的开发者），这意味着你将能够使用 After Effects 创建自己的精彩动画，并在几秒钟内导出它们，而无需开发者编写代码。

如果你是一名开发者，这意味着你将不再需要编写动画代码，这将为你节省大量时间，你将能够轻松地将动画实现到任何网站或应用程序中。

而最好的是？动画将看起来应该是的样子，文件大小将保持较小，图像将是可伸缩的。所以，这对每个人来说都是双赢。

现在，为了澄清和总结，最初，Lottie 被用来命名一个用于 iOS、Android、网页和 Windows 的库。但今天，它通常被用来指代从 After Effects 导出的 .JSON 文件，也称为动画文件。

下面的图表描述了 LottieFiles 的优势：

图 1.2 – 使用 Lottie 文件的一些关键优势

你还需要更多理由开始使用 Lottie 吗？

是的，我们爱上了 Lottie，并且不会停止谈论它如何让所有团队的日常生活变得更轻松。以下是原因。

它非常容易使用

使用 Lottie 动画就像遵循几个简单的步骤一样简单：

1. 在 After Effects 中创建你的动画。

2. 使用 LottieFiles 或 Bodymovin 插件渲染和导出动画（我们将在稍后更深入地讨论这一点）。

3. 在 LottieFiles 编辑器 中测试动画，以确保一切都在正确的位置。

4. 将 .json 文件添加到我们的网页或应用平台，我们就完成了：

图 1.3 – After Effects、Bodymovin 工具的图标和 .JSON 格式文件

它可以在任何地方使用

Lottie 是多平台和开源的。它可以在任何网页或移动平台上使用。我们甚至可以在像 Telegram 这样的消息平台上创建和运行 Lottie 作为贴纸，或者在桌面应用或手表应用中使用它们：

图 1.4 – 多平台

文件大小将不再是问题

由于 Lottie 是基于矢量的动画，你可以想象文件大小将会非常小。所以，忘记那些老旧且沉重的 PNG 或 GIF 文件吧，它们会让我们的产品看起来质量低下：

图 1.5 – PNG 和 GIF 图像文件格式

交互性和动态性

Lottie 不仅由无数的酷炫动画循环组成。它还可以以多种方式使用，为用户提供一些交互。例如，我们可以将动画与页面滚动同步，并观察它在滚动时来回移动。

此外，我们还可以从特定帧创建循环，在悬停时播放片段，或将光标位置与动画同步。想象一下一些可爱的大熊猫眼睛跟随用户的鼠标指针；这有多酷？

图 1.6 – 交互功能

可伸缩

向量动画文件的另一个优点是它可以无限放大而不会变成像素化图像。此外，它是响应式的，可以放大或缩小，并按需适应我们的设计。所以，不用担心在您的网页或移动应用中的像素化图像。从现在开始，它们将看起来令人惊叹，并将您的用户体验提升到新的水平：

![图 1.7 – 向量图像与栅格化图像可视化]

![图片 B17930_01_07.jpg]

![图 1.7 – 向量图像与栅格化图像可视化]

因此，现在我们已经澄清了 Lottie 是什么，让我们继续了解 LottieFiles 及其功能。

什么是 LottieFiles？

LottieFiles成立于 2018 年，由位于旧金山和吉隆坡的Nattu Adnan和Shafiu Hussain创立。

它最初是一个设计师和开发者的社区，但发展非常迅速，已经演变成一个提供与动画相关的工具和资源的平台，设计师、开发人员和工程师可以在其中编辑、测试和展示动画：

![图 1.8 – LottieFiles 平台]

![图片 B17930_01_08.jpg]

![图 1.8 – LottieFiles 平台]

LottieFiles.com 平台使得测试动画变得非常简单，无需先将它们实现到应用和网站上。它已经变得如此受欢迎，以至于已经被世界各地的许多公司使用，例如亚马逊、迪士尼、谷歌、微软、优步、耐克和 Spotify 等，仅举几例。然而，这仅仅只是使用它的一个原因。让我们看看我们还能用 LottieFiles.com 做什么。

我可以用 LottieFiles 做什么？

如前所述，LottieFiles 在设计师和开发者中变得非常流行，我们可以说这个平台改变了动画的制作方式。多亏了 LottieFiles，我们现在可以在实现之前测试动画，直接在平台上编辑它们，以及更多。

让我们更深入地看看我们可以在 LottieFiles 平台上做什么。

动画库

我们可以从 LottieFiles 社区制作的数千个免费动画中进行搜索。这些动画可以用于我们的个人或商业工作，并且可以根据我们的项目或客户需求进行编辑和调整。

这些动画可以下载为 Lottie、GIF、MP4 或 JSON 文件，并用于我们的网站、应用、社交媒体项目、消息平台等。

这可以为我们节省大量时间。让我们想象一下，我们需要一个基本的加载动画来添加到屏幕之间。我们只需要一个旋转的圆形，颜色为我们的企业绿色。我们有两种选择：我们要么创建一个新的 After Effects 动画，导出它，并测试它，要么直接从免费的 LottieFiles 库中下载一个，更改其颜色，然后通过点击按钮生成新的代码。这听起来既快又简单，但是，让我们不要担心这一点。我们将在未来的章节中更深入地探讨这个问题：

![图 1.9 – LottieFiles 动画库的网页视图]

![图片 B17930_01_09.jpg]

![图 1.9 – LottieFiles 动画库的网页视图]

招聘动画师

LottieFiles 拥有使用 Lottie 的最大的设计师社区。如果您需要定制的动画，而您（目前）没有时间或技能（来做），lottiefiles.com/ 是您可以搜索众多创意人士的地方，他们可以帮助您使您的项目栩栩如生：

图 1.10 – LottieFiles 动画社区网页视图

市场

在 COVID-19 封锁期间推出的LottieFiles 市场提供了许多由世界上最优秀的动态设计师制作的优质动画，包括个人和套装：

图 1.11 – LottieFiles 市场网页视图

LottieFiles 预览

在 LottieFiles 平台上，您可以通过拖放简单地将自己的 Lottie 动画预览、测试和分享，然后再上传到您的项目中。您也可以通过相同的网站以及在 iOS、Android 或桌面应用程序中完成此操作：

图 1.12 – 在网页浏览器上的 LottieFiles 预览功能

LottieFiles 编辑器

在我看来，编辑器是 LottieFiles 提供最强大的工具之一。这里您可以上传任何 Lottie 动画（您自己的或刚刚在库中找到的），并且可以非常容易地进行调整。您可以调整尺寸、帧率、持续时间、速度和颜色。此外，您可以将其导出为 Lottie .json 文件或将其分享回 LottieFiles 库：

图 1.13 – 在网页浏览器上的 LottieFiles 编辑器功能

从 Lottie 到 Telegram 贴纸

多亏了 LottieFiles，创建 Telegram 贴纸就像创建动画一样简单，使用 After Effects 的 Bodymovin 或 LottieFiles 插件导出，然后与 Telegram 的贴纸机器人进行对话。然而，我们暂时不必担心这个。我们将在未来的章节中深入探讨：

图 1.14 – Telegram 图标

将 SVG 转换为 Lottie

如果您想跳过 Adobe After Effects 来创建动画，现在可以了。LottieFiles 平台为您提供了创建优秀动画而无需动画（我知道，这听起来有点令人困惑）的选项。但只需上传一个 SVG 文件，以及将 SVG 转换为 Lottie 的工具，您就可以在几秒钟内创建出精彩的动画：

图 1.15 – 在网页浏览器上的 LottieFiles“将 SVG 转换为 Lottie”功能

将 Lottie 转换为 GIF

使用 LottieFiles，您也可以非常快速地将您的 Lottie 动画转换为 GIF 文件，只需将 JSON 文件上传到平台并管理一些设置即可。现在您的动画 GIF 就可以使用了：

![Figure 1.16 – The LottieFiles "Converting Lottie into GIF" feature on a web browser]

![img/B17930_01_16.jpg]

图 1.16 – 在网页浏览器上的 LottieFiles “将 Lottie 转换为 GIF” 功能

Lottie JSON 编辑器

如果您是开发者，不想经历所有 After Effects 部分，而是直接跳入代码，使用 JSON 编辑器，您可以从内部更新您的动画。更改一些参数，并实时查看结果：

![Figure 1.17 – The LottieFiles .JSON file editor feature on a web browser]

![img/B17930_01_17.jpg]

图 1.17 – 在网页浏览器上的 LottieFiles .JSON 文件编辑器功能

Lottie 学习

LottieFiles 网站还为您提供了许多资源，帮助您开始使用 Lottie。我建议您浏览其视频课程、博客、常见问题解答页面和论坛，以了解更多关于 Lottie 是什么以及您可以做什么的信息：

![Figure 1.18 – Web view of the Lottie Learn resources for designers and developers]

![img/B17930_01_18.jpg]

图 1.18 – Web view of the Lottie Learn resources for designers and developers

Lottie 和 LottieFiles 之间的区别是什么？

为了明确起见，Lottie 用于调用动画 JSON 文件，而 LottieFiles 是一个平台，用于上传、测试和分享您的 Lottie 动画。

因此，现在我们已经了解了 Lottie 文件是什么以及 LottieFiles 平台用于什么，让我们看看我们将需要哪些工具来开始创建我们的动画。

创建 Lottie 动画和集成的工具

在本节中，我们将学习在开始创建我们自己的 Lottie 动画之前需要安装的工具和插件。如果您之前没有听说过它们，请不要担心。在本节中，我们将涵盖所有主要工具，例如 Adobe After Effects、Adobe Animate 和 LottieFiles 平台。

如果您需要有关如何安装这些工具、插件和扩展的更多信息，请继续阅读 第六章，不要停止！探索将帮助您继续前进的插件和资源，以获取 安装指南。

Adobe After Effects

Adobe After Effects 被称为行业标准的多媒体图形和视觉效果软件。它用于创建电影标题、开场白、过渡、电影和视频的视觉效果以及动画。

因此，如果我们想创建自己的动画，我们需要安装 Adobe After Effects。没有其他方法，至少直到最近还没有（继续阅读）。无论如何，请记住，这不是一个免费工具。然而，在购买之前，Adobe 提供了安装 7 天免费试用版的选项。您可以在 www.adobe.com/products/aftereffects.html 找到它。

After Effects 的 Bodymovin 扩展

.json 格式，稍后可以随时调整。你可以在 exchange.adobe.com/creativecloud.details.12557.bodymovin.html 下载你的 Bodymovin 插件：

图 1.19 – Bodymovin 图标

Adobe After Effects 的 LottieFiles 扩展

我们已经讨论了很多关于 Bodymovin 扩展的内容。但最近，Lottie 也发布了适用于 After Effects 的 LottieFiles 插件，该插件可以将你的动画导出为 .Lottie 文件。Bodymovin 和 LottieFiles 之间的区别在于 LottieFiles 插件中新增加的功能。一旦我们讨论了如何在 Bodymovin 和 LottieFiles 插件中导出你的动画，我们将会更深入地探讨这一点。

在 lottiefiles.com/plugins/after-effects 下载 LottieFiles for After Effects 扩展：

图 1.20 – Adobe After Effects 图标

Adobe Animate 的 Lottie 扩展

如果你不太熟悉 After Effects 并且想尝试其他工具来创建你的动画，现在你可以了！看起来 Lottie 的人刚刚发布了 Adobe Animate 的 Lottie 插件的早期 Beta 版本。

我们可以说 Adobe Animate 是曾经被称为 Macromedia Flash 的技术的演变，它被用来使矢量图形生动起来。

如果你想尝试一下，你可以从 lottiefiles.com/plugins/animate 下载 Adobe Animate 插件。然而，在这本书中，我们将专注于 Adobe After Effects：

图 1.21 – Adobe Animate 图标

LottieFiles 平台

我们可以在我们的手机和电脑上下载并安装 LottieFiles 来预览、测试和分享我们的 Lottie 动画文件。以下是针对 Mac 和 Windows 的相关资源：

• LottieFiles for Desktop: lottiefiles.com/desktop

• LottieFiles for Android: play.google.com/store/apps/details?id=com.lottiefiles.app&hl=en&gl=US

• LottieFiles for iOS: apps.apple.com/us/app/lottiefiles/id1231821260

图 1.22 – LottieFiles 图标

这就是我们创建自己动画所需的所有内容。然而，Lottie 给我们提供了与其他工具和软件（如 Figma 或 Sketch）的更多集成。你可以在 lottiefiles.com/integrations 查看它们。

摘要

那么，让我们来回顾一下。在本章中，我们了解到动画对于任何用户体验项目的重要性。我们还理解了 Lottie 背后的意义及其起源。我们发现了赫尔南·托里斯伊是谁，以及 Lottie 是如何让设计师和程序员的日常生活变得更轻松的。另一方面，我们现在知道了 Lottie 和 LottieFiles 之间的区别。此外，我们还了解了 LottieFiles 平台的主要功能，如编辑器、查看器、市场和企业库。它们都已经安装了主要工具，所以你准备好开始创建自己的动画了。

现在，我们可以继续前进，开始讨论动画。让我们进入下一章，学习 2D 动画的基础知识。

第二章：创造错觉：用 2D 经典动画的基本原则开始滚动

动画究竟是什么？从动画的基本 GIF 到大型动态图形电影，我们几乎可以在每个在线作品中找到动画。但是，为什么动画如此重要？因为通过在我们的网站和应用程序中添加动画和微动画，它将以多种方式帮助我们与用户沟通。它将吸引注意力，增加用户参与度，传达反馈，帮助我们引导用户和用户行为，并丰富用户体验（UX）。

在本章中，我们将专注于2D 经典动画及其12 个原则。我们首先将简要回顾动画的历史和基础，以及用于创造错觉的不同技术。

一旦我们了解了这些，我们将学习动画的 12 个原则，这将帮助我们使我们的动画看起来更逼真。我们还将学习如何仅用铅笔和纸张来设置一切，从绘制我们的第一个概念到创建我们自己的故事书，使我们的动画易于理解。

然后，我们将学习我们将要在After Effects（AE）中实现的不同方面，例如关键帧、运动、变换、时间和缓动。

到本章结束时，你将能够区分用于创建 2D 动画的不同技术。你还将了解 12 个原则，使你的动画看起来更真实，并且还将了解我们将在 AE 中使用的主要功能。

在本章中，我们将涵盖以下主题：

• 2D 动画的历史和基础

• 2D 动画的 12 个原则

• 框架、关键帧和中间帧来定义动画中的主要重要时刻

• 将我们的图标从 A 点移动到 B 点

• 使用缓动、时间和时间轴来创建更逼真的动画

• 绘制我们的第一个图标——从概念到分镜脚本

技术要求

为了通过本章，你需要以下内容：

• 铅笔

• 纸张

插画技能不是必需的！如果你不知道或者不想自己绘制图标，我们会提供下载的文件；然而，我们强烈建议你拿一张纸和一支铅笔，享受一下绘画的乐趣 😊。

2D 动画简介

那么，什么是动画？动画是将生命赋予没有生命的东西的能力。当我们谈论经典 2D 动画时，我们指的是一系列单独绘制且略有调整的静态图像；当它们结合在一起时，会产生运动的错觉。

从史前时代起，我们可以找到几乎与人类一样古老的动画参考。如果我们追溯到 35000 年前，当人类还住在洞穴里的时候，我们发现了一些有多个腿的动物的绘画，这是他们表示运动概念的方式。

图 2.1 – 八条腿来展示运动

古埃及人和希腊人曾经用略有调整的手臂或腿来绘制单独的图像，以给人留下移动形象的印象。因此，我们可以说动画一直被用于各种文化中。

图 2.2 – 古埃及女神伊西斯在神庙柱子上的形象，以及装饰有运动图像的古希腊陶罐

让我们稍微接近一点时间。在 1640 年，阿塔纳修斯·基歇尔创造了幻灯机，这是第一个将一些移动图像投射到墙上的物品。他是通过在玻璃板上绘制不同的单独插图并以固定速度移动它们来做到这一点的，从而产生了移动图像的错觉：

图 2.3 – 阿塔纳修斯·基歇尔的幻灯机

除了所有这些，1824 年，彼得·马克·罗杰特“发现”了视觉持久性，我们说“发现”是因为这不是第一次提到这个话题。视觉持久性意味着，在一段时间内，我们的眼睛会保留我们刚刚看到的每一个图像，这就是运动错觉的原因。换句话说，在人类的大脑中，多个图像融合成一个单一的移动图像。

从那时起，其他光学玩具相继问世，例如魔术转盘、幻影盘、活动视镜、普拉西诺斯科普和翻页书，它们都负责为人类眼睛创造运动的错觉。

在 1906 年，托马斯·爱迪生和纽约报纸卡通画家詹姆斯·斯图尔特·布莱克顿（他们在 1896 年相遇，当时詹姆斯·斯图尔特·布莱克顿采访了托马斯·爱迪生）向公众发布了第一部动画图片，使用了定格摄影技术。它被称为《滑稽面孔的幽默阶段》。

图 2.4 – 第一部动画电影《滑稽面孔的幽默阶段》的序列

但是，第一部手绘动画电影和第一部被认为是动画卡通电影的是《幻想曲》，由埃米尔·科尔制作，于 1908 年在巴黎首映。

几年过去了，1928 年，随着沃尔特·迪士尼的到来，米老鼠在《威利号汽船》中首次亮相，这是第一部带有声音的卡通片，它使用了细胞动画制作。每个单独的帧都是画在赛璐珞上，并用多镜头相机拍摄。背景被放置在不同的图层上，沃尔特·迪士尼设法创造了一种既滑稽又逼真的运动效果。它也被称为第一部同步声卡通。

在 1937 年，迪士尼发布了第一部长篇动画电影，《白雪公主和七个小矮人》，这标志着经典二维动画的黄金时代的开始。

除了迪士尼，一些其他动画工作室也开始出现：马克斯·弗莱舍制作了《波佩鸭》短片和《 Felix the Cat》（1919 年），被认为是第一位动画电影明星，也是第一位被商品化的；华纳兄弟制作了《洛 oney Tunes》、《Merrie Melodies》和《Bugs Bunny》；以及米高梅制作的《汤姆和杰瑞》。

第二次世界大战后，情况发生了变化。随着电视的出现，工作室开始使用有限的动画技术制作电视卡通，以节省时间、精力和金钱，当然，以便能够大量生产卡通。

在 1960 年，第一部黄金时段动画系列出现了，由汉纳-巴伯拉制作的《弗林斯通一家》。同一家工作室还制作了《瑜伽熊秀》和《哪里有斯库比狗！》等节目。

日本动画，或如我们今天所称呼的动漫，在日本同时变得非常流行。它基于有限的动画技术，注重美学，通过放大和精心设计的背景来创造氛围。

在 1979 年，一位年轻的乔治·卢卡斯创立了卢卡斯影业电脑部门，这家公司在 1986 年被史蒂夫·乔布斯收购并更名为皮克斯。

到那时，计算机生成图像（CGI）变得越来越受欢迎，在 1995 年，动画历史上的一个主要时刻发生了。皮克斯的《玩具总动员》上映。其他大型计算机动画公司也出现了，包括梦工厂和照明娱乐。

但是，动画界不仅仅围绕迪士尼或皮克斯。那里有那么多艺术家和工作室值得专门一提：吉卜力工作室、阿德曼工作室和莱卡工作室，仅举几个例子。

因此，现在我们已经对动画历史有了几点了解，让我们继续到下一部分，学习 2D 动画的 12 个原则，这将帮助我们使我们的动画看起来更真实。

2D 动画的 12 个原则

动画一个物体、角色或类型并不是一件容易的事情，但通过一些技巧和技术，它可以变得容易得多，并且会使我们的动画看起来更逼真、更可信。

动画制作的 12 个原则是由迪士尼动画师奥利·约翰斯顿和弗兰克·托马斯在 1981 年的书《生命的幻觉》中提出的。他们是参与创造迪士尼动画风格的一些人，这 12 个原则背后的想法是制作更逼真的动画，并创造一种错觉，即这些角色是根据物理定律行动的。

我们可以说，《生命的幻觉》已经成为全球任何动画师、设计师、艺术家或对创作动画感兴趣的任何其他人的圣书。当然，这本书是多年前写的，但即便如此，每个原则对动画制作过程都是至关重要的，并且可以应用于动画的数字制作过程。让我们不要浪费时间，继续看看这 12 个原则是什么。

挤压和拉伸

挤压和拉伸的原则为动画增加了重量和灵活性的概念。在下面的例子中，你可以看到弹跳球在所有阶段都保持相同体积的同时如何拉伸和挤压：

![图 2.5 – 挤压和拉伸弹跳球示例

图 2.5 – 挤压和拉伸弹跳球示例

期待

我们使用期待来为即将发生的动作准备观众。我们可以用它来表示物理动作和非物理动作。例如，想象你即将踢球；在你踢球之前，你首先会做的事情是移动你的脚向后。这个动作就是动作的期待。

非物理动作，例如，当一个角色在另一个角色进入之前看向屏幕的一侧。通过看向一侧，我们是在期待另一个角色的进入动作。

![图 2.6 – 足球运动员在踢球前的期待动作

图 2.6 – 足球运动员在踢球前的期待动作

场景布置

这个原则基于我们所说的电影和戏剧中的场景布置，它被用来引导观众的注意力到我们想要屏幕上的内容，无论是角色还是动作。我们可以通过使用光线和阴影、角色在屏幕上的位置以及摄像机的位置和角度来集中观众的注意力。但是，记住，在布置动作或角色时，重要的是观众一次只看到一个想法。

![图 2.7 – 同时布置三个动作与一个动作

图 2.7 – 同时布置三个动作与一个动作

直通动作和姿势到姿势

动画制作过程有两种不同的方法，直通动作和姿势到姿势，它们通常会被结合起来使用。

在直通动作中，场景是逐帧动画化，一个接一个，从开始到结束。这个过程用于创建更流畅和新鲜感十足的动作和动画。

姿势到姿势是我们绘制动作的主要时刻，或者我们称之为关键帧，当需要更多对动作的控制时使用。

所有这些话，如果我们谈论计算动画，姿势到姿势有更多的优势，因为我们能够计划和绘制主要的关键帧，而中间帧将自动完成。

![图 2.8 – 姿势到姿势过程动画中的主要三个关键帧

图 2.8 – 姿势到姿势过程动画中的主要三个关键帧

随动和重叠动作

这两个动作都有关联，因为它们都帮助给出更逼真的运动幻觉。随动是动作结束时的情况。动作停止，但某些元素仍然在移动。想象一下一个人在跑后停下来；他们的衣服、头发甚至皮肤都会继续移动。

这些部分的微小速度和运动变化将使我们的动画看起来更加逼真；这就是我们所说的重叠动作。

图 2.9 – 应用跟进和重叠原理后正方形的运动行为

![图 2.10 – 带有缓动和不带有缓动的动画对比图 2.9 – 应用跟进和重叠原理后正方形的运动行为## 缓入和缓出当一个物体或人在现实世界中移动时，它在运动的开始时加速，在运动的结束时减速。这种效果就是我们所说的动画中的缓入和缓出，这将使我们的动画看起来更加逼真。一旦你理解了这个效果是如何工作的，在 AE 中应用它将会非常简单，这就是为什么我们将在本章接下来的部分更深入地探讨它。![图 2.10 – 带有缓动和不带有缓动的动画对比

弧线

世界上几乎所有的事物都是以弧形运动的，例如，当我们抛掷一个物体时，它会沿着抛物线轨迹移动。如果我们不考虑弧线原理，我们的动画将看起来很僵硬，缺乏表现力。

![图 2.11 – 弧形和直线关键帧动画示例

图 2.11 – 弧形和直线关键帧动画示例

二级动作

添加到主要动作的每一个单独的动作都被称为二级动作，但不要与跟进和重叠动作混淆。二级动作基本上是小的动作或手势，用来支持角色的主要动作，并用于为动画角色本身增添更多个性。

让我们给你举一个例子。想象一下我们的角色，让我们称他为 Max，正在吃三明治。我们可以用两种不同的方式来表示这个场景：

• 不带有二级动作：如果我们不给 Max 添加任何二级动作，他只是张开和闭上嘴巴来吃三明治。没有眨眼，没有添加眉毛动作，只是 Max 的嘴巴和三明治在这里发生变化（如以下图所示）。这看起来很奇怪，对吧？而且，从我们的分镜脚本来看，你能判断出三明治是好吃还是不好吃吗？Max 是否在享受它？我们无法确定。

• 带有二级动作：现在，让我们在这里添加一些二级动作。例如，Max 在吃三明治之前会舔嘴唇，在第一口三明治时会闭上眼睛，最后，他会微笑。

你能看出区别吗？通过查看分镜脚本，我们可以看出 Max 对吃三明治很兴奋（舔嘴唇），花时间仔细品尝（咬一口时闭上眼睛），最后，他享受着它。我们可以肯定地说三明治味道很好（因为他笑了）。所有这些帮助我们理解主要动作的小动作都被称为二级动作。

图 2.12 – 无次要动作与次要动作分镜

时机

时机指的是我们需要用来表示动作的绘图或帧，它可以用来建立重量、情感和比例。我们将在接下来的章节中深入探讨这一点，但让我们先快速看一下这个简单的例子：想象你有两个球，大小相同但重量不同。

假设一个是由木头制成的，另一个是由铁制成的。如果我们击打它们，哪一个会花费更长的时间，或者说，哪一个会花费更多的帧数来移动？正是这样！铁球更重，加速需要更多的时间，所以当我们击打它时，它会移动得更慢，并且移动的距离更短。

图 2.13 – 铁球和木球的时机

夸张

在动画中，有时多即是少。夸张可以引导我们创造出更深入、更可信的角色。但是，我们如何做到这一点呢？通过夸张角色或物体的动作和情感；如果我们的角色很高兴，让我们让他们更高兴，如果他们生气，让我们让他们更生气，等等。然而，我们始终试图保持平衡，，否则我们的动画会看起来超现实。

图 2.14 – 夸张原则。真实与夸张的立方体堆叠下落动作的例子

素描

实心绘制意味着通过绘图、阴影、透视和平衡赋予角色某种 3D 外观，使其具有体积和重量。此外，我们必须避免制作对称的角色（或镜像），相反，让我们尝试让左右两侧处于不同的位置。

图 2.15 – 镜像视图与侧面视图

吸引力

吸引力（或称现实生活中表演中的魅力）是任何单个角色为了保持观众兴趣所必须具备的特征。然而，吸引力并不意味着角色必须长得好看；它远远超出了这个范畴。他们需要有趣。例如，如果我们想让我们的角色显得更天真，我们会用圆润和大的形状来描绘脸和眼睛，或者相反，如果我们想让我们的角色成为反派，我们将使用更尖锐的形状和三角形的脸。

图 2.16 – 吸引力示例

这就是我们对 12 个动画原则的概述。所以现在，既然你知道了如何使动画看起来更逼真和吸引人，我们将更深入地探讨我们刚刚讨论的一些原则，但更多地侧重于计算机动画。

帧数、关键帧和中间帧

动画这个词来源于拉丁语单词animātiō，意思是赋予生命的行为。它是通过一系列连续的绘图来模拟运动，一个接一个地放置，当一起播放时，让我们看到魔法发生。然而，这种运动并不存在，它基于我们在本章前面提到的视觉持久性。

帧数

在计算机动画中，这些连续的绘图被称为帧，所以每个单独的绘图，用于创建运动幻觉，本身就是一个帧。不仅如此，帧还会决定我们动画的持续时间和质量。所以，想象一下，我们想在 1 秒内将一个物体从点 A 移动到点 B。我们可以选择我们想要使用的帧数，但让我们看看区别。让我们用以下数量的帧在 1 秒内将球从点 A 移动到点 B：

• 选项 1：25 帧

• 选项 2：5 帧

你能想出会有什么不同吗？

在选项 1 中，我们的眼睛会在 1 秒内看到 25 帧发生，而不是在选项 2 中我们眼睛会捕捉到的 5 帧。结果是，选项 1 将比选项 2 平滑得多。

![图 2.17 – 由 25 帧组成的 1 秒动画与 5 帧动画的比较

![图片 B17930_02_17.jpg]

图 2.17 – 由 25 帧组成的 1 秒动画与 5 帧动画的比较

然而，我们是否需要这么多帧来制作这种动画？这取决于，这就是我们将会讨论帧率的地方。但现在，让我们先放下这个新概念；当我们到达在 AE 中设置电影的时候，我们将在第四章，Move It! 使用 After Effects 动画我们的第一个 Lottie中讨论它。

所以，回到我们的帧；那么关键帧呢？

关键帧

关键帧是动作中最重要的帧；动画越简单，我们需要的关键帧就越少。我们通常在动作发生变化时放置关键帧。例如，在图 2.18中，运动的起始和结束位置是关键帧，除非我们想在中间让球跳跃，否则我们不需要更多的关键帧来设置我们的动画：

![图 2.18 – 线性运动的起始和结束关键帧

![图片 B17930_02_18.jpg]

图 2.18 – 线性运动的起始和结束关键帧

相反，在图 2.19中，我们需要在中间添加一个额外的帧，正好在球的位置将要改变的地方，就像一个拐点：

![图 2.19 – 弹跳球的三个关键帧

![图片 B17930_02_19.jpg]

图 2.19 – 弹跳球的三个关键帧

中间帧

但是，那么其他帧会发生什么呢？我们称它们为中间帧，这些是我们为了从关键帧 1 到关键帧 2 创建运动所必需的帧。这些中间帧并不是定义我们的动画，而是使其看起来更平滑。

在经典的 2D 动画中，有人负责逐个手动绘制所有这些中间帧；在计算机动画中，我们使用的工具或软件可能会为我们做这件事，我们称之为补间。

图 2.20 – 五帧动作中的中间帧

AE 是这些工具之一，它会为我们生成中间帧，这样我们就可以专注于确定关键帧。在 AE 中，我们可以将这些关键帧应用不同的参数来改变它们的方面，例如颜色、位置、大小、旋转、缩放或放置。这些可以从一个关键帧更改为另一个，而无需我们逐帧创建，这真是太神奇了，因为它为我们节省了大量的努力和时间。在第四章，“用 After Effects 制作我们的第一个 Lottie 动画”，我们将学习如何处理任何提到的参数。

所以，在这些例子中，我们刚刚看到了帧、关键帧和中间帧是如何工作的。我们学习了如何表示线性弹跳球动画。太棒了！然而，如果我们将这些帧放置在我们的 AE 文档中并运行它，动画看起来会很奇怪，并且缺乏真实感，你知道为什么吗？

当然，我们缺少了本章前面讨论的重要原则，但你记得是哪些吗？我们正在讨论时序和缓动。所以，让我们更深入地探讨这两个概念，看看我们如何使我们的动画看起来更逼真。

时间线、时序和缓动

在上一节中，我们了解了帧是如何工作的；现在，让我们看看我们如何在时间和空间上放置它们，以便我们的动画获得这种真实感。我认为很难单独谈论其中一个概念而不涉及其他概念，所以我将这三个概念放在一起。

时间线

首先，让我们谈谈时间线，并专注于线性运动。既然我们已经确定了两个关键帧和中间帧，让我们看看如何将它们放置在时间上。我们该如何做呢？我们将我们的帧放置在时间线上。

时间线是将动画所需帧数划分成线的，所以这里又出现了帧率。如果我们决定想要 25 帧率的动画，那么我们的时间线中每秒将有 25 帧，所以如果我们有一个 2 秒的动画，我们的时间线中将有 50 帧。不用担心所有这些概念听起来有点抽象；我们知道，如果你从未参与过动画，这可能很难理解，这就是为什么我们将在下一章中也涵盖这些内容。

图 2.21 – 帧率的示意图

让我们回到我们简单的五帧动画。我们首先做的事情是绘制五帧，保持它们之间相同的间距，就像图 2.22中所示。正如我们之前提到的，如果我们用 AE 运行这个动画，它会看起来很尴尬，因为球没有加速度，也没有减速。那么我们应该怎么做？对，我们需要检查每一帧的时间，并添加一些缓动。

![图 2.22 – 线性运动

图 2.22 – 线性运动

时间和缓动

正如我们之前提到的，如果我们用 AE 运行我们的动画，它会看起来很尴尬，因为球缺少加速度和减速的感觉。在计算机动画中，我们称之为缓动。缓入用于加速，缓出用于减速。当然，在 AE 中我们可以按一个按钮自动完成这个操作，但我们需要首先了解它是如何工作的，以便知道我们在做什么，对吧？

所以，如果我们必须在我们五帧动画中表现这一点，我们会将第二帧和第四帧移动到极端位置附近，以表示加速度并减缓运动感，就像图 2.23中所示：

![图 2.23 – 在我们的五帧时间线中展示出入的缓动

图 2.23 – 在我们的五帧时间线中展示出入的缓动

我们将在讨论 AE 及其特性时再次回到这一点，但我们认为在继续前进之前，你理解这些概念非常重要。

现在，你已经学习了关于时间线、时间和缓动的基础知识，让我们开始享受乐趣，继续到下一节。让我们创建我们的第一个图标！

绘制我们的图标

我们知道，在这些最后几节中，我们走过了很多历史和理论。你已经学到了很多新单词和概念，但对我们来说，你首先学习经典动画的基础，然后再开始使用动画工具是非常重要的。因为工具就是工具。当然，它们非常棒，会节省我们大量的时间和精力，但首先，我们需要在脑海中规划我们的动画，以便将其呈现出来！所以，去拿一张纸和一支铅笔，开始享受乐趣吧！

让我们想象我们已经成为了动画师；当然，我们是！我们刚刚和客户开了一个会。假设我们的客户通过自己的应用程序销售 T 恤；然而，当支付完成时，屏幕上什么也没有出现，所以用户一直感到困惑，因为他们不确定购买是否成功，这消耗了大量的客户服务资源。

那么，你认为用户理解购买后发生什么的最佳解决方案是什么？你认为……在购买流程结束时有一个确认屏幕？简单的东西，只是一个图标和简短的文字？

![图 2.24 – 确认屏幕线框图

图 2.24 – 确认屏幕线框图

太棒了！所以我们已经有了我们的想法，并绘制了线框图；当然，我们可以就这样留下它，加一点颜色，使用正确的字体，然后voilà，把它交给技术团队，但来吧，让我们做一些更有趣的事情。毕竟，客户是在为我们的客户的应用程序花钱，所以让我们让他们感到有回报。

让我们思考一下图标；图标必须让用户知道购买已经完成，所以我们必须传达积极的信息。一个笑脸、一个竖起的大拇指或一个勾号就可以完成任务，但让我们记住，我们希望在其他地方重用这个图标，所以它不应该太具体。更通用的东西，可以在任何动作成功执行时使用。

所以，我会选择勾号选项。它很简单，当我们看到它时，我们立刻就知道动作已经完成。太好了！我们知道我们想要什么，所以让我们把它画出来。

![图 2.25 – 检查的不同风格

![img/B17930_02_25.jpg]

图 2.25 – 检查的不同风格

别太担心在白纸上开始；只需让自己随心所欲地发挥，否则，有很多地方可以给你灵感。只需在网上键入check icon，进入图片，就会有大量的例子让你获得灵感。此外，如果你不想自己画，还有一些网站你可以下载已经制作好的矢量图标，例如www.flaticon.com/或www.freepik.com/.

对，我们已经绘制了图标，下一步是什么？让我们发挥创意；让我们思考图标如何移动，以及我们希望图标如何移动，所以让我们制作故事板。

故事板

太棒了！我们已经与客户交谈，我们理解了问题和用户的担忧和需求，并提出了一个想法。我们决定在流程结束时添加一个带有勾号的新屏幕，以强调购买已经完成的概念。我们已经绘制了图标，我们知道我们想要什么，现在怎么办？我们是打开 AE 吗？还不！

的确，我们已经绘制了图标并准备好插图，所以我们可以直接跳到任何矢量插图工具，但我们知道我们想要我们的图标做什么吗？例如，图标将如何出现在新屏幕上？从透明到不透明？从小到大？从左到右？我们必须做出所有这些决定，以便准备好在 AE 中开始设置一切。

当然，你可以边做边决定，尤其是如果我们谈论的是一个简单的动画，但我们想展示正确的流程，所以如果你有一个更复杂的动画，你会知道如何进行。

这就是故事板介入的地方。故事板发生在前期制作阶段，它将帮助我们决定/预览我们的尚未完成的图标将如何变得生动！所以，让我们思考我们希望图标通过动作和过渡如何表现。

总要记住，故事板的目的是呈现想法，比如当我们最初绘制我们的图标时；在我们深入细节之前，我们就知道我们想要什么以及我们想要如何实现，因此不需要高保真度的故事板草图。我们只需用手绘或者使用插图工具和简单的矢量图形，无论你更舒服哪种方式。你会同意，这样做可以节省很多时间，然后我们可以将这些时间投入到在 AE 中制作流畅的动画中。

那么，回到我们的图标，我在这里大声思考：

1. 我希望当用户首次访问屏幕时，图标不会立即出现在眼前。

2. 然后，图标出现在屏幕的中间。

3. 它从小到大，从透明到不透明逐渐显现。

4. 一旦图标变得足够大，一些火花就会从中冒出。

5. 当白色气泡变大时，勾选图标开始绘制。

6. 火花从图标处移开。

7. 火花从不透明变为透明，然后消失。

太好了，我们已经在脑海中清晰了这个想法，现在让我们尝试将其转化为我们的故事板。但我们如何做到呢？让我们画出来！

图 2.26 – 勾选图标故事板

你会同意，在我们脑海中有一个想法是一回事，将其转化为文字是另一回事，而当我们快速草图并制作故事板时，一切才变得有意义。那时，魔法就开始发生，我们准备好开始使用工具了。

摘要

因此，回顾本章内容，我们经历了许多事情，从古代到现代的历史回顾。我们学习了动画的 12 个原则。我们遇到了客户，了解了他们的问题，并提出了解决方案。我们从构思到草图，再到准备开始动画自己的图标，确保我们清楚自己想要什么以及如何实现，这一切都得益于故事板。

我们离我们的图标上线和运行只有一步之遥！但是，让我们一步一步来...我邀请你继续阅读下一章，了解 AE 环境，在我们跳到书的第二部分之前，我们将开始动画我们的勾选图标。那么，我们下一章见！

第三章：学习工具：熟悉 After Effects

嗨，又见面了！现在我们已经扩展了我们对 2D 动画的知识，了解了经典动画的历史，学习了其原则，并且我们的草图和分镜脚本已经准备好了，让我们继续前进。让我们来谈谈 Adobe After Effects（AE）。

那么，为什么是 Adobe .json文件，以及这个插件是为 AE 制作的。如今，Lottie 和动画工具之间的集成越来越多，这是一个好兆头，因为它显示了 Lottie 在动画师、设计师和开发者中的流行程度。Lottie for Adobe Animate 是一个例子；然而，大多数还处于早期阶段，并且并非所有功能都可用，所以我们将继续专注于 AE。

AE 可以简单到您想要的样子，也可以复杂到您想要的样子；从创建一个小动画图标到制作一个庞大的后期电影项目，它被认为是行业标准的动态图形和视觉效果软件。想想电影标题、爆炸效果、标志动画、动画片段等等——许多这些都可以用 AE 制作。

然而，我们并不是假装要开设一个全面的 Adobe AE 课程；关于这一点，市面上有非常好的书籍。我们简要地介绍了 AE，重点关注动画方面，并为您提供创建自己动画的基本功能和概念，让您有足够的资源，以便可以按照自己的节奏继续学习。

话虽如此，我们将从熟悉 AE 界面开始本章。通过探索其一些面板和菜单，我们将深入了解帮助我们创建动画的工具和功能。

我们将讨论合成，如何创建它们，以及它们的基本方面。此外，我们还将学习如何通过菜单和快捷键在时间轴上移动，创建帧和关键帧（我们已经在第二章，《创造幻觉：运用 2D 经典动画的基本原则》中讨论过），我们将处理图层及其主要属性，如大小、颜色、位置和透明度。

我们将探讨如父子关系和链接这样的动画技术，这些技术将帮助我们瞬间将我们的动画提升到下一个层次，当然，我们还将深入研究缓动，学习如何在缓入和缓出中使用缓动，并玩转缓动面板，最终了解渲染设置以导出我们的动画。

因此，到本章结束时，您将能够舒适地在您个人定制的 AE 界面中移动，并准备好开始您的第一个动手项目——我们的超级酷、即将动画化的图标！

在本章中，我们将讨论以下主题：

• 理解 Adobe AE 环境

• 创建我们自己的个性化工作区

• 什么是合成以及其主要规格

• 使用时间轴

• 图层和图层属性

• 使用两种不同的技术——父子关系和链接

• 简化 – 深入了解

• 渲染窗口及其设置方法

技术要求

在本章中，我们将学习 Adobe AE 工作区的基础知识，所以在我们开始之前，您需要安装以下工具：

• Adobe AE（如果您需要帮助进行此操作，可以前进到第六章，不要停止！探索将帮助您继续前进的插件和资源，在那里您可以找到有关安装过程的更多信息）

• Adobe Illustrator

了解 AE 工作区

在我们开始之前，我们假设您已经安装了 Adobe AE 软件、Bodymovin 和 LottieFile 插件，所以我们已经准备好开始。您可以在第六章**，不要停止！探索将帮助您继续前进的插件和资源*中找到逐步安装指南。所以，如果您还没有安装您的插件，现在是时候去做这件事了。

好的，那么你们都准备好了吗？让我们开始吧：

1. 让我们打开 AE 并点击创建新项目按钮。所以，在这里我们可以看到什么，如图 3.1 所示，是 AE 的标准工作区，它由各种面板和窗口组织。

2. 对于我们的动画项目，我们将专注于项目、合成、图层和时间轴面板，所以让我们设置我们的工作区。

图 3.1 – Adobe AE 工作区

自定义我们的工作区

AE 提供了一个灵活的空间，其中包含工具和窗口，我们可以根据需要管理和组织它们。我们可以通过标签拖动面板并将它们放置在屏幕上的其他位置或组内，或者打开新窗口或关闭它们。

我建议您现在通过保持三个面板打开来组织您的工位，即项目、合成和图层和时间轴：

图 3.2 – 项目、合成和图层及时间轴面板

您可以通过在顶部菜单中选择窗口 | 工作区 | 另存为新工作区…选项来始终保存您的新面板设置：

图 3.3 –另存为新工作区…

项目面板

现在我们已经设置好了工作区，让我们更深入地了解项目面板。这将会简短，但重要的是要提到的是，项目面板就像是一个图书馆，我们将在这里导入和组织我们的文件，并且我们的合成将保存在这里。

如您在图 3.4中看到的那样，项目面板显示了三个文件：

图 3.4 – 项目面板

在项目面板中，我们还可以看到一些关于文件的一些细节，例如大小、持续时间、帧速率以及文件类型——在这种情况下，组合。如果你不理解这意味着什么，不要担心；我们将在下一节讨论它。

理解组合

关于 AE 的第一件事要学习的是组合。想象它们作为空间和时间的容器，这意味着我们添加到组合中的任何东西，如图形、动画、声音和效果，都将作为不同的图层保存在时间轴面板中，正如你可以在下面的屏幕截图中所见：

图 3.5 – 时间轴面板中名为 Comp 1 的组合的图层

一个项目可以有我们需要的任意多个组合，它们也可以嵌套。这听起来有点令人困惑吗？不要担心——我会给你一个例子。

记得在我们项目面板中显示的文件吗？想象一下，我们得在背景上动画一个弹跳的球。球将在屏幕中间上下移动，背景将从右向左移动，以产生球在前进的印象（见下面的故事板，如图 3.6 所示）。

我们需要球的一个垂直运动和一个背景的水平运动；此外，球的弹跳时间不会和循环背景移动所需的时间一样长。所以，这两个动画的空间和时间将会不同。这就是我们将创建两个（好吧，三个——我稍后会解释原因）不同的组合。

我们为弹跳的球创建一个组合，为背景创建一个组合，当我们结合这两个组合时，我们将得到第三个组合——将包含所有动画的容器：

图 3.6 – 一个组合与两个组合的比较

分离组合的一些优点如下：

• 重用组合：同一个组合可以被重复使用任意多次。比如说，我有一群鸟在背景中飞翔；我只需要创建一个飞翔鸟的组合，并复制这个组合：

图 3.7 – 一个组合鸟的故事板和一组组合鸟

• 嵌套组合：你可以在一个组合内部再嵌套一个组合，这通常被称为父组合。为什么这如此有用呢？让我们回到我们的鸟儿。我们有一个鸟儿在移动翅膀但不在空间中前进，我们想让鸟儿穿过屏幕。我们可以在我们的移动翅膀鸟儿内部创建一个新的组合。新组合中的动画会将鸟儿从点 A 移动到点 B，因为鸟儿已经自己在移动，所以看起来就像它在飞翔：

图 3.8 – 一个合成鸟动画和合成鸟飞行动画的预合成

如您所见，重用合成和嵌套合成将为我们节省大量的时间和精力。所以，现在我们了解了什么是合成，让我们创建一个。

合成设置

到目前为止，我们已经清楚地了解了什么是合成，那么让我们看看我们能用它做什么。让我们通过点击顶部菜单栏上的合成 | 新建合成…来创建一个：

图 3.9 – 创建新的合成

合成面板将展开，如图 3.10 所示：

图 3.10 – 合成设置窗口

如您所见，这里有一些设置要定义，所以让我们逐一过一遍：

1. my_first_composition。

2. 基本选项卡：如您所见，顶部有三个主要选项卡 – 基本、高级和3D 渲染器。我们只需要了解一些基本选项，所以别管其他两个。

3. 合成大小：在这里，我们将为我们的合成指定一个特定的大小。我们可以在过程中进一步更改大小，但最好从一开始就设置好。如果这将是项目的主要合成，我喜欢给它设计的大小，这符合 Lottie 文件将要放置的位置的大小。当然，Lottie 是可伸缩和响应式的，但我们不希望在一个 400 x 800 像素的容器中有一个 60 x 60 像素的微图标。所以，让我们保持整洁。

4. 锁定宽高比：如果选中此选项，我们的动画默认比例将是 16:9。但由于我们不做视频，我们不需要这个比例，因此我们可以取消选中，只输入我们想要的尺寸。

5. 帧率：我们在第二章中谈到了这个，创造幻觉：用二维经典动画的基本原理开始滚动。这里我们将决定我们的动画每秒将有多少帧。对于网站和应用，我通常使用每秒 60 帧。

6. 持续时间：在这里，我们确定合成的持续时间。如果我们正在设计一个动画图标，这不会超过 3 到 5 秒。而且记住，我们项目中的每个合成都将有它自己的独立持续时间。

7. 背景颜色：这是我们合成将作为背景的颜色。然而，这个颜色在渲染电影时不会显示；它只是帮助我们区分设计和背景的一个有用的辅助工具。如果我们想让我们的合成有背景颜色，我们必须添加一个彩色图层作为背景。

到目前为止，一切顺利！我们刚刚学习了什么是合成，为什么它如此有用，以及如何创建和设置一个，那么让我们继续学习时间线和图层。

时间线

时间线是我们控制动画的面板。向前或向后移动，移动到项目的特定部分、秒或关键帧。时间线也是我们可以找到图层面板的地方，我们将在这里添加我们的帧和关键帧。

此外，每个合成都有自己的时间线，这意味着我们可以在时间线内嵌套时间线。

让我们看看时间线面板在图 3.11中的样子：

![图 3.11 – 时间线面板]

![图片 B17930_03_11.jpg]

图 3.11 – 时间线面板

通过查看前面的截图，我们可以看到我们的时间线面板中有几个关键区域；让我们更详细地看看这些部分：

1. 表示时间线中的当前时间。

2. 这个区域被称为图层面板，正如你所见，它位于时间线面板内。我们将在下一节中讨论这个问题。

3. 这被称为时间线的缩放。将其从左向右拖动，以查看时间线框架区域如何缩放和缩小。

4. 这条灰色线条表示我们正在工作的区域。我们的合成可以长达 5 秒，但假设我们只想动画持续 1 秒。我们不需要更改合成设置。我们可以移动蓝色起始点和结束点来调整到所需的时间。

5. 这是时间线中图层的可视化。如果没有颜色，这意味着图层在时间线上的结束或开始时间较晚，因此在这个特定时间不会显示。

6. 这是表示关键帧和缓动的区域。

注意时间线面板中的蓝色垂直线。这是时间滑块，它表示动画中任何点的当前时间。尝试将其从左向右拖动，以在我们的合成中移动时间。

我必须说，不谈论图层就谈论时间线面板是很难的，所以从现在起我将混合这两个概念。让我们来介绍图层。

理解图层

没有图层的合成将只是一个空白的帧。正如我们在本章前面所说，合成是由一个或多个图层组成的，你添加到其中的任何内容，如形状、文本、图像和音频，也将成为图层。

让我们看看实际操作：

1. 打开我们与这本书一起提供的chapter03/AEbasics.ae文件。

2. 在项目面板中，你会看到许多不同的合成和文件。

3. 双击名为动画的合成：

![图 3.12 – 项目面板]

![图片 B17930_03_12.jpg]

图 3.12 – 项目面板

现在，让我们检查一下图层面板中有什么。正如你所看到的，在时间线中出现了几种不同类型的图层，并且每个图层都有自己的属性，例如大小、位置、旋转和透明度。这些属性非常重要，因为我们很快就会看到，通过调整它们，我们将能够开始动画制作，但让我们不要急于求成。

图层的在时间线中的位置也很重要。顶部的图层将显示在底部的图层前面。因此，我们通常将背景放在底部，而将我们想要显示在顶部的对象放在图层面板的顶部。我们只需在图层面板中拖动图层即可做到这一点：

![图 3.13 – 图层面板

![图片 B17930_03_13.jpg]

图 3.13 – 图层面板

在我们开始调整属性之前，让我们先了解不同类型的图层。

图层类型

随着我们深入到合成细节，我们面前会打开越来越多的选项。现在，我们知道一个合成可以包含我们想要的任意数量的图层，包括合成本身。在 AE 中，我们可以找到不同类型的图层，如视频、音频、光、摄像机和 GIF。然而，我们将专注于我们将用于矢量动画的图层，包括形状、预合成、Illustrator和文本，如图图 3.13所示。

让我们更详细地看看它们。

形状图层

即使这不是绘制资产的最佳方式（我们将在本节进一步探讨其他方法），我们也可以使用 AE 提供的工具来创建一些插图。当我们这样做时，我们正在创建一个形状图层。尝试通过使用屏幕顶部左侧的工具栏中的工具进行实验：

![图 3.14 – 工具栏

![图片 B17930_03_14.jpg]

图 3.14 – 工具栏

1. 缩放工具

2. 旋转工具

3. 矩形工具

4. 贝塞尔工具

5. 钢笔工具

6. 画笔工具

7. 填充颜色

8. 描边颜色和宽度

以矩形工具为例。转到合成屏幕并绘制一个正方形。你会注意到在图层面板中会出现一个新的图层，这是一个形状图层：

![图 3.15 – 形状图层

![图片 B17930_03_15.jpg]

图 3.15 – 形状图层

预合成图层

记得我们在理解合成部分讨论预合成图层时吗？预合成图层是由另一个合成内部形成的图层，也称为嵌套合成。但我们如何创建一个呢？就像将文件拖入图层的合成面板一样简单。让我们看看一个例子：

1. 转到项目面板。

2. 双击动画合成。

3. 将树合成文件从项目面板拖动到图层面板。

4. 就这样！你会看到在动画图层的面板中出现了名为[树]的新图层：

![图 3.16 – 树是动画合成的预合成

![图片 B17930_03_16.jpg]

图 3.16 – 树是动画合成的预合成

Illustrator 图层

正如我们之前提到的，AE 不是创建图形的最佳方式，因为还有一些其他工具可以使你的工作更简单 – 例如，Adobe Illustrator。以下是原因。从 Illustrator 导入 AE 的文件将是链接的，因此我们对我们原始文件所做的任何更改都会在 AE 中立即反映，无需在 AE 中更改它们。

这就像魔法！你想看看吗？很好，但请记住，要这样做，我们需要在我们的计算机上安装 Adobe Illustrator。记住，我们已经为你提供了一些文件来玩耍，所以让我们打开它们：

1. 打开 Adobe Illustrator。

2. 从顶部主 Illustrator 菜单中选择文件 | 打开。

3. 从提供的文件中搜索chapter03文件夹并打开它。

4. 搜索tree.ai文件并打开它。

5. 在插图中进行任何更改 – 例如，我已经将树从白色改为粉色，但你可以做任何你喜欢的事情。尝试改变形状，添加一些纹理... whatever you like。

6. 现在，这非常重要 – 保存它！否则，你的更改不会反映出来。

7. 返回 AE 并亲自看看。正如你所看到的，你在 Illustrator 中做的任何更改都会自动反映在 AE 中：

图 3.17 – 在 Adobe Illustrator 和 Adobe AE 窗口中查看 tree.ai 文件

文本图层

如果我们想在动画中包含一些文本，我们可以在 AE 中直接这样做。尝试以下操作：

1. 点击如图 3.14 所示中的文本工具。

2. 点击合成面板并输入一些内容。

3. 你会在屏幕右侧出现一个新的面板。在这个面板中，你有很多选项可以个性化你的文本：

图 3.18 – 字符样式面板

很酷，所以我们已经涵盖了最适合用于我们矢量动画的不同类型的图层。现在，让我们更深入地看看我们可以用它们做什么。

图层属性

如你所知，每个图层都有属性。这些属性可以修改和动画化，这就是我们将如何使我们的插图生动起来的方式。

因此，每个图层都有的这个基本属性集被称为变换组。这可以通过点击每个图层左侧的小箭头来找到。所以，让我们展开它们：

图 3.19 – 点击每个图层的箭头后图层面板的视图

正如我们之前提到的，每个图层都有自己的变换组。我们还可以看到某些类型的图层具有特定的属性，但到目前为止，我们将只关注变换组。

那么，让我们点击，例如，形状图层的变换组，看看会发生什么…哇! 变换属性展开：

![图 3.20 – 形状图层变换组属性的详细视图

![img/B17930_03_20.jpg]

图 3.20 – 形状图层变换组属性的详细视图

太棒了！我们现在可以看到所有的变换属性了，这就是我们将要施展大部分魔法的地方。这些属性非常强大，将使我们能够通过变换、旋转、改变不透明度和在屏幕上移动图形来创建动画。我们将创造动画的错觉。所以，让我们更详细地看看我们可以用每个属性做什么。

锚点

标准化或旋转等变换是围绕一个锚点进行的。默认情况下，锚点位于图层的中心，如图图 3.21所示。有时，我们需要将锚点放置在其他位置，比如一个角落，或者图层的其他地方。

如果是这样，我强烈建议我们在开始动画图层之前就做这件事，因为当我们更改锚点位置时，缩放和旋转的行为将会不同。请参见图 3.21中的以下示例：

![图 3.21 – 中心锚点与用于缩放和旋转属性的底部/左下角锚点]

![img/B17930_03_21.jpg]

图 3.21 – 中心锚点与用于缩放和旋转属性的底部/左下角锚点

我们可以通过从工具面板中选择平移工具，并在合成屏幕上拖放来选择锚点位置。我们也可以在图层面板中更改其值：

![图 3.22 – 默认情况下，锚点值设置为 x = 0,0 和 y = 0,0]

![img/B17930_03_22.jpg]

图 3.22 – 默认情况下，锚点值设置为 x = 0,0 和 y = 0,0

位置

位置是我们图层将在合成中占据的位置。我们可以在合成中移动图层，并将其放置在我们想要的任何地方，甚至是在合成可见框架之外。只需尝试在合成屏幕上移动图层或更改图层面板中的值：

![图 3.23 – 基于图层在合成屏幕上的位置的位置值]

![img/B17930_03_23.jpg]

图 3.23 – 基于图层在合成屏幕上的位置的位置值

缩放

现在轮到缩放了。图层也可以放大或缩小。记得我们讨论锚点时说过，我们的对象将根据锚点的位置而表现不同吗？我们可以在合成屏幕上通过拉动图层的控制手柄上下移动或更改它们来改变图层的尺寸：

![图 3.24 – 由小方块表示的控制手柄]

![img/B17930_03_24.jpg]

图 3.24 – 由小方块表示的控制手柄

我们也可以从图层面板更改缩放比例。注意值左侧的小图标。默认情况下它是激活的，这意味着我们的图层将根据比例放大或缩小，保持其比例。如果您只想在垂直或水平轴上缩放图层，请取消选中它：

图 3.25 – 缩放默认设置为 x = 100%和 y = 112.7%

旋转

我们可以旋转我们的图层。为此，我们可以在工具面板中选择旋转工具，在合成屏幕中旋转我们的图层，或者我们可以在图层面板中更改值。图层面板中显示的第一个值，默认为0x，表示我们希望图层旋转的转数：

图 3.26 – 旋转由 0x = 转数和度数定义，默认设置为 0,0 度

不透明度

另一个有趣的属性是不透明度。我们可以将其从0%更改为100%，前者是完全透明的，后者是完全不透明的。我们可以通过直接在图层面板中更改值来更改不透明度：

图 3.27 – 默认设置为 100%的不透明度

现在我们已经了解了所有关于图层、图层类型及其主要属性的知识，让我们继续了解父级和链接功能。

使用父级与链接选项进行动画

在上一节中，我们学习了如何将属性应用于图层。现在，如果我们想让不同的图层以相同的方式表现，我们是否需要在所有这些图层中更改属性？实际上并不一定！

在 AE 中，我们可以通过设置父级将一个图层链接到另一个图层。主图层被称为父级，链接的图层将被称为子级。简单来说，我们可以这样说，设置父级是一种分组图层的方法。

这里有一些需要注意的方面：

• 一个图层只能有一个父级，但每个父级图层可以有我们想要的任意数量的子元素。

• 我们可以单独对子图层进行动画处理。

• 当创建父级时，我们可以选择子元素是否要继承父级的属性。

但父级选项在哪里？它位于图层面板中；然而，有时它可能会被隐藏。如果是这样，只需在您的图层面板的顶部栏的任何位置右键单击，以显示一个新菜单。选择列 | 父级与链接：

图 3.28 – 图层面板视图选项

现在我们确信我们可以在图层面板中看到父级选项，让我们看看如何设置一个图层的父级。

将图层设置为父级非常简单。只需将拾取鞭图标拖动到您想要链接的图层，如图 3.29 所示。完成！

图 3.29 – 在父级与链接视图中使用拾取鞭

我建议您花些时间在父级与链接上摸索，以便熟悉它。

因此，现在我们已经了解了父级与链接是什么以及如何将它们应用于图层，让我们继续了解关键帧和动画。

关键帧和动画

没有关键帧，动画是不可能的。正如我们在 第二章 中提到的，创造幻觉：用二维经典动画的基本原理滚动起来，动画由关键帧和中间帧组成。

AE 为我们生成中间帧，因此我们不需要逐帧创建动画，这将节省我们大量时间。

话虽如此，让我们看看它是如何工作的。在下面的屏幕截图中，我们有一个两帧序列的示例以及它在 图层 和 时间轴 面板中应该看起来是什么样子：

![图 3.30 – 图层和时间轴面板中帧的表示

![图片 B17930_03_30.jpg]

![图 3.30 – 图层和时间轴面板中帧的表示

如前一个屏幕截图所示，创建关键帧只是几个指导步骤的问题。让我们看看它是如何完成的：

1. 点击计时器以激活并创建您的第一个关键帧。如果您再次点击，所有关键帧将被清除。

2. 点击小菱形以添加/删除关键帧。点击菱形旁边的箭头以移动到时间轴中的现有关键帧。

3. 时间轴上的关键帧位置 A。

4. 时间轴上的关键帧位置 B。

当我们看到它旁边的小计时器图标时，我们知道我们可以对该属性进行动画处理。当点击它（见 图 3.30 中的 1），会出现小箭头和菱形（见 图 3.30 中的 2）。

当点击计时器时，我们的第一个帧将被创建。继续，试试看！让我们做以下操作：

1. 让我们转到 项目 面板，并双击 弹跳球 合成。

2. 让我们把时间滑块放在0秒（我们在 时间轴 部分讨论过的）：

![图 3.31 – 时间滑块在帧 0 的弹跳球合成

![图片 B17930_03_31.jpg]

![图 3.31 – 时间滑块在帧 0 的弹跳球合成

1. 选择位置属性，并点击其旁边的计时器。请注意，我们的新关键帧将创建在我们时间滑块所在的位置。我们将称之为关键帧 A：

![图 3.32 – 点击位置计时器后图层和时间轴面板的视图

![图片 B17930_03_32.jpg]

![图 3.32 – 点击位置计时器后图层和时间轴面板的视图

1. 现在，让我们将时间滑块从0移动到半秒（30f）。

2. 点击菱形图标。记住，如果我们再次点击计时器，我们将删除该属性中的所有关键帧。我们将称之为关键帧 B：

![图 3.33 – 在左侧点击菱形图标后创建第二个关键帧

![图片 B17930_03_33.jpg]

图 3.33 – 在左侧点击菱形图标后创建第二个关键帧

1. 现在，让我们将时间滑块移动到1秒。

2. 再次点击菱形以创建我们的关键帧：

![图 3.34 – 时间滑块在帧 60 和关键帧 C

![图片 B17930_03_34.jpg]

图 3.34 – 时间滑块在帧 60 和关键帧 C

好的，我们已经创建了关键帧，那么接下来呢？如果我们从A移动到C的时间滑块，什么都没有发生，对吧？嗯，那是因为我们的关键帧完全相同，具有相同的属性、颜色等等，所以我们看不到任何变化。

1. 现在，将时间滑块移动到关键帧 B（30f）。

2. 让我们将其垂直位置更改为80。记得你可以通过更改图层合成的属性值来做到这一点：

图 3.35 – 设置位置为 x = 25 和 y = 80

1. 将时间滑块从A拖动到C。现在发生了什么？球在弹跳！是的！我们刚刚创建了我们第一个动画！

你也可以按下空格键，使动画循环播放。所以，让我们检查这里的一些事情。当按下空格键时，动画播放一次，短暂停止，然后再次开始。为什么会这样？

这是因为我们的动画时长为 1 秒，但我们决定我们的合成长度将是 5 秒，记得吗？没问题 – 我们可以在任何时候调整它。让我们打开合成设置。

前往项目面板，右键单击弹跳球合成，选择合成设置…，并将持续时间更改为 1 秒，就像我们在本章前面看到的（图 3.10中的6）：

图 3.36 – 项目面板

现在让我们按下空格键。酷！我们的球正在无限循环地上下移动。它还不是完全的弹跳球，但很快就会达到那个效果！

我们还能看到什么？如果我们检查合成屏幕上的球，我们可以看到一个线和几个点：

图 3.37 – 在合成窗口中的我们的弹跳球视图

让我们看看这一切意味着什么：

• 顶部的正方形点是我们的B关键帧。

• 这些小点代表 AE 为我们创建的中间帧。

• 底部的正方形点是我们的A和C关键帧。

因此，我们有了弹跳球，但它看起来还是有点奇怪，对吧？时间似乎不太对。我想我们现在可以谈谈缓动了。

探索缓动

正如名称所示，缓动意味着小心或逐渐移动。在 AE 中，缓动是一种效果，它允许我们在同一动画中给我们的对象以不同速度移动的印象。它会加速或减速，具体取决于我们想要达到的效果。

我们如何给我们的动画添加缓动？很简单 – 我们将通过在时间轴中选择菱形关键帧来添加缓动。让我们试试吧！

记得在上一个部分我们给球动画化的时候吗？让我们运行几次以记住它的样子（按空格键）。发生了什么？

我们可以看到球以恒定的速度上下移动，这看起来不自然。记得我们之前在第二章，创造幻觉：利用 2D 经典动画的基本原则开始滚动中提到的 12 个动画原则吗？缓动是其中之一；现实生活中的物体不会以均匀的速度移动。

为了让运动看起来更自然，我们想让弹跳球在达到顶部时减速，在击中地板时也减速。这涉及到使用缓动效果，它使用加速和减速。让我们先从简易缓动开始尝试。

简易缓出

简易缓动是 AE 提供的一种快速轻松添加缓动的选项。所以，让我们转到时间轴并执行以下操作：

1. 选择0关键帧（记住我们可以使用时间轴的缩放来调整我们的视图）。

2. 右键点击鼠标并选择关键帧助手 | 简易缓动：

图 3.38 – 右键点击关键帧菜单

1. 让我们看看我们的时间轴；你会注意到钻石形状已经变成了不同的形状。这意味着这个帧上有缓动效果。

2. 现在，让我们选择第二个关键帧（30f）。记住，你也可以通过点击钻石旁边的箭头来在关键帧之间导航。当处理长时间的时间轴时，这可能很有用。

3. 右键点击并选择关键帧助手 | 简易缓动。我们为什么选择这个？因为我们想让帧在进入和退出关键帧时从两边减速。

4. 现在，让我们再次查看我们的时间轴；你会注意到这个关键帧看起来与第一个不同，这表明它在进入和退出帧时都激活了缓动效果，从两边：

图 3.39 – 简易缓入和简易缓动关键帧表示

1. 最后，让我们点击第三个帧。

2. 右键点击关键帧助手 | 简易缓出，因为我们想让球在击中地板前减速。

3. 检查关键帧；它看起来与其他所有关键帧都不同。出现的形状表示缓出：

图 3.40 – 简易缓出

现在，让我们开始吧！你怎么看？动画看起来好多了；球的加速和减速现在更有意义，看起来更真实。接下来呢？我们可以添加一个挤压和拉伸效果。

为了让你回忆起，回到第二章，创造幻觉：利用 2D 经典动画的基本原则开始滚动，当我们谈论帮助我们的动画看起来更逼真的 12 个动画原则时，我们给出了一个弹跳球的例子，它在滚动过程中拉伸和膨胀，以产生更逼真的效果。

现在，我鼓励你亲自尝试挤压和拉伸，并将其应用于弹跳球动画。如果你想看到最终结果，你可以打开本书提供的示例，chapter03/ AEbasics_bouncingball_squash_stretch，以检查动画是如何完成的，并玩转关键帧、宽度、高度以及缓动。

但让我们更深入地了解缓动。让我们谈谈图形编辑器。

图形编辑器

图形编辑器是我们可以看到缓动图形表示的窗口，也是我们可以手动创建和编辑缓动并调整动画速度的地方。

让我们看看；在时间轴面板中点击以下小图标：

![图 3.41 – 图形编辑器图标

图 3.41 – 图形编辑器图标

当点击它时，你会注意到时间轴变成了某种图表。这就是图形编辑器。你可以再次点击返回到你的时间轴。在图形编辑器面板中，注意以下几点：

• 黄色方块代表我们的关键帧；正如你所见，它们放置在时间轴上的相同时间点（0、30和1）。

• 绿色曲线代表y轴上的中间值，换句话说，是球垂直运动的速度。通过查看图表，我们可以看出球的速度逐渐减小，直到它触及顶部然后加速直到它触及地面。

• 红色直线代表x轴上的中间值。但为什么它是平的？因为水平轴上没有运动。球只在上和下移动：

![图 3.42 – 图形编辑器值的视图

![图 3.42 – 图形编辑器值的视图我邀请你尝试操作以熟悉编辑器。你会发现你可以通过拖动它们在面板上移动关键帧。这将改变球的速度和位置以产生不同的效果。你还可以通过拖动手柄和调整动画来改变曲线。此外，你可以将编辑器面板的视图从值切换到速度。只需在图形编辑器面板的任何位置右键单击以显示新的子菜单，并选择编辑速度图：![图 3.43 – 图形编辑器隐藏菜单

图 3.43 – 图形编辑器隐藏菜单

当选择编辑速度图时，我们可以看到我们的面板切换到不同的视图。现在，我们不再看到x和y轴，而只看到一条灰色线，它代表动画中速度的变化。

再次，玩转手柄和关键帧，选择你更熟悉的可视化方式：

![图 3.44 – 图形编辑器速度视图

图 3.44 – 图形编辑器速度视图

我们刚刚向您展示的简单易用的缓动，是开始理解缓动是什么以及它是如何工作的理想方式。然而，一旦您开始熟悉它，您会发现直接在图形编辑器面板上创建缓动会更好。但在这个阶段，我们只是将关注于此，这对我们来说已经足够让我们的动画看起来更好，并为我们提供足够的知识，让我们能够以自己的节奏继续学习和进步。

摘要

我们完成了！是的，仅仅一章。不要感到惊讶；正如我们之前所说的，我们必须在这里实际操作。没有必要学习 AE 中所有可用的工具、面板、动作或表达式，因为对于我们来说，有很多东西我们不需要知道来制作 Lottie 动画。因此，我们希望让它对您来说更简单。

在本章中，我们发现了 AE 工作区区域，讨论了主要面板，并通过使用实际文件与合成、时间轴和图层一起工作获得了经验。我们了解了图层属性，学习了什么是父级与链接功能以及如何将其应用于我们的图层，并且在解释如何使用关键帧最终完善动画的同时，学习了如何创建我们的第一个动画，这一切都得益于图形编辑器面板的便捷性。

回顾本书的第一部分，我们已经走得很远了。我们学习了 Lottie 是什么，动画原理以及 Adobe AE 的基础知识；我们现在已经准备好进入书的第二部分，并施展一些魔法。让我们开始制作我们的动画图标！我邀请您跟随我进入下一章。

第二部分 - 破解 Lottie 动画

我们将学习如何在 After Effects 和 Lottie 中创建动画，最终的 Lottie 交付物以及应用最佳 UX/UI 实践。

我们在本节中将涵盖以下章节：

• 第四章, 动起来！使用 After Effects 制作我们的第一个 Lottie 动画

• 第五章, 与世界分享：与 LottieFiles 合作

• 第六章, 不要停止！探索能让你继续前进的插件和资源

第四章: 移动！使用 After Effects 动画我们的第一个 Lottie

然后...我们就在这里！准备好开始我们自己的第一个 Adobe After Effects 动画项目了！是的！这已经是一次激动人心的旅程，我们学到了很多新单词、概念和工具。回顾过去，感觉我们谈论 Lottie 已经是很久以前的事情了，不是吗？不是因为时间的流逝，而是因为我们学到了很多新东西！在本书的第一部分，我们学习了 Lottie 和 LottieFiles 是什么，我们了解了 2D 经典动画的历史和原理，并熟悉了 Adobe After Effects 的工作区域和主要动画功能。现在，我们一切准备就绪，准备动画化我们的图标。

在本章中，我们将一步一步地通过创建我们的动画图标。准备好，因为我们将要把迄今为止所学的一切都摆在桌面上，关于 Lottie、经典动画和 Adobe After Effects 的知识。我们将学习如何从不同的矢量工具中导入我们的资产，我们将创建和调整我们的合成，创建关键帧，并更改图层属性以产生动画的错觉。我们还将学习如何根据经典动画概念来动画化路径、调整时间并应用缓动，以使我们的图标有更可信的运动。因此，在本章结束时，我们将准备好第一个可以导出到 LottieFiles 的动画图标。

在本章中，我们将涵盖以下主题：

• 从 Sketch、Figma 和 Adobe XD 等不同的设计工具中将矢量文件导入到我们的 Adobe After Effects (AE)项目中

• 为我们的动画图标设置合成

• 创建关键帧

• 通过更改图层属性来动画化我们的图标

• 通过学习如何使用 Trim Paths 和径向爆发效果来提高时间效率

• 添加缓动并调整时间来润色我们的动画

技术要求

记住，这一章是一个实践项目，为了能够成功完成它，重要的是您有以下工具运行正常：

• Adobe AE.

• 选择您喜欢的矢量插图软件。我们将重点关注 Sketch、Figma 和 Adobe XD：

  • 如果您使用 Sketch：您需要安装 Sketch 的 AEUX 插件。

  • 如果您使用 Figma：您需要安装 Figma 的 AEUX 插件。

  • 如果您使用 Adobe XD：无需安装任何额外插件。

在 Adobe AE 中创建您的第一个项目——一个动画复选图标

很酷，让我在这里简要回顾一下。有时你可能想知道，如果我们可以用文本或插图代替动画，为什么还要费这么大力气去创建动画呢？嗯，正如我们之前提到的，动画在用户体验方面非常有帮助。它们帮助我们与用户沟通；我们已经了解到动画可以传达许多事情，比如动作或情感。

如果我们回到我们的概述，记得我们决定创建一个复选图标，以向用户显示购买已成功完成，金钱安全且花得其所。

所以，从 UX 的角度来看，我们希望我们的用户感受到什么样的情绪？我想可能是以下这样的：

• 安全：购买已经正确完成。

• 放松：交易过程中钱并没有丢失。

• 兴奋：想象一下你穿上新 T 恤时的感觉。兴奋，对吧？

在动画制作时，我们不仅仅是在谈论一些酷炫的动态图形，这些图形将出现在我们的应用中以使其看起来更好；相反，我们是在谈论让用户的生活变得更轻松、更快乐。我们是在谈论让人们感觉更好！你能看到我们手中拥有的力量吗？所以，让我们不要浪费时间。让我们让我们的用户感觉棒棒哒！

将我们的图标导入到 After Effects 中

让我们先导入我们的资产到 AE。为此，我们假设你已经在这三个矢量工具之一（Sketch、Figma 或 Adobe XD）中准备好了你的图标设计。

重要

如果你还没有选择任何基于矢量的工具，我建议使用 Adobe XD，这将节省你的时间和精力。XD 的导出选项已经包含在 XD 中，无需添加任何额外的扩展或插件。然而，如果你已经使用 Sketch 或 Figma，不用担心，我们也会涵盖这一点。此外，你可以在本书的第六章，不要停止！探索持续前进的插件和资源中找到更多关于如何安装插件的信息。

从 Sketch 导入文件到 AE

为了避免一些动画问题，我总是建议将插图保持得尽可能整洁和简单。例如，一些布尔运算、文本层或符号在导出到 AE 时可能会产生问题。

话虽如此，让我们在 Sketch 中打开我们的图标。转到顶部菜单栏并选择文件 | 打开本地文档：

图 4.1 – Sketch 文件菜单

前往本书提供的Files文件夹，并打开lottie/chapter04/sketch/lottie_sketch。

现在是安装 Sketch 和 AE 的 AEUX 插件的时候了。你可以在第六章，不要停止！探索持续前进的插件和资源中找到有关如何安装 Sketch 和 AE 的 AEUX 的更多信息。

重要

如果你没有按照我们的指示安装插件，请检查第六章，不要停止！探索持续前进的插件和资源中的如何在 AE 中设置 AEUX部分，因为一些选项必须被选中。

一旦我们在 Sketch 中安装了 AEUX 插件，让我们打开它并检查面板。为此，转到顶部菜单栏并选择插件 | AEUX | 打开面板：

图 4.2 – AEUX 插件面板窗口

正如我们在图 4.3中可以看到的，这是一个非常简单的面板，只有三个不同的选项：

![图 4.3 – AEUX for Sketch 插件窗口

图 4.3 – AEUX for Sketch 插件窗口

• 将选择发送到 Ae：这个操作非常直接；通过选择图层并点击此选项，我们将导出我们的插图到 AE。

• 展平形状：正如我们之前提到的，当导出用于 AE 时，保持我们的插图和图层整洁总是一个好主意。使用展平形状选项，我们可以将组合或布尔图层展平为单个平面矢量形状，从而避免 AE 图层问题。

• 分离符号：符号可能会让 AE 表示起来有些困惑。使用分离符号选项，我们将从其主符号中移除符号依赖，使其在 AE 中工作得更好。

因此，正如我们在这里所看到的，我们的图标仅由两个单独的图层组成：检查用于蓝色勾选标记，椭圆形用于白色圆圈。这些图层是基本的简单形状，在导出时不会给我们带来任何麻烦。完美！

![图 4.4 – 图层面板

图 4.4 – 图层面板

现在我们已经准备好并整理好图标，让我们将其导出到 AE：

1. 如果尚未这样做，请打开 Adobe AE。

2. 返回 Sketch 并同时选择两个图层：检查和椭圆形。

3. 在 AEUX 面板中点击将选择发送到 Ae。

4. 前往 Adobe AE 并检查文件是否已导入：

![图 4.5 – 从 Sketch 导入到 AE 的图层

图 4.5 – 从 Sketch 导入到 AE 的图层

太好了！我们已经将图标完美导入 AE 并准备好进行动画制作。只需保存即可！现在，让我们看看如何使用 Figma 工具进行相同的操作。

从 Figma 导入文件到 AE

要将您的插图从 Figma 导出至 AE，过程相当类似。您可以前往第六章，不要停止！探索持续前进的插件和资源，在那里您将找到有关如何安装 Figma 和 AE 插件的指南。记住，如果您已自行安装插件，请检查如何在 AE 中设置 AEUX部分，以确保所选选项与您的一致。

现在您的插件已经启动并运行，让我们在 Figma 中打开图标。如何操作？请按照以下说明进行：

1. 打开 Figma。

2. 从主页选择导入文件选项：

![图 4.6 – Figma 主页

图 4.6 – Figma 主页

1. 在提供的文件中搜索 lottie/chapter04/Figma 文件夹。

2. 打开 lottie_Figma.fig 文件。

3. 点击完成按钮。文件将出现在 Figma 的主页上，如图 4.7 所示：

![图 4.7 – Figma 主页和提供的 Figma 导入文件

图 4.7 – Figma 主页和提供的 Figma 导入文件

1. 双击 lottie_Figma 以最终打开文件，如图 4.8 所示：

![图 4.8 – 图标文件

图 4.8 – 图标文件

太棒了！现在，我们已经成功将 lottie_Figma.fig 文件导入。

1. 让我们打开 AEUX 面板，查看可用于将我们的图标导出到 AE 的选项。前往插件 | 开发 | AEUX。

![图 4.9 – AEUX 插件面板窗口]

![图片 B17930_04_09.jpg]

图 4.9 – AEUX 插件面板窗口

如图 4.10所示，这是一个非常简单的面板，只有三个不同的选项：

![图 4.10 – AEUX for Figma 插件面板窗口]

![图片 B17930_04_10.jpg]

图 4.10 – AEUX for Figma 插件面板窗口

• 发送选择到 Ae：这与 Sketch 中的操作方式相同。非常直接；通过选择图层并点击此选项，我们将我们的插图导出到 AE。

• 导出参考图像：Figma 中的图层存在一些已知的对齐问题，例如文本图层和旋转的图像。启用此复选框以生成 Figma 框架的图像叠加，以便进行手动对齐。

• 导出时栅格化图层：可以将 Figma 中的任何内容自动发送到 AE 作为 PNG 文件。这对于不需要动画且可以通过合并为单个图像进行优化的任何内容非常有用。

如我们之前提到的，保持我们的插图尽可能简单非常重要，因为某些效果可能会产生问题。您会注意到我们的插图非常简单；它只由两个名为检查和椭圆的图层组成，这就是我们需要的所有内容。

现在我们已经完成了整洁的图标，让我们将其导出到 AE：

1. 如果还没有，打开 Adobe AE。

2. 在 Figma 中选择两个图层：检查和椭圆。

3. 点击 AEUX 面板上的发送选择到 Ae选项。

4. 前往 Adobe AE 并检查文件是否已导入：

![图 4.11 – 从 Figma 导入到 AE 的文件]

![图片 B17930_04_11.jpg]

图 4.11 – 从 Figma 导入到 AE 的文件

太棒了！我们的图标已经在 AE 中准备好了；现在，记得保存它！让我们看看如何用 XD 做同样的事情。

从 XD 到 AE 导出资产

从 XD 导出您的图标可能是目前存在的一种最简单的方法。不需要安装任何插件，因为 Adobe XD 已经包含了用于 AE 的导出选项。让我们看看这本书提供的 XD 文件。

让我们在 Adobe XD 中打开我们的图标。为此，只需按照以下步骤操作：

1. 打开 XD。

2. 前往文件 | 从您的计算机打开...。

![图 4.12 – XD 主页]

![图片 B17930_04_12.jpg]

图 4.12 – XD 主页

1. 在提供的文件中搜索lottie/chapter04/xd文件夹。

2. 打开lottie_xd.xd文件：

![图 4.13 – XD lottie_xd 图标文件]

![图片 B17930_04_13.jpg]

图 4.13 – XD lottie_xd 图标文件

现在，您会看到将我们的图标导出到 AE 是多么简单：

1. 通过点击其名称选择整个布局区域。

2. 前往顶部菜单栏并选择文件 | 导出 | After Effects…：

![图 4.14 – 从 XD 导出选项]

![图片 B17930_04_14.jpg]

图 4.14 – 从 XD 导出的选项

然后，哇！AE 会自动打开，我们的图标将准备好进行动画制作。简单，对吧？

图 4.15 – XD 图标导入到 AE

保存项目并开始动画制作！

用户体验动画工作流程

在我们开始使用 AE 搅拌之前，我想与你分享我通常在动画制作中使用的流程。

你会看到我们已经完成了整个过程的一半；现在，我们只需要让它变得生动起来。请记住，将这个工作流程视为建议，并随意更改以满足您自己的需求。以下是我的工作流程：

1. 进行用户体验研究以找到用户的痛点。

2. 根据用户评论发现问题/找到解决方案。

3. 线框设计。

4. 故事板。

5. 低保真度设计以再次测试。

6. 设计。

7. 将资产导出到 AE。

我们已经涵盖了所有这些：

1. 设置组合。

2. 创建关键帧。

3. 修改图层。

4. 调整时间。

5. 添加缓动。

我们将在 第五章 中介绍以下内容：与世界分享：与 LottieFiles 合作：

1. 导出为 .json 格式用于 LottieFiles

2. 在 LottieFiles 预览

3. 交给开发者

我知道，这个过程可能看起来有点长，但这只是一个涵盖复杂项目整个过程的示例。有时，可能不需要进行用户访谈，或者在某些时候，你可能不需要绘制故事板或线框，因为它们已经在你的脑海中。

让我们回到之前的位置，看看我们的故事板放在了哪里。让我们回顾一下；我们的图标当时在做什么？

1. 我们的图标将从 0% 增加到大约 110%。

2. 气泡从类似椭圆形的火花中冒出。

3. 椭圆恢复到实际大小（100%），气泡开始消失。

4. 当气泡消失时，检查 符号开始绘制。

5. 最后，在 100% 时显示 检查 符号：

图 4.16 – 我们的故事板

到目前为止，我们已经提供了所有必要的元素、资源和工具，以便开始动画制作。我们已经讨论了一些主要的用户体验概念，学习了如何将文件导入 AE，检查了多种动画工作流程之一，并且再次回顾了故事板以刷新我们的记忆。

因此，现在我们已经在我们的大脑和纸上对动画的外观、需要做的事情以及要遵循的步骤有了相当清晰的想法，让我们开始动画制作！让我们创建我们的组合。

调整我们的图标组合设置

记得在 第三章 中，学习工具：熟悉 After Effects，我们讨论了组合，它们是什么，以及我们为什么要使用它们？酷。现在是我们开始将我们所学的一切应用到实际中的时候了。

当我们将图标导入 AE 时，它通常会被导入为一个 组合。记住，组合在 项目 面板中显示，要打开一个组合，我们只需双击它。

现在，这个合成是如何导入到 AE 的？这个合成的规格是我们想要的吗？让我们检查一下。让我们检查我们的合成设置图标：

图 4.17 – 合成设置窗口视图

让我们调整一些这些设置。还记得如何做吗？以下是说明：

1. 从项目面板中选择您的合成。

2. 从顶部菜单中选择合成 | 合成设置。

3. 调整合成大小为250 x 250 像素。

4. 将帧率设置为60帧每秒。

5. 将持续时间设置为2秒。

6. 将背景颜色更改为#989898。请注意，背景颜色不会被导出，但我改变它是为了我们可以更好地看到白色圆圈。

这很简单，对吧？现在我们已经准备好了合成，让我们转到层面板。

理解我们的检查图标层

我们已经整理并调整了图标合成以满足我们的需求；现在是我们了解我们的图标在层方面的构建方式的时候了，所以，让我们检查我们的层面板中有什么。

如您在图 4.18中看到的，当我们检查层面板时，我们发现与我们在刚刚导入的插图文件中有的相同的两个层，检查和椭圆形。

为了清楚起见，检查是一个描边，椭圆形是一个形状。这很重要，将帮助我们给检查层带来我们想要的效果。但，现在不用担心；我们将在本节稍后看到这一点。

图 4.18 – 带有检查和椭圆形层属性的层面板

此外，正如您在前面的屏幕截图中可以看到的，我们的每一层都有很多子层。我们将在下一步中看到这一点。

但首先，让我们回顾一下。记住，我们的动画将从椭圆形变大开始。

建议

由于我们现在将专注于椭圆形，我建议暂时锁定并隐藏检查层，因为它在这个阶段不相关。当然，我们只有两层，可能没有必要开始隐藏或锁定其他层，但当我们开始处理一些更复杂的项目时，养成这个习惯是好的。

点击层面板中的小眼睛和锁定图标来隐藏和锁定您想要的任何层，如下面的截图所示：

图 4.19 – 眼睛和锁定图标

添加关键帧

太好了！现在我们对我们层的了解更深入了，椭圆形独立存在，没有危险我们会不小心移动检查图标，让我们开始创建一些动作。

记得在第三章，“学习工具：熟悉 After Effects”，当我们讨论关键帧时吗？正是这样！关键帧用于创建运动，而要做到这一点，我们需要至少两个：一个作为起点的一个作为终点。

话虽如此，我们希望我们的椭圆形从 0 增长到 100%，对吗？有什么想法吗？当然，我们将创建两个关键帧并改变椭圆形的缩放，一个关键帧为 0%，另一个为 100%。现在让我们这样做。

改变缩放

我们将首先开始动画缩放。我们如何做到这一点？通过调整特定关键帧的缩放椭圆形属性。以下是这样做的方法：

1. 进入图层面板。

2. 打开椭圆形层的变换属性。你可以通过选择图层并按 S 来做到这一点，但我们将更详细地讨论快捷键在接下来的章节中。

![图 4.20 – 椭圆形层的缩放值

![图片 B17930_04_20.jpg]

图 4.20 – 椭圆形层的缩放值

1. 将时间滑块放在0帧。

2. 点击缩放的计时器来创建我们的第一个关键帧：

![图 4.21 – 缩放属性的新的关键帧

![图片 B17930_04_21.jpg]

图 4.21 – 缩放属性的新的关键帧

1. 将时间滑块移动到帧30。

2. 点击缩放属性左侧的小钻石来创建我们的第二个关键帧：

![图 4.22 – 第二个关键帧

![图片 B17930_04_22.jpg]

图 4.22 – 第二个关键帧

现在，让我们左右移动时间滑块；你能注意到任何不同之处吗？当然不能。我们刚刚创建了关键帧，但还没有改变缩放属性。让我们按照以下步骤进行：

1. 将时间滑块移动到帧0。

2. 点击我们刚刚创建的关键帧。

3. 将缩放属性的百分比设置为0%：

![图 4.23 – 缩放值为 0%

![图片 B17930_04_23.jpg]

图 4.23 – 缩放值为 0%

1. 按下空格键或将时间滑块从左向右移动；现在有什么变化吗？是的！我们的图标终于开始动起来了！

2. 将时间滑块放回0帧并按下空格键。这样做几次来检查动画；你认为怎么样？时间是否正确？可能太慢了？不用担心，我们将在讨论缓动时进行调整。

现在，回到我们的故事板，我们已经将椭圆形定义为放大到 110-120%，然后回到 100%。但是，为什么我们要这样做呢？还记得我们讨论过二维动画原则吗？对于这个小图标动画，我们将把夸张和拉伸与挤压原则应用到我们的椭圆形上，以展示其灵活性、质量、重量和速度。所以，简单地夸大其大小就会产生这种印象。

如何做到这一点？很简单。按照以下步骤：

1. 将时间滑块移动到帧25。

2. 点击钻石来创建一个新的关键帧。

3. 将缩放设置为 120%。

按下空格键再次播放我们的动画。你觉得怎么样？仅仅通过这个小调整，我们的动画现在看起来更真实了；当然，时间仍然不好，缺少一些 缓动，但我们正在朝着这个方向前进。

让我们继续使用 椭圆形。让我们调整时间。为此，我们只需要拖动我们的关键帧。我鼓励你尝试在时间轴上移动它们，看看 椭圆形 的行为。我将我的 椭圆形 关键帧设置为帧 0、帧 18 和帧 21：

图 4.24 – 缩放关键帧

让我们把时间滑块移动到 0，然后再次播放几次。你觉得怎么样？现在看起来更好了，对吧？关于放大和缩小，也许我们可以稍微调整一下大小？让我们调整第二个关键帧，使其更微妙，将缩放值从 120% 调整到 110%。再次播放，现在看起来更平滑了。对！让我们继续前进！让我们调整 不透明度 属性，使我们的插图更加平滑。

调整不透明度

现在我们已经得到了我们想要的 缩放 属性，让我们调整不透明度。为此，我们将遵循与上一节相同的步骤。当然，我们可以在同一时间做这两件事，但我更喜欢一步一步地展示给你；我们会有足够的时间更快地完成事情，但我们想确保基础清楚，对吧？

重要

从现在开始，我将开始介绍一些可以节省你大量时间并帮助你提高生产力的快捷键。这里我使用的快捷键适用于 macOS。大多数都适用于 macOS 和 Windows；然而，如果你使用的是 Windows 系统，并且不确定要使用哪个快捷键，请查看 第六章，不要停止！探索持续前进的插件和资源，以获取 macOS 和 Windows 最常见和有用的快捷键列表。

话虽如此，让我们改变不透明度：

1. 选择 椭圆形 图层。

2. 按下 T 来显示 不透明度 属性（T 代表 不透明度，A 代表 锚点，S 代表 缩放，P 代表 位置，R 代表 旋转）。

3. 按下 Shift + S 以显示 缩放 关键帧。我们希望这个图层也可见，所以通过按下 Shift + A、S、P 或 R，我们可以打开和关闭它们而不会关闭其他图层。

4. 将时间滑块放置在关键帧 0。我们可以通过按下 K 来移动到下一个关键帧，按下 J 来移动到上一个关键帧。

5. 按下 不透明度 图层计时器来创建我们的关键帧。我们也可以通过按下 Option + T 来做到这一点。

6. 改变 40%，例如：

图 4.25 – 不透明度值

太好了！这是第一个创建的具有 40% 不透明度的关键帧。让我们创建第二个关键帧：

1. 通过按下 K 将时间滑块移动到下一个关键帧。

2. 按下 + T 创建一个新的关键帧或点击我们之前所做的那个小钻石图标。

3. 设置为100%。

图 4.26 – 第二个关键帧的不透明度属性值设置为 100%

1. 将时间滑块移动到0并按空格键再次检查我们的动画。

至少对我来说看起来不错。一旦我们给动画添加一些缓动效果，它看起来就会更加逼真和灵活。但是，让我们先来动画化检查。

因此，检查的行为不同；它不会放大或缩小，也不会淡入，也不会旋转或移动。我们决定检查将做什么是绘制自己。我们如何做到这一点？嗯，我将向你展示如何使用修剪路径。

修剪路径

要显示和隐藏路径或显示其一部分，我们可能需要使用蒙版；然而，Lottie 与蒙版配合得不是很好，至少目前还不是。使用蒙版可能会给我们带来麻烦，所以我们将尝试避免使用它们并尝试其他方法。

另一个选项可能是逐帧绘制我们的检查动画帧，这样接下来的关键帧总是比第一个显示更多一点的绘制，但这将会非常耗时！

这就是修剪路径出现的地方。使用这个选项可以非常有助于节省时间和精力。让我们看看这个选项能为我们做什么：

1. 阻塞椭圆层。在这种情况下，我们不会隐藏这个层，因为它在检查层后面。

2. 通过按小眼睛和锁图标显示并解锁检查层。

3. 打开检查层。

4. 打开内容属性并关闭其他所有内容：

图 4.27 – 内容属性

1. 点击添加箭头按钮并选择修剪路径选项：

图 4.28 – 选择修剪路径

现在，让我们检查我们的图层面板；那里发生了什么？正如你所见，出现了一个名为修剪路径 1的图层。让我们通过点击小箭头打开它。出现了一些不同的选项；这些是什么？

这些新选项将允许我们决定检查路径是从路径的开始处还是结束处开始绘制自己的。这更像是一种擦除效果，而不是绘制效果。

图 4.29 – 修剪路径选项

让我们稍微玩一下这些选项：

1. 将时间滑块放置在关键帧0。

2. 在开始层创建一个新的关键帧。

3. 将开始值设置为0。

4. 将时间滑块放置在关键帧30。

5. 创建一个新的关键帧。

6. 设置为100%。

7. 将时间滑块移回0。

8. 按空格键检查动画。

这里发生了什么？看起来检查正在做我们想要的事情，但方向相反。它不是自己绘制，而是在擦除自己。对，这个功能有时可能会有些令人困惑，但不要沮丧！我花了一些时间才理解其背后的逻辑，而且即使现在，有时我也要尝试几次才能做对。所以，我鼓励你尝试调整开始和结束值，以熟悉效果及其行为。

现在我们交换一下值，尝试让它正确：

1. 让我们设置100%。

2. 转到下一帧并将开始值设置为0。

3. 按下空格键并查看。

太好了！现在，检查图标做得正确。它从无到有地绘制自己，就像有人在写一样，对吧？我们做到了！然而，动画放置的位置不正确。

注意到检查动画在椭圆形达到 100%显示在屏幕之前就开始了。如果我们看一下我们的时间轴（见图 4.30），我们可以看到两个图层的关键帧都在同一时间。它们都是从帧0开始的，这就是为什么检查图标和椭圆形同时播放的原因。

图 4.30 – 时间轴上的关键帧位置

记住，当我们定义我们的故事板时，我们决定检查将在椭圆形显示在屏幕上之后绘制。所以，为了做到这一点，我们需要调整一些事情：

1. 解锁椭圆形图层。

2. 选择椭圆形图层并按S键显示缩放属性。

让我们在图层面板上检查我们的关键帧。我们可以看到两个动画都是从帧0开始的。然而，根据我们的故事板，检查动画应该在椭圆形完全 100%显示在屏幕上时开始。这意味着，我们需要将检查关键帧移动到椭圆形动画的末尾。我们可以通过选择两个检查关键帧并将它们拖到右边来实现这一点。当两个关键帧都被选中时，它们都会变成蓝色：

1. 选择两个关键帧并将它们拖到右边。

2. 按下空格键并检查动画：

图 4.31 – 检查关键帧

太棒了！看起来现在很完美！然而，它看起来有点慢，不是吗？

1. 选择第二个检查关键帧。

2. 将它拖动到大约35帧。

3. 按下空格键播放动画。

完美，我们做到了！我们正在取得进展。现在，我们将添加火花。

处理径向爆发

为了给我们的动画增添一些趣味，我们将在椭圆形中添加一些火花。为了做到这一点，我们可以为每个单独的火花进行动画处理，绘制小圆圈，并改变每个的位置、缩放和不透明度值。然而，我们将尝试一种不同的方法。我将教你如何创建径向爆发，这是一个非常酷的效果，将为我们节省很多时间。

那么，让我们开始吧！让我们通过按 + N 创建一个新的合成，并将其命名为Sparks。我们不需要更改任何更多设置。

图 4.32 – 合成设置

按照以下步骤操作：

1. 现在，让我们在Sparks合成内绘制一个形状层。让我们画一个圆。

2. 从顶部菜单中选择椭圆工具。

图 4.33 – 包含名为 Sparks 的新合成的项目面板视图

1. 在舞台面板中画一个圆。

2. 让我们画一个小圆圈。通过右键单击形状层的名称，形状层 1，来命名circle。

图 4.34 – 重命名图层

1. 让我们打开circle层，看看我们有什么。正如你可能注意到的，我们可以看到两个不同的变换选项：

图 4.35 – 圆形层变换选项

对于这个效果，我们不会使用我们迄今为止一直在使用的变换选项；相反，如果我们想要径向爆发效果起作用，我们将与内容选项中可以找到的变换选项一起工作：

1. 因此，让我们打开它。打开变换：椭圆 1。

2. 点击内容。

3. 点击变换：椭圆 1。

如同你在图 4.36中看到的，我们找到了与我们在变换工具中找到的几乎相同的选项：

图 4.36 – 变换椭圆 1 选项

让我们动画化它的位置：

1. 选择位置属性。

2. 在帧0上创建一个关键帧。

图 4.37 – 位置属性新关键帧的层和时间线视图

1. 现在，按住Shift + 并按右箭头三次；这将把我们的时间滑块移动到帧30。或者，只需拖放时间滑块。

2. 创建一个位置关键帧。

3. 将circle向上移动几个像素，向右移动几个像素。

图 4.38 – 位置属性第二个新关键帧的层和时间线视图

现在，让我们改变缩放属性，使其在最后扩展：

1. 将时间滑块移动到0。

2. 创建一个缩放关键帧。

3. 将时间滑块移动到帧30。

4. 创建第二个缩放关键帧。

5. 将圆缩小到0。

图 4.39 – 缩放关键帧的时间线视图

当我们处理这个时，让我们让我们的圆圈淡出，所以让我们改变不透明度：

1. 将时间滑块移动到0。

2. 创建一个不透明度关键帧。

3. 将时间滑块移动到30。

4. 创建第二个不透明度关键帧。

5. 将不透明度属性设置为0。

好的！你能感觉到吗？我们毫不费力地进行了动画制作！现在，你的时间线应该看起来像下面屏幕截图所示的那样：

图 4.40 – 不透明度关键帧的时间线视图

让我们施放魔法：

1. 让我们选择圆圈。

2. 点击添加按钮。

3. 选择重复器选项：

图 4.41 – 添加菜单视图

1. 重复器 1层将出现在我们的图层菜单中，正如您在下面的屏幕截图中所见：

图 4.42 – 在图层面板中的重复器 1 层视图

让我们打开它看看里面有什么。正如您在下面的屏幕截图中所见，我们找到了新的属性和值。一如既往，我鼓励您在这里尝试不同的值：

图 4.43 – 重复器属性视图

让我们继续。对于我们的动画，我建议你做以下事情：

1. 将副本值更改为15。

2. 打开变换：重复器 1。

3. 将位置设置为0。

4. 将旋转设置为24。

然后，按播放键！

图 4.44 – 重复器属性和变换视图

这不是很酷吗？在很短的时间内，我们仅仅通过动画一个圆圈就创建了我们版本的火花。想象一下，如果我们开始添加更多元素，我们能做什么！

现在，让我们回到我们的主组成：

1. 转到项目面板。

2. 双击勾选图标。

让我们完成我们的动画：

1. 将Spark组成从项目面板拖到图层面板。

2. 转到时间线。

3. 将Spark组成拖到右边，使得动画从第21帧开始。我们的时间线将看起来像下面的屏幕截图：

图 4.45 – 从第 21 帧开始的 Spark 组成时间线视图

现在，让我们播放动画！你怎么看？我将稍微调整火花；我将值更改为110%。让我们这样做，再播放一次。太棒了！我们几乎完成了！

图 4.46 – 径向爆发效果

干得好！我们已经走了很长的路！在本节的最后，我们学习了并实践了许多新事物。我们亲手制作了第一个动画图标。我们现在知道如何创建关键帧并更改属性值以创建运动和动画的错觉。我们知道通过更改图层的缩放、旋转、位置和透明度，我们可以达到很好的效果。

我们还学习了两个很酷的技术，这些技术在我们制作动画时可以节省我们大量的精力：修剪路径和径向爆发。我们还应用了本书第一部分学到的某些原则。

但是，在我们开始导出和交付我们的动画之前，我想向你展示我在前两章中提到的缓动效果。所以，让我们继续前进；让我们发现缓动！

添加缓动

现在我们已经让动画运行起来，让我们通过添加一些缓动来使其更加完美。还记得我们在创造错觉：用二维经典动画的基本原则滚动起来中提到的预期原则吗？这正是我们可以通过缓动实现的：只需点击一下，就能感知到加速和减速。而且，这个小调整将使我们的动画看起来更加美观、平滑和专业。下面是如何操作的：

1. 打开椭圆图层以显示其关键帧。

2. 前往时间轴，右键单击缩放关键帧0，并选择关键帧助手|缓动出。

图 4.47 – 右键单击关键帧菜单视图

现在，让我们对最后一个关键帧，即放置在帧:1上的关键帧，做同样的操作。

1. 前往时间轴，右键单击缩放关键帧21，并选择关键帧助手|缓动出。

2. 对于第二个关键帧，即放置在帧18上的关键帧，让我们右键单击它并应用缓动入，这样你的时间轴应该看起来像图 4.48：

图 4.48 – 应用了缓入和缓出的关键帧表示

让我们来检查一下缓动面板。点击时间轴上的小图标。从图表中，我们可以预测动画的速度；它将在开始时指数级加速，并在结束时减速。

图 4.49 – 缓动面板视图

现在，让我们播放我们的动画。你认为怎么样？你能分辨出区别吗？我敢打赌你能！现在，动画看起来更平滑了。但在我们开始对检查图层做同样的操作之前，我建议你尝试不同的值和选项。你知道的，通过实践来学习！

太棒了！我们的椭圆看起来相当酷，所以现在让我们对检查也做同样的操作：

1. 打开检查图层。

2. 打开内容图层。

3. 打开修剪路径图层。

4. 右键单击放置在帧21上的关键帧，即我们的检查动画的第一帧。

5. 选择关键帧助手|缓动。

6. 对放置在帧35上的关键帧做同样的操作。

7. 播放动画。

它越来越接近了！现在，为了最终完成它，我将在spark合成中也这样做：

1. 前往项目面板。

2. 双击spark合成。

3. 选择所有关键帧。

4. 应用缓动。

5. 前往项目面板。

6. 双击检查图标合成。

7. 播放它。

我们的动画完成了！

正如你刚刚体验到的，Ease 是一个非常强大的工具，它将让你的动画在短时间内看起来令人惊叹。当然，关于它还有很多东西要学习；我们只是介绍了一些它的方面，以便你能够掌握进一步自学的基本技能。

正如我们在本书开头提到的，我们并不旨在成为 AE 教程书；相反，我们希望给你足够的知识、背景和资源，让你能够从概念到交付开始自己制作动画。因此，我鼓励你探索并阅读更多关于 Ease 的内容。

如果你不知道从哪里开始，你知道我们已经为你安排好了，所以请继续阅读，在第六章 不要停止！探索持续前进的插件和资源中，你将找到更多关于 Ease 的资源以及更多内容！

摘要

这并不是很难，对吧？我们很快就完成了我们的第一个看起来专业的动画！我们的客户在购买后不会感到困惑，我们的应用看起来会更好。双赢双赢！

在本章中，我们完成了一个真实的项目，并学习了 UX 动画 AE 工作流程。我们现在已经涵盖了整个过程，从构思到最终动画。我们知道如何阅读和理解分镜脚本，我们学习了如何将我们的资产导入 AE，设置合成，创建关键帧，并修改层属性，如缩放、位置、旋转和不透明度来创建我们的动画。我们还学习了如何使用 Trim Paths 和径向爆发来创建特殊效果，如何调整时间，以及如何应用 Ease 来最终完成我们的项目。

让我们继续到下一章，我们将学习如何将我们的动画导出为.json文件，并在 LottieFiles 平台上预览。在那里见！

第五章：与世界分享：使用 LottieFiles 进行工作

我们准备好了，即将将我们出色的第一个 Lottie 动画导出为.json文件，然后添加到我们的应用或网站中，使用React Native。我们的应用即将变得令人惊叹，并带来质量上的改变。跟我来！

在本章中，我们将学习如何使用 Adobe After Effects（AE）的 Bodymovin 和 LottieFiles 插件导出我们的 Lottie 动画。我们将指导你创建 LottieFiles 平台账户，以便我们可以预览我们的动画并将它们交给开发者。我们还将查看 LottieFiles 的 iOS 移动应用，以便我们可以在移动设备上轻松测试我们的动画。我们还将教你如何在不使用 AE 的情况下创建简单的动画，最后，我们将通过将动画转换为 Telegram 的贴纸来享受一些乐趣。

在本章中，我们将介绍以下主题：

• 将我们的动画从 AE 导出为.json文件

• 在 LottieFiles 中创建账户

• 探索 LottieFiles 仪表板

• 在桌面和移动 Lottie 平台中进行测试的重要性

• 不使用 AE 创建和编辑 Lottie 动画

• 将可缩放矢量图形（SVG）文件转换为动画 Lottie 文件

• 将 Lottie 文件转换为 GIF

• 创建 Telegram 贴纸和贴纸组

技术要求

对于本章，我们需要一些特定的插件，这些插件将帮助我们导出动画为.json文件，并在桌面和移动设备上预览。我们需要的工具如下：

• Adobe AE

• Bodymovin AE 插件

• LottieFiles AE 插件

• LottieFiles 移动版

• Chrome、Safari 或你选择的浏览器

导出我们的动画以供交接

要将我们的动画从 AE 导出为.json文件，我们可以使用 AE 的Bodymovin和LottieFiles插件。但是，我们必须学习两者吗？你可以自由选择使用任何一个；它们都可以下载，免费使用，并且得到完全维护和支持。

下载和安装插件

对于下载和安装指南，你可以跳转到第六章，不要停止！探索持续前进的插件和资源，我们将引导你完成这个过程。

因此，只需选择你感觉更舒适的一个或最适合你工作流程的一个。也许你只需要使用 Bodymovin，但是 LottieFiles 将为你提供额外的测试和预览工具。

对于我来说，我真的很习惯使用 Bodymovin，特别是因为你现在已经知道，这是第一个可以将你的动画转换为.json文件的插件；它简单且能完成工作。但是，时代在变化，新的工具和新的功能也随之出现。

在 LottieFiles 的幕后有一支庞大的专业团队。我必须说，这些天来，LottieFiles 插件与我的工作流程更加匹配。它让我能够轻松地在桌面和移动设备上预览我的动画，并且可以瞬间与利益相关者分享。

话虽如此，我建议您先使用这两个插件，然后再决定哪个最适合您。让我们先探索 Bodymovin。

使用 Bodymovin 导出我们的动画

正如我们在前面的章节中看到的，Bodymovin 是第一个允许我们将动画导出为 .json 文件的 AE 插件，并且它工作得非常完美。它简单且提供了一些有趣的导出选项，我们将在下一分钟看到。

但是，在我们开始之前，我们假设您已经为 AE 安装了 Bodymovin，否则，您可以跳到 第六章，不要停止！探索将帮助您继续前进的插件和资源，并按照步骤安装它。

好的，假设我们已经准备好了一切（安装了 Adobe AE 和 Bodymovin 插件），那么让我们在 AE 中打开 Bodymovin 插件：

1. 打开 Adobe After Effects。

2. 打开我们的 check_icon.ae 项目。

3. 前往顶部导航菜单并点击 窗口 | 扩展 | Bodymovin：

图 5.1 – 在 AE 中打开 Bodymovin 面板

让我们检查一下 Bodymovin 面板。

首先，面板在 渲染 视图中展开。这是我们将会关注的视图，因为其他选项在此刻对我们来说并不相关。正如我们在 图 5.2 中所看到的，我们项目中的两个组合在这里被列为 check_icon 和 Sparks：

图 5.2 – Bodymovin 组合视图

我们可以导出面板中列出的任何组合，但我们的目标是导出整个动画。那么，我们应该导出面板中列出的哪个组合呢？没错，包含整个动画的主要组合，即 check_icon 组合。

在导出之前，对于每个组合，我们都可以调整一些设置。这在使用图像、表达式和实时文本时非常有用，但正如您所知，我强烈建议我们的动画尽可能简单。如果您想了解更多信息，可以查看我们在 第六章，不要停止！探索将帮助您继续前进的插件和资源 中对支持的 Lottie 功能的讨论。

现在，让我们导出我们的动画：

1. 点击 Selected 列表下方的 check_icon 组合左侧的小圆圈。

2. 点击右侧的三个绿色点图标以保存您的 .json 文件并选择您的文件夹目的地。注意，.json 文件默认命名为 data.json，但您可以给它任何您想要的名称。我将我的命名为 check_icon.json：

图 5.3 – check_icon 选中

1. 你现在可以看到 渲染 按钮被突出显示，并且目标文件夹位于 check_icon 名称旁边可见。让我们点击 渲染 按钮：

图 5.4 – 渲染按钮突出显示

1. 点击 完成 按钮：

图 5.5 – 渲染成功完成

太好了！我们的动画已导出为 .json 文件，并准备好预览。但在我们这样做之前，我们将向你展示如何使用 LottieFiles 插件完成同样的操作。

使用 LottieFiles 导出我们的动画

在过去几年里，LottieFiles 社区的成员一直非常忙碌，并推出了一款名为 LottieFiles 的新 AE 插件。

LottieFiles 插件基于实际的 Bodymovin 开源项目，但有一些 Bodymovin 没有的额外功能。这就是为什么我们将看到如何使用 LottieFiles 导出你的动画。

因此，我们假设你已经准备好了所有东西，否则，请继续前往 第六章 的 安装 LottieFiles 插件 部分，不要停止！探索将帮助你继续前进的插件和资源，我们将展示如何下载和安装 LottieFiles 插件的详细信息。

无论何时你准备好了，让我们在 AE 中打开 LottieFiles 插件：

1. 打开 Adobe After Effects，如果你还没有这样做的话。

2. 打开我们的 check_icon.ae 项目。

3. 点击顶部导航菜单并选择 窗口 | 扩展 | LottieFiles：

图 5.6 – 在 AE 中打开 LottieFiles 面板

请记住

要能够访问 LottieFiles 插件面板，你需要创建一个 LottieFiles 平台账户。我们将在下一节中介绍这一点，所以如果你想现在创建你的账户，请跳到下一节，然后再回来。我们在这里等你。

太好了！现在，既然一切都已经安排妥当，让我们检查 AE 的 LottieFiles 插件面板。

初看之下，LottieFiles 面板与 Bodymovin 非常相似。两者都在组成面板上打开。我们还可以看到我们组成列表，每个组成旁边的 设置 工具图标，以及用于导出我们的动画的 导出 箭头图标，如 图 5.7 所示供参考：

图 5.7 – LottieFiles 面板组成视图

在 组成 面板旁边，我们可以找到一些其他图标，如 眼睛 和 指南针：

图 5.8 – LottieFiles 面板顶部图标

眼睛 代表 预览 面板。在这个面板中，我们可以找到我们迄今为止所渲染的每一个动画，如下图所示：

![图 5.9 – LottieFiles 面板预览视图

图 5.9 – LottieFiles 面板预览视图

通过选择任何显示的动画，我们将看到其详细信息，如文件大小、帧率、尺寸和导出时间。我们还可以更改背景颜色，以查看它在不同场景中的外观，或者直接将其导出到我们的 LottieFiles 移动应用。我们可以通过点击小 地球 图标来保存文件或与社区分享：

![图 5.10 – LottieFiles 面板预览详情

图 5.10 – LottieFiles 面板预览详情

指南针 代表 搜索 面板。在这个面板中，我们可以查找 LottieFiles 库中的免费动画来使用或获取灵感。当我们不需要完全个性化的动画时，这变得非常有用。想象一下，如果我们需要一个加载条；我们可以搜索一个，将其加载到 AE 中，并更改我们需要的任何内容，比如颜色、时间等等。

![图 5.11 – LottieFiles 面板 – 发现免费动画视图

图 5.11 – LottieFiles 面板 – 发现免费动画视图

我有时会寻找一个动画作为我心中想法的起点，检查它是如何制作的，或者只是为了风格或时间灵感。

LottieFiles 库中的一些动画包含 .json 文件以及 AE 文件，免费下载和使用。要知道动画是否可以下载为 AE 文件，您需要寻找包含 下载 AEP 文件 按钮的动画：

![图 5.12 – LottieFiles 面板 – 发现免费动画详情

图 5.12 – LottieFiles 面板 – 发现免费动画详情

现在我们已经了解了不同的 LottieFiles 面板选项，例如 组合、预览 和 搜索 面板，让我们专注于导出我们的动画。

要做到这一点，请执行以下步骤：

1. 让我们点击回 组合 面板视图。

2. 点击 check_icon 旁边的箭头：

![图 5.13 – LottieFiles 面板组合视图

图 5.13 – LottieFiles 面板组合视图

我们的 check_icon 动画出现在面板中。

1. 现在，我们可以将我们的文件保存为 .json 或 .lottie 文件，正如我们之前提到的，它们是相同的，或者将其上传到我们的预览中：

![图 5.14 – LottieFiles 面板 – 成功导出 Lottie

图 5.14 – LottieFiles 面板 – 成功导出 Lottie

1. 如果我们点击 上传 按钮，动画将出现在 预览 视图中。耶！

![图 5.15 – LottieFiles 面板 – 我们的新图标上传到预览视图

图 5.15 – LottieFiles 面板 – 我们的新图标上传到预览视图

太棒了！我们刚刚将动画导出为 .json 文件，这意味着我们创建了第一个 Lottie！

现在我们知道了如何通过使用 Bodymovin 或 LottieFiles 插件将 AE 动画文件导出为 .json 文件，让我们进入 LottieFiles 平台，为此，我们将创建一个用户。让我们开始吧！

在 LottieFiles 中创建用户账户

我们已经将动画导出为 .json 文件，并且有了这个文件，我们可以将其交给技术团队，或者继续学习本书的第三部分，“将您的 Lottie 动画添加到移动应用中”，了解如何在我们的应用中实现动画。

但是，我们不要急于行动；LottieFiles 平台允许我们在将动画交给开发团队之前快速上传和测试我们的动画，这样我们就能确保一切就绪，并且我们没有使用任何不受支持的特性。

为了做到这一点，正如我们之前提到的，我们需要在 LottieFiles 平台上注册，以便能够使用 AE 的 LottieFiles 插件导出我们的动画：

1. 在您的浏览器中转到 lottiefiles.com/：

图 5.16 – lottiefiles.com 桌面浏览器视图

1. 点击免费注册按钮。

2. 选择最适合您的选项来创建您的账户，例如 Facebook、Google 或电子邮件：

图 5.17 – LottieFiles 登录/注册窗口

然后，您就完成了！

正如我们在第一章，“开始使用 Lottie”中提到的，在 LottieFiles 桌面平台上，您可以做很多事情，包括搜索动画、雇佣动画师、买卖动画，以及搜索插件和工具。但是，目前我们将专注于我们的用户仪表板，如图 5.18 所示：

图 5.18 – LottieFiles 平台登录视图

在我们进入下一节开始探索 LottieFiles 平台之前，让我在这里简要回顾一下。在本章中，您刚刚创建了您的第一个 LottieFiles 账户，并使用 AE 的 Bodymovin 和 LottieFiles 插件将动画导出为 .json 文件。现在只剩下一个步骤，那就是上传和预览我们的动画图标，并与全世界分享！

探索 LottieFiles 控制台

LottieFiles 平台允许我们上传、保存和分享我们的动画给开发者、客户，甚至如果我们愿意的话，给全世界。而且，不仅如此，它还提供了我们公共动画的统计数据以及关于点赞、购买等信息。如何？让我们来看看。要做到这一点，只需将鼠标悬停在您的头像上，并选择任何选项，例如，例如，选择我的公共动画选项：

图 5.19 – 我的仪表板菜单视图

一旦我们打开我们的仪表板，我们可以在屏幕左侧看到一些不同的选项。还有一个空的中部区域，其中显示一条鼓励我们上传第一个动画的消息：

![图 5.20 – 我的仪表板菜单视图

图 5.20 – 我的仪表板菜单视图

正如你所见，LottieFiles 是一个非常直观且易于使用的工具。但是，让我们快速浏览一下左侧的菜单。在这里，我们可以看到几个部分，我们将在下一节中查看。

我的下载

我的下载部分是我们找到从 LottieFiles 平台下载的任何动画的按日期列表的地方。任何 .json、.ae、.gif 或其他你下载的文件格式都会出现在这里：

![图 5.21 – 我的下载视图

图 5.21 – 我的下载视图

我的点赞

在这个部分，我们找到了我们点赞的所有动画的列表。我把它用作“稍后查看”的功能，所以每次我在 LottieFiles 中搜索时，看到一些动画可以作为未来参考，我都会点赞，这样它就会被保存在这个部分：

![图 5.22 – 我的点赞视图

图 5.22 – 我的点赞视图

我的公共动画

如果你愿意将你的动画分享给公众，这个部分相当酷。在这里，你可以找到一些关于其他用户给你点赞的统计数据，你动画被下载的次数，以及个人资料查看次数。你还可以预览你发布到公众的所有动画以及正在审查以供分享的动画：

![图 5.23 – 我的公共动画视图

图 5.23 – 我的公共动画视图

我的购买

任何时候你购买一个动画，它都会出现在这里。在我的情况下，这个区域是空的，因为我通常自己创建动画，但我鼓励你快速浏览一下市场。它可以为提供灵感，因为那里有那么多优秀的动画师：

![图 5.24 – 我的购买视图

图 5.24 – 我的购买视图

我的私有动画

最后，对我来说，我最常用的部分是我的私有动画。在这里，你可以找到你在 LottieFiles AE 插件中预览的所有动画，或者你通过 LottieFiles 桌面和移动平台上传的动画：

![图 5.25 – 我的私有动画视图

图 5.25 – 我的私有动画视图

现在我们已经熟悉了 LottieFiles 控制台，让我们开始上传我们的动画；请跟随我到下一节，我们将了解所有相关信息。

在桌面和移动 LottieFiles 平台上测试的重要性

现在，我们即将上传我们的动画到 LottieFiles 并准备好交付。这对我是一个非常激动人心的时刻。当我为 Lottie 动画时，我看到三个重要的里程碑。首先，当我们使用 Bodymovin 或 LottieFiles 插件在 AE 中渲染动画并检查一切是否正常；第二个重要时刻就是现在，当我们即将将动画上传到平台以检查一切是否正常；第三个里程碑是当我们的动画上线时！但是，我们不要急于求成；让我们上传我们的图标并检查一切是否运行良好。

预览我们的 .json 动画有三种方式：

• 在 LottieFiles 插件为 AE 的预览窗口中。

• 在 LottieFiles 浏览器平台上上传、预览和交付。

• 在 LottieFiles 的 Android 和 iOS 应用中预览。

使用 LottieFiles 插件为 AE 预览 .json 文件

正如我们在本章前面所见，一旦我们在 AE 的 LottieFiles 插件中渲染了动画，我们就可以在同一个插件面板的 视图 部分自动看到它的预览。这里我们不仅能做这件事。我们还可以做以下事情：

• 查看有关文件大小的更多信息。

• 更改预览的背景颜色。

• 保存为 .json 或 .lottie 文件。

• 将文件上传到 LottieFiles 仪表板中的 我的私有动画。

• 生成一个二维码，从我们的移动设备扫描以在那里预览。

因此，正如您所看到的，LottieFiles 插件允许我们从同一个地方渲染、预览、上传和交付我们的动画。

话虽如此，我强烈建议无论 .json 文件将在哪里显示（网页、iOS 和/或 Android），都要上传和预览它们，即使我的动画在 LottieFiles 插件中看起来完美。您很快就会体验到为什么我会这么说。

在 LottieFiles 平台上上传和预览 .json 文件

让我们看看如何进入下一步；让我们看看如何上传和预览我们的 .json 动画。我们已经使用 Bodymovin 或 LottieFiles 插件渲染并保存了我们的 .json 动画，现在我想测试我的动画并确保一切按预期工作。怎么做？在 我的仪表板 上。

让我们上传我们的动画。就像点击我们可以在 LottieFiles 浏览器仪表板中找到的 上传动画 按钮一样简单，如图 图 5.26 所示：

![Figure 5.26 – My Dashboards 视图中的上传动画按钮

![img/B17930_05_26.jpg]

Figure 5.26 – My Dashboards 视图中的上传动画按钮

一旦我们点击上传文件的按钮，就会弹出一个新窗口。正如您在下面的屏幕截图中所见，上传我们的 .json 文件就像将其拖到窗口中一样简单：

![Figure 5.27 – 上传动画拖放/浏览屏幕

![img/B17930_05_27.jpg]

图 5.27 – 上传动画拖放/浏览屏幕

那么，让我们这样做，让我们将我们的 icon_check.json 文件拖到这里。

一旦我们这样做，我们会找到一个包含我们的动画和一些可调整选项的预览窗口，例如背景颜色和速度，例如：

![图 5.28 – 预览窗口

图 5.28 – 预览窗口

如你所见，在 LottieFiles 控板中预览和测试 .json 文件非常简单直接。让我们进入下一节，学习如何在移动设备上做同样的事情。

在移动 LottieFiles 应用中预览我们的 Lottie 动画

在 LottieFiles 控板中预览我们的动画是一件明智的事情，并且可以避免我们传递不正常工作的 LottieFiles。记住我们之前提到的，在第四章**，移动它！使用 After Effects 制作我们的第一个 Lottie 动画，有一些功能在特定设备上不受支持。例如，径向爆发在 iOS 上不受支持。

支持的功能

你可以在第六章**，不要停止！探索将帮助你继续前进的插件和资源，在支持 iOS、Android 和网页的 Lottie 功能*部分了解更多关于 LottieFiles 支持的功能。

让我们看看在我们 iOS 移动应用中预览动画会发生什么：

1. 返回到 AE。

2. 打开LottieFiles面板，向下滚动到最底部，你会看到你的可用设备列表：

![图 5.29 – LottieFiles 插件 AE 预览面板上的显示 QR 码按钮

图 5.29 – LottieFiles 插件 AE 预览面板上的显示 QR 码按钮

1. 选择你想要测试的设备。在我的情况下，我将选择iPhone12Mini。

2. 点击显示 QR 码按钮：

![图 5.30 – LottieFiles 插件 AE 预览面板上生成的 QR 码

图 5.30 – LottieFiles 插件 AE 预览面板上生成的 QR 码

现在，让我们拿起手机来完成这个过程：

1. 打开 LottieFiles 应用。

2. 点击扫描按钮扫描二维码，voilà，动画就会在这里显示出来！

如果你是在 iOS 设备上做这件事，你会注意到有些奇怪的事情发生，对吧？径向爆发没有正确显示！为什么？我们使用 Bodymovin 和 LottieFiles 插件在 AE 中渲染了动画，看起来预览效果很好。此外，当我们将其上传到 LottieFiles 控板时，动画显示正确，但现在不是，至少在 iOS 设备上不是（如果你是从 Android 设备检查的，你不会知道我在说什么，因为它在 Android、Windows 和网页上运行得非常好）。

但是，为什么是这样？我们是不是做错了什么？嗯，不是的，只是因为这个功能在 iOS 上不受支持。在那里，我已经说过了。径向爆炸在任何 iOS 设备上都不会工作。那么，我们最初为什么要做这个呢？当然，有一个支持的功能列表，但是，我想让你亲自体验一下，在交付之前测试事情是多么重要。无论我们多么确信某件事会工作，有时，事情就是不会。

LottieFiles 插件和平台正在不断迭代；有一天事情会工作，第二天就不会，反之亦然。所以，我的建议是始终要测试。

那么，现在怎么办？嗯，我们可以使用带有径向爆炸效果的动画在网页、Windows 和 Android 上使用。但是，如果我们想在 iOS 上使用它，我们必须回到 AE 并重新做吗？不是的，LottieFiles 允许我们在不回到 AE 的情况下调整动画中的几个方面。所以，请跟我一起，我们将在一瞬间纠正这个问题。

不使用 AE 创建和编辑 Lottie

最后那个部分有点像低踢；我们都对我们的酷炫动画感到非常满意，现在怎么办？在 iOS 上，这个效果不会显示。嗯，这些事情有时会发生。我们现在有三个选择：

• 抱怨一下。

• 返回 AE 并在我们的动画周围添加一些小圆圈，一个接一个。

• 保持简洁，只需移除径向爆炸效果。

我会选择第三个选项，你们会看到它有多快。我们甚至不需要回到 AE。让我们打开Lottie 编辑器。为此，请按照以下步骤操作：

1. 前往 LottieFiles 网络仪表板。

2. 前往左侧菜单并选择我的私有动画。

3. 点击check_icon动画。

4. 点击编辑动画按钮，如图 5.31 所示：

![图 5.31 – LottieFiles 桌面仪表板预览窗口中的编辑动画按钮

图 5.31 – LottieFiles 桌面仪表板预览窗口中的编辑动画按钮

Lottie 编辑器出现了，这里我们也可以施展一些魔法。正如我们所说，我将保留我的超级酷炫的闪烁图标用于网页和 Android，我将调整它以适应 iOS。

让我们检查编辑工作区视图：

图 5.32 – 编辑工作区视图

在左侧面板中，我们看到LOTTIE URL、LOTTIE 属性和图层：

![图 5.33 – 左侧编辑面板

图 5.33 – 左侧编辑面板

Lottie URL

Lottie URL 实际上是.json代码本身。它包含所有动画信息，可以用来与技术团队分享你的动画。然而，也有一些其他更直观的方式来分享你的动画，我们很快就会看到。

Lottie 属性

当选择LOTTIE 属性时，屏幕右侧会打开一个新的面板，如图 5.34 所示。在这个面板中，我们可以更改一些动画属性：

• 动画首选项：这是我们可以调整动画 尺寸、帧率 和 持续时间 的地方。

• 播放设置：Lottie 还允许我们更改 背景颜色，但仅用于预览。因此，由于我们的动画背景是白色覆盖白色，让我们选择一个不同的颜色。此外，我们还可以调整 播放速度 为 1.5x、2x 或 2.5x。

• 分组颜色：在这里，魔法发生了。我们看到的颜色列表是动画中包含的颜色。我们可以通过点击其中一个并选择一个新的颜色来更改它们。这将改变动画中的所有颜色，但如果您稍等片刻，我会向您展示如何逐步更改。

• TELEGRAM STICKER EXPORT：在这里，您可以轻松地将动画转换为 Telegram，但我们将在下一分钟看到。现在，让我们先专注于编辑器。

• 导出为 LOTTIE JSON：一旦您对动画满意，只需点击蓝色按钮即可导出。简单易懂，对吧？

• .json 文件，但您也可以将其作为新的动画上传到您的仪表板 预览 部分：

图 5.34 – 右侧编辑器面板

现在我们知道了如何直接在 Lottie 编辑器 中更改 Lottie 动画的主要属性，让我们看看还能做什么。

层

我们刚刚看到了如何调整动画的一些主要属性，但 Lottie 编辑器 通过层允许我们更深入地探索它。

正如我们在屏幕左侧可以看到的 (图 5.35)，我们的动画中包含三个不同的层，这与我们在 AE 动画中拥有的相同：检查、椭圆形 和 火花。

现在，让我们选择 层 | 检查，看看我们能做什么：

图 5.35 – 左侧面板，选定的层

当选择 检查层 时，我们会注意到屏幕右侧的选项发生变化，并出现新的属性，如下所示：

• .json 文件。

• 颜色：在这里，我们将找到每个层中使用的颜色。在我们的例子中，我们只看到蓝色，但如果这个层有更多颜色，我们在这里会看到它们，并且可以通过点击颜色并选择一个新的颜色来更改它们。

• .json 文件，但不包括其他任何内容：

图 5.36 – 层属性视图

• 文本层属性：在我们的图标示例中，我们会看到一个额外的选项，那就是文本层属性。尽管如此，如果我们动画中有文本，我们会在屏幕左侧看到文本层，当选择它时，我们会在工作区域右侧看到不同的面板，如图 5.37 所示。我们可以更改的属性是内容本身，但除此之外，我们对此没有太多可以做的，至少目前还没有。此外，我不太依赖它，因为有时更新的内容可能无法正确显示，甚至根本不显示。

图 5.37 – 文本属性视图

所以，考虑到所有这些，根据你正在工作的项目，尽量在 AE 项目中保持层尽可能简单可能很有用。为每个图形创建一个层可能不是一个坏主意，因为以后你只需来到 Lottie 编辑器，调整颜色，显示或隐藏它们，甚至更改内容。当然，这取决于项目和动画的复杂性，但提前思考总是好的。

话虽如此，让我们回到我们的图标。你认为我们需要做什么才能让图标在 iOS 上正常工作？很简单！只需将 .json 文件隐藏成另一个名称。让我们这么做：

1. 在屏幕左侧选择精灵层。

2. 点击工作区域右侧出现的眼睛图标：

图 5.38 – Lottie 编辑器视图 – 精灵层和隐藏图标突出显示

1. 移动到LOTTIE 属性并选择check_icon。

2. 再次将其导出为 .json 文件。

3. 以新名称保存，例如，check_icon_ios.json：

图 5.39 – Lottie 编辑器视图，动画和导出为 Lottie JSON 按钮突出显示

就这样！我们已经有了准备实施的具体图标。一个用于 Android 和网页，另一个用于 iOS。我们已经准备好将其交给开发团队，并且可以确信我们的动画将与我们设计和动画化的一样，没有任何惊喜。

太好了！现在你知道如何调整 Lottie 动画或其层的颜色、速度和尺寸，并且可以继续前进。但是，别急着走。还有一些 LottieFiles 可以做的，我想展示给你。让我们进入下一节，学习如何从简单的 SVG 构建动画，甚至不需要使用 AE。

几秒钟内将 SVG 转换为动画 Lottie

现在我们已经了解了 Lottie 编辑器可以实现的功能，比如更改颜色、隐藏或显示图层、导出单个图层以及更改动画的内容、尺寸或速度，让我们继续学习 LottieFiles 平台允许我们在单步中进行的其他功能。让我们忘记我们的check_icon，它已经准备好交给开发团队。让我们看看动画 SVG 文件是多么简单和简单。

我们在第一章中讨论了这一功能，开始使用 Lottie，但现在我们将向您展示如何将您的 SVG 文件转换为 Lottie：

1. 前往lottiefiles.com/svg-to-lottie：

图 5.40 – SVG 到 Lottie 功能视图

1. 点击浏览你的 SVG 文件按钮。

2. 浏览此书提供的lottie/chapter05/SVGtoLottie.svg文件。

3. 打开SVGtoLottie.svg文件。

干得好！你注意到屏幕已经改变，对吧？让我们看看这一切都是关于什么的。

在屏幕中央，我们可以看到我们的静态 SVG，即星星。这是我们刚刚上传的 SVG 文件。在星星的左侧有一个名为动画的窗口，其中包含一些已经制作好的动画，而在右侧，我们可以找到导出选项。

所以，就是这样。让我们做一个例子：

1. 从动画窗口中选择您喜欢的动画。

2. 在中央视图上检查结果。

3. 你喜欢吗？不喜欢？试试别的。喜欢？让我们将其导出为.json格式。

4. 点击下载 Lottie按钮，就这样！

图 5.41 – SVG 到 Lottie 主工作区

如此简单，你刚刚学会了另一种创建自己动画的方法。显然，这是一个非常简单的动画，但有时它可以完成这项工作。

所以，现在你已经知道了如何动画化 SVG，让我们继续学习如何将 Lottie 转换为 GIF。

一键将 Lottie 转换为 GIF

如果我们学习如何使用 Lottie，那是因为我们想要尽可能避免在我们的应用程序和网站上添加动画 GIF 文件。正如我们在这本书中之前所说的，GIF 文件在文件大小上可能非常庞大，图像质量低，并且不会响应。然而，有时我们可能需要这种格式，例如，用于某些社交媒体帖子。

LottieFiles 让我们能够在瞬间将.json文件转换为 GIF，以下是操作步骤：

1. 前往lottiefiles.com/lottie-to-gif。

2. 浏览此书提供的lottie/chapter05/LottietoGIF.json文件（这是我们在几秒钟内将 SVG 转换为动画 Lottie部分创建的 Lottie）。

3. 打开LottietoGIF.json文件：

图 5.42 – Lottie 到 GIF 功能视图

太好了！正如你所见，这相当直接。我们在屏幕中央看到我们的动画星星，右侧有几个选项，如背景颜色和分辨率。所以，就是这样。

1. 为你的星星选择一个背景颜色；我就选择白色。

2. 选择一个分辨率；我认为500 x 500对我来说是合适的。

3. 点击转换为 GIF按钮：

![图 5.43 – Lottie 到 GIF 主要工作区域

![图片 B17930_05_43.jpg]

图 5.43 – Lottie 到 GIF 主要工作区域

你会注意到动画可能需要一些时间才能转换完成，尤其是如果我们处理的是复杂的动画。只需耐心等待。同时，请注意，一旦转换完成，转换为 GIF 按钮将被下载 GIF 按钮替换：

![图 5.44 – 在 GIF 到 Lottie 工作区域上的转换和下载 GIF 按钮视图

![图片 B17930_05_44.jpg]

图 5.44 – 在 GIF 到 Lottie 工作区域上的转换和下载 GIF 按钮视图

1. 点击下载 GIF按钮以下载你的动画 GIF。

你已经将 .json 动画转换成了 GIF 文件，可以用于任何地方。

所以，现在你已经学会了如何使用 LottieFiles 功能将你的 Lottie 动画转换为 GIF 文件，让我们进入下一节，看看如何使用 LottieFiles 编辑器创建 Telegram 贴纸。

为 Telegram 创建你自己的个性化贴纸

所以，回到 Lottie 编辑器，记得我们之前提到过，我们可以将 Lottie 导出以用作 Telegram 贴纸。让我们看看我们如何做到这一点。不要害怕，这个过程可能看起来很长，但实际上非常直接：

1. 前往 lottiefiles.com/editor。

2. 浏览此书提供的 lottie/chapter05/telegram_sticker.json 文件，这是我之前做的一个简单的挥手动画，现在我想与你分享。

3. 打开 telegram_sticker.json 文件。

![图 5.45 – 拖放或浏览 Lottie 编辑器屏幕

![图片 B17930_05_45.jpg]

图 5.45 – 拖放或浏览 Lottie 编辑器屏幕

很酷！一旦文件上传，你会注意到视图已经改变，我们回到了之前在本章中使用的 Lottie 编辑器。注意，挥手的动画已经加载到屏幕中央，如下面的截图所示：

![图 5.46 – 在 Lottie 编辑器中运行的挥手动画

![图片 B17930_05_46.jpg]

图 5.46 – 在 Lottie 编辑器中运行的挥手动画

现在，让我们继续创建 Telegram 贴纸。

在我们将动画导出为 Telegram 贴纸之前，有两个规格我们必须审查。这些是尺寸和持续时间。尺寸必须是512 x 512，且持续时间不能超过3.00秒。然而，记住我们总是可以直接在Lottie 编辑器中调整这些。

由于我在这里重用了旧动画，而且在我制作它的时候，我没有想到要将其用于 Telegram，所以我们必须将尺寸调整为512。那么，让我们在Lottie 编辑器中更改它。

1. 设置 512。

2. 点击 更新 按钮。

持续时间合适，因为它只有 3 秒。以下截图显示了 动画偏好 面板：

![图 5.47 – 挥手偏好设置

图 5.47 – 挥手偏好设置

完美，现在我们已经安排好了一切，让我们在同一面板上稍微向下移动。我们正在寻找 TELEGRAM STICKER EXPORT 工具。你应该在右侧面板向下滚动时看到它。

1. 点击小蓝色按钮以将挥手作为 Telegram 贴纸下载。

2. 将下载一个 sticker.tgs 文件。

![图 5.48 – Telegram 贴纸导出面板视图

图 5.48 – Telegram 贴纸导出面板视图

1. 打开 Telegram 桌面版。

2. 在搜索框中输入 Stickers。

3. 点击 贴纸 验证联系人：

![图 5.49 – Telegram 桌面搜索贴纸机器人聊天

图 5.49 – Telegram 桌面搜索贴纸机器人聊天

1. 点击 开始 以与 贴纸 机器人开始对话：

![图 5.50 – 贴纸机器人的“开始对话”按钮

图 5.50 – 贴纸机器人的“开始对话”按钮

1. 现在，在会话窗口中输入 /newanimated。

2. 将消息发送到机器人：

![图 5.51 – 贴纸机器人对话视图

图 5.51 – 贴纸机器人对话视图

让我们遵循 贴纸 机器人给出的指示：

1. 让我们给我们的贴纸集起一个名字（即使我们只有一个贴纸，我们也必须这样做）。我将我的命名为 My First Lottie Stickers。

2. 将我们从 Lottie 编辑器下载的 sticker.tgs 文件拖放到聊天中：

![图 5.52 – 发送你的 sticker.tgs 文件

图 5.52 – 发送你的 sticker.tgs 文件

1. 向机器人发送一个表情符号。这将与挥手相关的表情符号。我们可以发送尽可能多的表情符号，但我建议坚持一个或两个。我将它与现有的挥手表情符号相关联，👋。

2. 输入 /publish。

3. 选择 我的第一个 Lottie 贴纸 贴纸集：

![图 5.53 – 贴纸机器人上的发布按钮

图 5.53 – 贴纸机器人上的发布按钮

1. 输入 /skip。

2. 输入一个简短的名字以创建一个分享的 URL。我选择了 hellolottie。

3. URL 已创建为 t.me/addstickers/hellolottie，您可以与朋友分享！

这不是很酷吗？现在您知道如何创建动画，将其导入 Lottie 编辑器，将其作为 Telegram 贴纸下载，并在 Telegram 中创建您自己的贴纸集以供分享。恭喜！我们已经走了很长的路！

摘要

哇！我们在这里做了这么多事情；做得太棒了！而且你知道最好的部分是什么吗？你现在准备好享受乐趣并从头开始创建你自己的动画了！到目前为止，我们学习了如何使用 Bodymovin 和 LottieFiles 插件将我们的动画从 AE 导出为.json文件。我们经历了在 AE、桌面和移动设备上测试导出的.json文件的过程，并意识到在交给开发团队之前在每台设备上测试它的重要性。

我们还在 LottieFiles 平台上创建了一个账户，并了解了 LottieFiles 仪表板，在那里你可以把所有的动画集中在一起。我们发现了 Lottie 编辑器，以及如何通过改变颜色、尺寸、速度和内容来快速调整任何.json动画。

我们还学习了如何通过使用静态 SVG 文件来创建非常简单但直接的动画，以及如何将 Lotties 转换为 GIF 用于我们的社交媒体或其他相关内容。

最后，最有趣的部分，我们导出了一个 Lottie 动画作为 Telegram 贴纸，并学习了如何使用 Stickers 机器人创建一个 Telegram 贴纸组。

那么，你准备好展翅高飞了吗？我敢打赌你已经准备好了，并且已经开始思考你可以实现的所有大事以及从现在开始你的应用将看起来多么酷、一致和用户友好。

但是，在我让你们自己去探索之前，我想分享一些可能对你们这个过程有所帮助的参考资料、技巧和窍门。所以，跟我进入下一章，我将告诉你们所有这些内容。

第六章：不要停止！探索持续前进的插件和资源

回顾过去，我意识到我们经历了多少新事物。在本书的开头，Lottie 可能是一个您可能听说过但不确定是什么或如何工作的东西，而现在，仅仅五章节之后，我相信您在谈论 Lottie 的环境、动画和After Effects（AE）时已经足够自信。您已经了解并体验了使用 AE 和 LottieFiles 创建动画的好处，您现在熟悉了 Adobe AE，能够构思、草图、创建和导出您独特的动画，并且有机会亲自学习和体验真正的用户体验（UX）动画工作流程。

话虽如此，本章是动画时可以随时查阅的实用指南，一个您需要寻找新动画资源时可以随时返回的地方。在接下来的章节中，您将找到下载和安装我们创建动画所需的所有必要工具和插件的链接和说明，这样您就不会迷失方向。

我们将列出每个平台和设备支持或不支持的功能，并提供一些技巧和窍门来避免它们。记得在*第五章**中发生的事情，“与世界分享：使用 LottieFiles 工作”？火花没有工作，对吧？所以，请随时查阅这张表格，因为它在我们创建 AE 动画时将非常有用。

我们将列出一些快捷键，这将帮助您提高工作效率并节省大量时间。最后，我们将为您提供足够的资源，以便您可以继续自学。

让我们继续前进到下一节，安装我们需要的所有工具和插件。

我想分享一些可以帮助您提高工作效率并节省时间的技巧和窍门。此外，我还想分享我在构思、绘图或动画制作时通常使用的资源，我相信这些资源在您准备制作动画时一定会帮到您。

在本章中，我们将涵盖以下主题：

• 下载和安装您创建动画所需的必要工具和插件

• iOS、Android 和 Web 支持的 Lottie 功能

• 主要的 AE 快捷键（Windows 和 Mac）

• 帮助动画制作过程的资源

• 提升动画技能的教程

技术要求

对于本章，我们不需要除了您首选的浏览器以外的任何东西。

下载和安装必要的插件和工具

在我们开始创建动画之前，我们需要一些特定的工具和插件，这些工具和插件需要首先安装在我们的电脑和移动设备上。这些工具将帮助我们导入、创建、编辑并将文件导出以创建 Lottie 动画。

如您所记得，我们已经在第一章“开始使用 Lottie”中讨论了这些工具和插件。在本节中，我们将指导您下载和安装它们，以便您准备好开始动画制作。那么，让我们开始吧。

下载并安装 Adobe AE

如本书前面所述，Adobe AE 不是一个免费工具。它是一种基于订阅的软件，您必须作为 Adobe Creative Cloud 订阅的一部分购买。然而，请记住，Adobe 提供 7 天的免费试用期，这样您可以在购买前先试用。

关于安装软件和系统要求的完整说明，请访问 helpx.adobe.com/after-effects/using/setup-installation.html 并按照以下截图中的说明操作：

![图 6.1 – Adobe AE 用户指南

![img/B17930_06_01.jpg]

图 6.1 – Adobe AE 用户指南

下载并安装 AE 的 Bodymovin 插件

Bodymovin 插件安装非常简单。只需按照以下简单步骤操作。

如果您有 Creative Cloud 订阅，请按照以下步骤操作：

1. 前往 exchange.adobe.com/creativecloud.details.12557.bodymovin.html。

2. 点击立即安装按钮并按照步骤操作：

![图 6.2 – Adobe Exchange 平台 – Bodymovin 扩展

![img/B17930_06_02.jpg]

图 6.2 – Adobe Exchange 平台 – Bodymovin 扩展

如果您没有 Creative Cloud 订阅，请执行以下操作：

1. 从 aescripts.com/bodymovin/ 下载 Bodymovin 扩展。请注意，您需要创建一个账户才能完成此操作。

![图 6.3 – 下载 Bodymovin

![img/B17930_06_03.jpg]

图 6.3 – 下载 Bodymovin

1. 下载ZXP 安装器 (aescripts.com/learn/zxp-installer/)，通过扩展管理器安装插件：

![图 6.4 – 下载 ZXP 安装器

![img/B17930_06_04.jpg]

图 6.4 – 下载 ZXP 安装器

1. 安装并打开ZXP 安装器 aescripts + aeplugins zxp 安装器（设置），适用于 macOS 或 Windows。

2. 将bodymovin.zxp拖放到 ZXP 安装器窗口中。

3. 安装成功完成后，点击确定。

4. 打开Adobe After Effects。

5. 前往顶部导航菜单，点击窗口 | 扩展。

最近安装的 Bodymovin 扩展应显示在菜单中：

![图 6.5 – Adobe AE 扩展窗口

![img/B17930_06_05.jpg]

图 6.5 – Adobe AE 扩展窗口

下载并安装 AE 的 LottieFiles 插件

LottieFiles 安装非常简单。如果您有 Creative Cloud 订阅，请按照以下步骤操作：

1. 前往 lottiefiles.com/plugins/after-effects。

2. 点击通过 Adobe Exchange 安装按钮：

图 6.6 – 通过 Adobe Exchange 安装 LottieFiles 插件

1. 点击 立即安装 按钮，并按照说明操作：

图 6.7 – Adobe Exchange 平台 – LottieFiles 扩展

如果你没有 Creative Cloud 订阅，我们将使用扩展管理器安装插件。为此，请执行以下步骤：

1. 前往 aescripts.com/learn/zxp-installer/。

2. 下载 ZXP 安装程序：

图 6.8 – ZXP 安装程序

1. 前往 lottiefiles.com/plugins/after-effects。

2. 点击 下载插件 (ZXP) 按钮使用扩展管理器安装插件：

图 6.9 – 使用 ZXP 安装程序安装 LottieFiles 插件

1. 安装并打开 macOS 或 Windows 的 ZXP 安装程序 aescripts + aeplugins zxp 安装程序 (设置)。

2. 将 ae-plugin-0.1.20.zxp 拖放到 ZXP 安装程序窗口中。

3. 安装完成后，点击 确定 按钮。

4. 打开 Adobe After Effects。

5. 在顶部导航菜单中点击 窗口 | 扩展。

最近安装的 LottieFiles 插件应出现在菜单中：

图 6.10 – Adobe AE LottieFiles 扩展菜单

下载并安装 Sketch 和 Figma 的 AEUX 插件

如果我们使用 Sketch 或 Figma 进行插图和设计，一旦我们需要将文件从 Sketch 或 Figma 导出为 AE，这个插件就会变得非常有用。所以，如果情况是这样的话，让我们安装我们的插件：

安装 ZXP 扩展管理器

要安装任何 AEUX 插件（用于 Figma、Sketch 或 AE），我们首先需要安装 ZXP 扩展管理器。所以，如果你在前面部分还没有做，以下是操作方法：

1. 前往 aescripts.com/learn/zxp-installer/。

2. 下载 ZXP 安装程序：

图 6.11 – macOS 和 Windows 的 ZXP 安装程序

1. 安装并打开 macOS 或 Windows 的 ZXP 安装程序 aescripts + aeplugins zxp 安装程序 (设置)。

安装 AEUX for Figma

现在我们已经启动并运行了 ZXP 扩展管理器，让我们来安装 AEUX for Figma。安装 AEUX for Figma 可能会有些棘手，所以我建议你遵循他们支持网站上描述的说明。为此，请按照以下步骤操作：

1. 从 aeux.io/guide/download.html#sketch-57-figma 下载 AEUX for Figma 插件。

图 6.12 – AEUX 下载插件用于 Figma 和 Sketch

1. 前往 aeux.io/guide/install.html#figma 并按照说明安装插件：

![图 6.13 – 如何安装 AEUX for Figma 插件]

![图片 B17930_06_13.jpg]

图 6.13 – 如何安装 AEUX for Figma 插件

安装 AEUX for Sketch

在我们安装了 ZXP 扩展管理器之后，我们将下载并安装 AEUX for Sketch。安装 AEUX for Sketch 非常简单，以下是操作步骤：

1. 从 aeux.io/guide/download.html#sketch-57-figma 下载 AEUX for Sketch 插件：

![图 6.14 – 如何安装 AEUX for Sketch 插件]

![图片 B17930_06_14.jpg]

图 6.14 – 如何安装 AEUX for Sketch 插件

1. 解压 AEUX_0.8.1-a.zip。

2. 打开解压后的文件夹，AEUX_0.8.1-a/Sketch。

3. 双击打开 AEUX.sketchplugin:

![图 6.15 – AEUX Sketch 插件文件夹]

![图片 B17930_06_15.jpg]

图 6.15 – AEUX Sketch 插件文件夹

插件安装完成后，Sketch 将打开并通知你：

![图 6.16 – AEUX for Sketch 插件成功安装]

![图片 B17930_06_16.jpg]

图 6.16 – AEUX for Sketch 插件成功安装

AEUX for AE 插件

如果我们想从 Figma 或 Sketch 导入我们的设计到 AE，我们还需要安装 AEUX for Adobe AE 插件。我们将使用此插件来定义我们的层如何导入。

我们假设您已经在本节中较早安装了 ZXP 扩展管理器，否则请跳转到 安装 ZXP 扩展管理器 部分，并按照那里描述的说明操作。

现在，让我们安装 AEUX for Adobe AE，为此，请按照以下步骤操作：

1. 在安装 AEUX for Figma 或 Sketch 时，查找我们下载的 AEUX_0.8.1-a 文件夹。

2. 打开 ZXP 扩展管理器。

3. 打开 AEUX_0.8.1-a/Ae:

![图 6.17 – AEUX for AE 插件文件夹]

![图片 B17930_06_17.jpg]

图 6.17 – AEUX for AE 插件文件夹

1. 将 AEUX.zxp 拖放到 ZXP Installer 窗口中。

2. 关闭并重新打开 AE。

3. 在 AE 中，导航到顶部 窗口 菜单并选择 扩展 | AEUX。

4. 点击打开面板：

![图 6.18 – AEUX for AE 面板视图]

![图片 B17930_06_18.jpg]

图 6.18 – AEUX for AE 面板视图

如果这不起作用，您仍然可以尝试手动安装。为此，请按照 aeux.io/guide/install.html#after-effects 中描述的说明操作。

注意 – AEUX for AE 插件

AEUX 插件的主要作用是控制层如何构建。我们需要设置首选项，一旦完成，就无需保持面板打开。因此，我们的 AE 工作区域不会太乱。

在我们从 Figma 或 Sketch 导入文件之前，我们可以在AEUX面板中定义一些值。正如我在这本书中之前提到的，我通常以 60帧每秒（fps）的速度工作，并将检测参数形状和预合成组选项打开。然而，这取决于你，以及你更舒适的工作方式。如果你想了解更多信息，请点击此链接：aeux.io/guide/ae-options.html。

LottieFiles 平台

如你所知，LottieFiles 允许我们预览、测试和分享我们的动画，以及其他许多事情，例如编辑动画、为 Telegram 创建贴纸、将我们的动画导出为 GIF，或者从静态 SVG 创建动画，仅举几例。

如果我们想在 iOS、Android 和网页上测试、编辑和分享我们的动画，我们需要安装一些工具。只需点击以下链接下载每个平台的特定版本：

• LottieFiles for Desktop: lottiefiles.com/desktop

• LottieFiles for Android: play.google.com/store/apps/details?id=com.lottiefiles.app&hl=en&gl=US

• LottieFiles for iOS: apps.apple.com/us/app/lottiefiles/id1231821260

支持 iOS、Android 和网页上的 Lottie 功能

正如我们在几章前所经历的，Lottie 不支持 Adobe AE 的所有功能。因此，在我们开始在 AE 中创建动画之前，如果我们想避免挫败感和额外的工作，查看以下表格是个好主意。正如我们之前提到的，在这本书中，我们将重点关注 iOS、Android 和网页支持的功能。然而，你也可以查看以下表格，了解 Windows 设备上支持的功能。

简单越好。保持我们的文件整洁，并使用单一路径和填充创建简单的插图是良好的实践。我建议尽量避免在 AE 中直接使用布尔选项（我们稍后会了解更多），以及使用图像、蒙版和效果，因为这些功能在所有设备上并不都得到很好的支持。我还建议创建可以在所有平台和设备上运行的动画，这样我们就不需要为每个设备创建不同的.json文件。

形状

形状在所有平台上都得到了很好的支持。我们可以从基于矢量的工具导入我们的形状，或者直接在 AE 中创建它们。我们在使用椭圆、矩形、圆角矩形、星形、多边形和裁剪路径时不应有任何问题。然而，记得在第四章，“移动它！使用 After Effects 制作我们的第一个 Lottie 动画”，我们使用重复器功能时遇到了一些麻烦。

当我们在 iOS 设备上预览动画时，这不会显示正确，所以我建议你将这个功能视为不存在，并寻找另一种方法来实现类似的效果：

![图 6.19 – 支持的形状功能

图 6.19 – 支持的形状功能

填充

所有填充功能在所有平台和设备上都得到了很好的支持，所以没有必要担心使用填充。我们可以使用纯色，在不透明度上做文章，甚至在我们的设计中使用径向或线性渐变，因为这些功能的运用不会影响我们的动画：

![图 6.20 – 支持的填充功能

图 6.20 – 支持的填充功能

描边

当我们使用描边时，也不必担心。我们可以使用和应用任何描边样式或功能，而不会遇到麻烦。所以，请随意尝试颜色、不透明度、宽度、虚线、渐变等等：

![图 6.21 – 支持的描边功能

图 6.21 – 支持的描边功能

转换

当我们处理转换时，有一些选项我们想要避免，比如自动定位和倾斜：

![图 6.22 – 支持的转换功能

图 6.22 – 支持的转换功能

自动定位用于我们在路径上动画化时。如果我们想为我们的 Lottie 动画添加此效果，我们必须手动调整每个关键帧的旋转：

![图 6.23 – 自动定位功能

图 6.23 – 自动定位功能

第二个不受支持的转换选项是倾斜。这在 Android 设备上显示不正确，或者至少我们关于它的信息不足，因为它有时能工作，有时则不行。所以，我们还是避开它，以免出现任何不愉快的惊喜：

![图 6.24 – 倾斜功能

图 6.24 – 倾斜功能

插值

插值是另一个我们可以随意操作而不会影响预览的属性。而且，既然我们提到了插值，我强烈建议你阅读更多关于穿越时间属性的内容，因为这个酷炫的功能将帮助你平滑动画。你可以在helpx.adobe.com/after-effects/using/speed.html上找到关于穿越时间功能的更多信息，并滚动到使用穿越关键帧创建平滑运动部分。

![图 6.25 – 支持的插值功能

图 6.25 – 支持的插值功能

遮罩

在早期，使用遮罩在导出我们的动画到 Lottie 时会导致问题，但时代在变化，如今，有几个遮罩属性得到了很好的支持。遮罩路径、遮罩不透明度、添加、减去和相交可以使用而不会遇到问题。其余的可以当作不存在，因为我们根本不会使用这些。

掌握遮罩并不难，这将给你的动画提供更多资源。正如你所知，这本书并不假装是 AE 指南（市面上有很多书做得很好），尽管我建议你阅读更多关于遮罩的内容。你可以在这里查看 Adobe 帮助页面以获取更多信息：helpx.adobe.com/after-effects/using/create-masks.html。

![图 6.26 – 遮罩支持的功能]

![图片 B17930_06_26.jpg]

![图 6.26 – 遮罩支持的功能]

遮罩

我们可以使用Alpha Matte进行 Lottie。遮罩的工作方式与遮罩非常相似；它们显示或隐藏另一个图层的一部分。你可以在helpx.adobe.com/after-effects/using/alpha-channels-masks-mattes.html找到更多关于它们的信息。

![图 6.27 – Mattes 支持的功能]

![图片 B17930_06_27.jpg]

![图 6.27 – Mattes 支持的功能]

合并路径

休斯顿，我们遇到麻烦了！在 iOS 设备或网页上合并路径根本不起作用。如果你只想直接在 AE 中使用布尔运算，我强烈建议你忘记它们，假装这些不存在仅此而已。否则，请继续阅读。

![图 6.28 – 合并路径支持的功能]

![图片 B17930_06_28.jpg]

![图 6.28 – 合并路径支持的功能]

如我之前所说，最好尽可能保持我们的插图简单，这意味着尽量避免在布尔运算中使用多个路径。那么，这意味着我们必须坚持基本形状吗？其实不是。在 XD、Figma 和 Sketch 中，我们可以将这些在布尔运算中使用的多个路径（如添加、减去、相交或排除）转换为单个路径。让我们看看如何做到这一点。

对于Adobe XD，请按照以下步骤操作：

1. 使用基本形状进行设计。

2. 添加布尔运算（添加、减去、相交或排除重叠）。

3. 转到顶部菜单并选择对象 | 路径 | 转换为路径：

![图 6.29 – 在 XD 中将多个路径转换为单个路径]

![图片 B17930_06_29.jpg]

![图 6.29 – 在 XD 中将多个路径转换为单个路径]

如果你使用Figma，请按照以下步骤操作：

1. 进行绘图并添加布尔运算（添加、减去、相交或排除重叠）。

2. 从顶部菜单选择展开选择：

![图 6.30 – 在 Figma 中将多个路径转换为单个路径]

![图片 B17930_06_30.jpg]

![图 6.30 – 在 Figma 中将多个路径转换为单个路径]

如果你使用Sketch，请按照以下步骤操作：

1. 将布尔运算添加到您的形状中（添加、减去、相交或排除重叠）。

2. 在将您的作品导出到 AE 之前，请转到顶部菜单并选择图层 | 组合 | 合并：

![图 6.31 – 在 Sketch 中将多个路径转换为单个路径

![图片 B17930_06_31.jpg]

图 6.31 – 在 Sketch 中将多个路径转换为单个路径

层效果

好吧，这里我们真的没有太多可以讨论的内容。Android 和 iOS 都不支持在 AE 中创建的任何层效果，至少现在或不久的将来都不支持。然而，如果你只想在网页上使用你的动画，你可以在动画中使用层效果。

![图 6.32 – 支持的层效果功能

![图片 B17930_06_32.jpg]

图 6.32 – 支持的层效果功能

文本

当我们谈到 Lottie 的字体时，我们看到这里可以做的基本事情。因此，在 AE 中使用文本、转换它或更改其填充和描边都没有问题。

话虽如此，如果您考虑在动画中包含文本，以便以后可以直接在 LottieFiles 平台上进行编辑，那么，我不建议这样做。我实际上已经尝试过：导出了一个包含文本的 .json 文件，并在 LottieFiles 平台上进行了编辑，但文本没有正确显示。有时文本不会显示，有时看起来会很奇怪。所以，我现在就把它忘了，尽管，我相信这将在未来的版本中得到审查。

![图 6.33 – 支持的文本功能

![图片 B17930_06_33.jpg]

图 6.33 – 支持的文本功能

其他

您可能听说过 AE 的表达式，但在这本书中并没有介绍，因为它们在 Android 或 iOS 上不受支持。但如果您是为网页动画制作，我强烈建议您了解更多相关信息，因为它可以节省大量的时间和精力。

为了向您介绍表达式，我们可以将它们定义为一段小的 JavaScript 代码，您可以将它插入到图层属性中，为您的动画添加特定的行为。更多信息，请访问以下链接：helpx.adobe.com/after-effects/using/expression-basics.html。

现在，让我们来谈谈图像。Android 和 iOS 支持图像。但请记住，如果您在动画中使用图像，它们会增加文件大小，并且不会是响应式的。所以，是否使用图像完全取决于您。在我的情况下，我总是尽量避免使用它们。

![图 6.34 – 其他支持的功能

![图片 B17930_06_34.jpg]

图 6.34 – 其他支持的功能

既然我们已经了解了在为 Lottie、Android 和 iOS 动画时可以做什么和不能做什么，让我们进入下一部分，我相信这将有助于你加快你的工作流程。

将使您生活更轻松的键盘快捷键

您已经看到，一开始，Adobe AE 可能相当令人不知所措。有这么多选项、面板和需要学习的新关键词。然而，一旦您习惯了快捷键，它看起来并不那么困难，不是吗？尤其是在为 Lottie 动画时，因为我们只需关注一些功能，而忽略大多数面板和工具。

为了让它更加方便，我们可以使用一些快捷键来加速我们的工作，更快地完成动画。

这里有一份我节省时间的快捷键列表，尽管您可以自由地四处寻找更多；互联网上有许多包含 AE 快捷键示例的网站。只需找到您感觉更舒适的，然后开始动画！

通用快捷键

变换属性快捷键

帧和关键帧快捷键

图层快捷键

免费图形资源和 UX/UI 灵感

最后但同样重要的是，我想与您分享我通常在制作动画时使用的资源，这将有助于您的创作过程。

图形资源

我是一位具有图形设计背景的数字设计师，但不是插画家。实际上，我的插画技能相当有限，但不是插画资源。我的意思是，当我需要创建动画或插画时，我通常会在网上搜索参考资料来激发灵感。一旦我心中有了清晰的概念，我会寻找特定的风格、颜色，或者可能是一个可以重复使用并调整到我需要的视觉和感觉的角色插画。所以，我不会经历整个插画过程；我会从各个地方取一些片段来创建自己的。

因此，这里有一份免费个人使用的网站列表，您可以从这些网站搜索和下载您的图形资源。

插画

我最喜欢的是Freepik(www.freepik.com/)。您可以从涵盖所有风格和概念的数千个不同插画中进行搜索。您可以将大多数文件作为矢量图下载，或者支付每月订阅计划以访问高级文件。

在DrawKit(drawkit.com/)，您可以免费搜索和下载精美的手工插画包和图标集合。

颜色

使用Coolors(coolors.co/)，您可以像按空格键一样轻松地创建自己的独特调色板。您可以用它来激发灵感，创建自己的，或者搜索颜色趋势。

图标

.ae和.json文件。

下载Font Awesome(fontawesome.com/)图标包，并开始像使用常规字体一样使用图标进行您的设计。

免费股票图片

现在有一些免费股票图片网站提供高质量图片。我最喜欢的有Unsplash(unsplash.com/)和Pexels(www.pexels.com/)。

字体

在使用字体时，我总是尽量坚持使用 Google fonts (fonts.google.com/)，因为它们是跨平台的，可以在你的网站上使用。

如果我在做一些离线项目或者需要更有创造力的时候，我会在 Free Fonts (www.freefonts.io/) 寻找一些特定的字体。

动画

对于我来说，寻找灵感来创建自己的 Lottie 动画的最佳地方只能是 LottieFiles (lottiefiles.com/)。

UX/UI 灵感

你知道，灵感不是你可以坐下来就能想出来的东西，但有时，你需要在不同时间获得灵感，以便完成你的工作。以下是一份网站列表，可以帮助你做到这一点：

• Behance (www.behance.net/) 是 Adobe 在线社区平台，用于展示和发现创意作品。

• Dribbble (dribbble.com/) 是一个获取灵感的绝佳地方。

• UX Movement (uxmovement.com/) 通过提示、技术和最佳实践教你如何改善你的应用和网站的 UX。

• Collect UI (collectui.com/) 是一个基于精选 Dribbble 的日常灵感平台。

• 访问 UI Garage (uigarage.net/) 以找到针对 Web、移动和平板电脑的特定设计灵感。

• 用户界面设计模式 (ui-patterns.com/) "是解决常见设计问题的重复解决方案。设计模式是经验丰富的用户界面设计师的标准参考点。"

• Mobbin (mobbin.design/) 通过其数千个移动应用截图，为您节省了数小时的 UI 和 UX 研究时间。

摘要

现在回顾起来，在这本书的第二部分，我们讨论了许多新的概念、关键词、工具和插件。我们学习了如何从头开始创建动画，最终导出并交付给开发团队，涵盖了整个 UX 动画工作流程。我们还看到了如何下载和安装我们完成动画所需的全部必要工具、扩展和插件。

我们检查了在为 Lottie 创建动画时在 AE 中可以或不可以做什么的列表，以确保我们的作品能够正确预览。我们通过一系列快捷键来加速我们的工作，最终，你得到了我列出的资源列表，我希望这能激发你的灵感，并为你提供足够的资源来创建你的动画。

现在，让我们跳到这本书的第三部分，将您的 Lottie 动画添加到移动应用中，我们将学习如何将我们的动画实现到移动应用和 Web 中，使用 React Native。

第三部分 - 将你的 Lottie 动画添加到移动应用中

到目前为止，我们已经有了一些准备好的 Lottie 动画，可以集成到我们的应用中。在本部分，我们将学习如何发挥lottie-react-native的潜力，这是一个将 Lottie 动画渲染和播放到我们的 iOS 和 Android 应用中的 React Native 包。

在本节中，我们将涵盖以下章节：

• 第七章, lottie-react-native 简介

• 第八章, 安装 lottie-react-native

• 第九章, 让我们来点魔法：集成你的第一个 Lottie 动画

• 第十章, 如何做到完美：控制你的动画

• 第十一章, 有任何问题？lottie-react-native 常见问题解答

第七章：lottie-react-native 简介

在本章中，我们将介绍 lottie-react-native，这是一个允许我们在 React Native 应用中渲染 Lottie 动画的库。我们将了解其历史、当前状态和文档，以确保我们充分利用这个库。这是一个开源库，以 npm 包的形式分发，可以在以下链接中找到：

• GitHub: GitHub.com/lottie-react-native/lottie-react-native

• NPM: www.npmjs.com/package/lottie-react-native

在本章中，我们将涵盖以下主题：

• lottie-react-native 是如何产生的？

• 什么是 lottie-react-native？

• 为什么我们不使用 Animated 或 Reanimated？

• lottie-react-native 的基础知识

lottie-react-native 是如何产生的？

React Native 之所以在 2015 年发布，是因为 Facebook 需要加快他们的移动开发团队的速度，目标是发布数十个新应用，并在更短、更有效的发展周期内改进现有应用。有些人可能会说 React Native 的最大优势是其多平台开发能力（一次学习，到处编写），但还有其他好处，例如重用长期存在于网络开发世界中的经过验证的库和工具——比 iOS 和 Android 存在的时间还要长。

吸引了这样的承诺，Airbnb 成立了一个团队来调查他们是否可以根据 Facebook 的多平台重用策略使用 React Native 来复制 Facebook。他们的结论不仅认为 Airbnb 的移动团队可以从这种策略中受益，而且他们可以重用他们在网络方面的广泛知识，并创建跨学科团队，通过重用大量代码，立即在 Web、Android 和 iOS 上构建新功能。

他们调查的结果包括一些大的架构决策，例如如何将 React Native 集成到现有应用中，如何保持他们已有的性能标准，以及如何将他们的工具集成到他们将要部署到原生应用中的新框架中。其中一个这样的工具就是他们钟爱的动画库：Lottie。

Airbnb 已经拥有了 Lottie（lottie）的 Web、Android 和 iOS 开源库：

• Web: GitHub.com/airbnb/lottie-web

• Android: GitHub.com/airbnb/lottie-android

• iOS: GitHub.com/airbnb/lottie-ios

所有这些库都得到了良好的维护，满足了 Airbnb 的需求，但将 React Native 加入其中意味着他们需要一个特定的库，这个库不仅可以供他们使用，还可以供成千上万的正在构建 Lottie 社区的开发者使用。

需求很明确：他们需要一个工具，能够在 React Native 代码中以与 iOS 或 Android 应用程序中相同的方式渲染 Lottie 动画。这一努力包括性能和功能要求。结果是，一个功能齐全的开源库，可以轻松集成到所有基于 React Native 构建的各类应用程序中。

为了这项任务，一个由 iOS、Android 和网络开发者组成的小团队在 2017 年初成功地将 lottie-react-native 发布到他们的公共 GitHub 仓库：GitHub.com/lottie-react-native/lottie-react-native。

在 2018 年，Airbnb 重新评估了其在 React Native 上的投资，并决定他们将停止参与 Facebook 的项目，并将所有 React Native 代码从其应用程序中撤出。这一决定在一系列围绕与维护三个大型代码库（iOS、Android 和 React Native）的复杂性相关的问题的博客文章中得到了解释，这些代码库需要团队进行严格的协调，而该团队并不擅长 React Native。

自从那天起，React Native 已经取得了长足的进步，但这意味着 Airbnb，一个重要的推动者，停止了对这项技术的贡献，包括他们对 lottie-react-native 的参与。尽管如此，这个库并没有被遗弃。lottie-react-native 的一些所有者开始在社区中寻找维护者，并最终将项目转移给了当时 GitHub 上最活跃的贡献者（emilioicai 和 lelandrichardson）。

什么是 lottie-react-native？

lottie-react-native 是一个由两个主要部分组成的项目：

• 这个开源项目托管在 GitHub 上。所有开发、改进请求、问题报告和代码托管都发生在这里。它是开发社区的中心，有助于更新和改进整个库。

• npm 包，其中托管了库的所有新可下载版本。通常，开发者会使用这个 npm 仓库将 lottie-react-native 包含到他们的 React Native 项目中。

lottie-react-native 对 lottie-ios 和 lottie-android 有硬依赖，并作为这两个库的包装器，其中大部分负载发生。实际上，在大多数 React Native 的原生包中，lottie-react-native 通过从 JavaScript 端接收数据，然后转换并发送这些数据到原生库（lottie-ios 和 lottie-android）来工作。

到 2021 年，lottie-react-native 成为 React Native 生态系统中最受欢迎的库之一。它在 GitHub 上有超过 14,500 个星标，即使没有 Airbnb 的参与，每年仍然会发布几个版本。

lottie-react-native已经成为在 React Native 中渲染复杂动画的首选库，它通过紧跟lottie-ios和lottie-android的新版本发布，同时密切关注 React Native 的变化，以便它可以轻松地与lottie-ios和lottie-android的新版本集成。

现在我们已经了解了lottie-react-native是什么以及它的依赖项，让我们学习为什么我们应该在我们的 React Native 应用中使用它。

为什么我们不使用 Animated 或 Reanimated？

对于 React Native 初学者来说，一个常见的问题是他们应该在应用中用哪个库来显示动画。经过快速搜索，出现了三种不同的方法：Animated API、Reanimated 或lottie-react-native。

Animated 和 Reanimated 不是与lottie-react-native竞争的技术，因为它们服务于不同的目的。Animated 和 Reanimated 在 iOS 和 Android 上动画化 React 和原生组件方面都非常出色，但它们基于转换移动 UI 组件（例如，文本、容器、视图或列表）。这意味着它们不是用来创建复杂动画或视觉图标，设计师可以用 Adobe After Effects 来完成这些工作。

让我们看看 Animated/Reanimated 能做什么，以及 Lottie 能做什么：

Lottie 容易做到的事情：

![图 7.1 – 典型的 lottie-react-native 动画

图 7.1 – 典型的 lottie-react-native 动画

动画和 Reanimated 做得好的地方：

![图 7.2 – 典型的 Animated/Reanimated 动画

![图 7.2 – 典型的 Animated/Reanimated 动画

图 7.2 – 典型的 Animated/Reanimated 动画

理解它们之间的区别可能很复杂，但作为一个大致的概念，开发者应该注意，Lottie 对于显示涉及不同形状的复杂动画非常有用。这类动画通常由设计师和帧、时序和 UI 层组成，这些是它们的重要组成部分。

应该像前面图表所示的那样，使用 Animated 和 Reanimated 来动画化视图、容器或平台特定的组件。

到目前为止，我们已经学习了在应用中使用lottie-react-native的时间和原因。现在，让我们深入了解lottie-react-native项目本身。

lottie-react-native 的基本知识

在本节中，我们将学习lottie-react-native作为项目是如何构建的。这将让我们全面了解，并能够充分利用为开发者提供的资源，以便我们将 Lottie 动画集成到我们的 React Native 项目中。

开源项目

了解lottie-react-native最简单的方法是访问其 GitHub 仓库(github.com/lottie-react-native/lottie-react-native)。在那里，开发者可以阅读其 API 文档，为特定问题请求修复，通过Pull Requests（PRs）发送代码片段以合并到代码库中，或者只是浏览代码来了解库的工作原理。

自 2018 年以来，该项目由一个维护者独立维护，但定期发布新版本以包含错误修复、React Native 的变化以及lottie-ios或lottie-android的变化。

在README.md文件中，开发者可以找到如何集成和使用库的基本说明。除了这个说明之外，还提供了一些代码示例(github.com/lottie-react-native/lottie-react-native/tree/master/example)，以帮助开发者轻松理解如何使用lottie-react-native。

除了这些示例之外，还有一个小的 API 参考，展示了在 React Native 应用上显示 Lottie 动画最常用的属性和方法。最后，README.md文件还展示了几个 Lottie 动画的示例，这些示例可以从 LottieFiles 下载，以及一些关于如何获取更多信息的内容。

使用lottie-react-native时需要记住的一个重要点是版本控制，因为不同的 React Native 版本只能与特定的lottie-react-native版本一起使用（不同的版本将很快展示）。主要原因在于构建系统的工作方式。

除了README.md文件之外，仓库中还可以找到其他文档：

• API 文档

• TypeScript 免责声明

• 每个支持的平台支持的 After Effects 功能列表

• examples文件夹

除了这份文档之外，还有lottie-ios或lottie-android。

lottie-react-native社区在提交 PR 方面非常活跃，新功能或错误修复通常可以在它们通过lottie-react-native的新版本正式发布到 npm 仓库之前在那里找到。在这里，还可以找到围绕特定功能或问题的有趣对话，这些对话在lottie-react-native项目的文档中可能不太合适。

新用户可以从自己的分支创建新的 PR。以下要求是所有用户在希望他们的 PR 被合并到主分支时可以期待的：

• 必须提供文档

• 必须在examples文件夹中添加一个示例

• PR 模板必须正确填写

• 所有问题和评论都必须在 PR 线程中解决

一旦 PR 合并到主分支，维护者将准备一个发布版本，具体取决于仓库的紧迫性和时间安排。用户可以期待他们的更改作为补丁发布——要么是次要版本，要么是主要版本。

仓库变更日志（github.com/lottie-react-native/lottie-react-native/blob/master/CHANGELOG.md）是了解每个版本发布哪些功能的最佳位置。还有一个发布页面（github.com/lottie-react-native/lottie-react-native/releases），用户可以查看以了解库是如何演变的。

平均而言，lottie-react-native 的新版本每两个半月发布一次。

平台

React Native 被设计成多平台，不仅限于 iOS 和 Android，如 react-native-web 和 react-native-windows 这样的项目所证明。lottie-react-native 遵循相同的原理，并设计为可以在 React Native 运行的任何平台上运行。然而，截至 2021 年，只有两个平台得到完全支持：iOS 和 Android。Windows 支持正在缓慢添加，这得益于微软和 Flirc TV 团队的努力，他们正在向项目提交补丁以确保库能够跟上。

在 iOS 和 macOS 的情况下，lottie-react-native 需要 lottie-ios 来运行。这个依赖关系是明确的，由于 Airbnb 团队（主要由原生 iOS 开发者组成）决定使用这种依赖关系而不是隐式执行，因此 lottie-ios 需要单独安装。无论如何，这不会以任何方式影响 lottie-react-native，除了开发者需要单独安装 lottie-ios 并确保安装了正确的库版本。

由于这是一个运行原生代码的库，lottie-ios 作为 pod 安装，并要求开发者在首次安装 lottie-react-native 和 lottie-ios 时运行 pod install。

另一方面，lottie-android 由 Gradle 自动管理，Gradle 会检测到它是 lottie-react-native 的依赖项。然后，总是自动安装正确的版本。

两个平台使用相同的 API，但平台之间存在一些细微差异：

• lottie-ios 使用 Swift 编写，可能需要一个桥接头才能在 iOS 上正常工作（github.com/lottie-react-native/lottie-react-native/issues/739#issuecomment-883591123）。

• 如果你的动画需要外部资源，Android 要求将它们放入一个文件夹中。你的 Lottie 组件应包含 imageAssetsFolder 属性，这允许你指定可以找到该文件夹的 URL。

• 开发者可以通过使用renderMode属性来指定他们是否希望在 Android 上使用硬件加速。

• 可以通过cacheComposition属性在 Android 上激活缓存。

lottie-react-native的 Windows 支持是在 4.0.0 版本中添加的，但它仍在实验中，应谨慎使用。

版本

lottie-react-native在很大程度上已经发展，以适应 React Native、lottie-ios和lottie-android的新版本。所有这些版本都可以通过 npm 仓库获取。

开发者应该考虑，新版本包括性能改进和错误修复，因此始终建议使用 npm 仓库中可用的最新版本。然而，针对特定版本的 React Native 进行工作可能要求开发者安装特定版本的lottie-react-native。以下表格显示了兼容性列表：

npm 包

这个库可以在 npm 仓库中以lottie-react-native的名称找到（www.npmjs.com/package/lottie-react-native），并且所有版本和文档都可以从www.npmjs.com/下载。在这里，用户还可以找到该包的依赖项（lottie-react-native作为依赖项（依赖项选项卡）。

Yarn 和 npm 都可以用来安装这个包，正如我们将在下一章中学习的那样。

摘要

在本章中，我们了解到lottie-react-native是我们在 React Native 应用中显示复杂动画的一个很好的替代方案。作为lottie-ios和lottie-android的包装器，lottie-react-native可以很容易地作为一个 npm 包找到，同样也可以在 GitHub 上的开源仓库中找到。它的文档可以通过常规的 GitHub PR 机制进行编辑和访问。

现在我们对围绕这个库的理论有了更好的理解，是时候转向更实际的方法了。在下一章中，我们将安装并使用lottie-react-native库，在我们的基于 React Native 的 Android 或 iOS 应用程序中开始渲染 Lottie 动画。

第八章：安装 lottie-react-native

在使用lottie-react-native之前，我们需要将其作为 node 模块安装到我们的 React Native 项目中，这样我们就可以在应用程序的代码库中导入它。为了执行此安装，我们有两种不同的选择：

• npm

• Yarn

这两种工具都将产生相同的输出（lottie-react-native），并且其依赖项将被安装在我们 React Native 项目文件夹内的node_modules文件夹中。使用哪种工具将由每个开发者自行决定，并且不应以任何方式影响最终产品。

本章我们将讨论以下主题：

• 基本安装（使用 npm 或 Yarn）

• lottie-react-native的依赖项

• 安装lottie-react-native时的 iOS 要求

• 安装 Android 所需的版本

• 安装lottie-react-native的早期版本

基本安装

安装lottie-react-native的过程与任何其他 npm 库类似，考虑到它依赖于用 Swift 和 Java 编写的本地库。考虑到这一点，开发者可以阅读 GitHub 仓库中的安装过程：github.com/lottie-react-native/lottie-react-native。

当安装lottie-react-native时，开发者应该知道，由于它的构建方式，iOS 的 Lottie 本地库也应该被安装，以便lottie-react-native能够在 iOS 应用程序中渲染 Lottie 动画。

让我们看看我们需要遵循哪些步骤才能完成一个成功的安装。

使用 npm

按照以下步骤使用 npm 安装lottie-react-native库：

1. 导航到 React Native 项目根目录的终端。一旦我们到了那里，我们应该运行以下命令：

   npm i --save lottie-react-native
   

此命令将遵循四个不同的步骤：

1. 从 npm 仓库下载库的源文件。

2. 在node_modules文件夹内创建容器文件夹。

3. 在创建的容器文件夹中安装源文件。

4. 更新package.json和package.json.lock文件，将库标记为 React Native 项目的依赖项。

npm 从 npm 公共仓库检测并安装库的最新版本，但我们可以通过在版本号后跟一个@符号来强制安装特定版本的库。

1. 一旦 npm 安装完库，如果我们需要在 iOS 设备上渲染 Lottie 动画，我们需要安装其 iOS 依赖项：

   npm i --save lottie-ios@3.2.3
   

运行此命令将触发在非常具体的版本 3.2.3 上安装lottie-ios，这是lottie-react-native在 iOS 设备上正常工作的兼容版本。

1. 一旦 npm 安装完lottie-ios，我们需要安装其 pods 依赖项。我们将通过进入 React Native 项目内的ios文件夹并运行以下命令来完成此操作：

   pod install
   

此操作将触发 CocoaPods，这是一个用于 iOS 和 macOS 项目的依赖项管理工具，它将下载并安装lottie-ios运行所需的所有依赖项。

一旦所有这些依赖项都安装完毕，我们就可以开始在 React Native 应用中使用lottie-react-native库。

使用 Yarn

使用 Yarn 安装lottie-react-native与使用 npm 类似。

让我们看看如何做到这一点：

1. 从我们的终端导航到 React Native 项目根文件夹。进入该文件夹后，我们将运行以下命令：

   yarn add lottie-react-native
   

此命令将遵循四个不同的步骤：

• 从 npm 公共仓库下载库的源文件。

• 在node_modules文件夹内创建容器文件夹。

• 在创建的容器文件夹中安装源文件。

• 更新package.json和yarn.lock文件，将库标记为 React Native 项目的依赖项。

Yarn 总是在 npm 公共仓库中寻找库的最新版本，但我们可以通过在版本号前加上一个@符号来强制安装特定版本的库。

1. 一旦 Yarn 完成库的安装，如果我们需要在 iOS 设备上渲染 Lottie 动画，我们需要安装其 iOS 依赖项。我们可以在项目根目录中运行以下命令来安装它：

   yarn add lottie-ios@3.2.3
   

运行此命令将在其版本号 3.2.3 上安装lottie-ios，这是lottie-react-native在 iOS 设备上正常工作的兼容版本。

1. 一旦 Yarn 完成lottie-ios的安装，我们需要安装其 pod 依赖项。我们将通过进入 React Native 项目中的ios文件夹并运行以下命令来完成此操作：

   pod install
   

此操作将触发 CocoaPods，这是一个用于 iOS 和 macOS 项目的依赖项管理工具，它将下载并安装lottie-ios运行所需的所有依赖项。

一旦所有这些依赖项都安装完毕，我们就可以开始在 React Native 应用中使用lottie-react-native库。这个库依赖于其他包来部署其所有功能。现在让我们看看这些包。

lottie-react-native 的其他依赖项

与许多其他库一样，lottie-react-native依赖于一些库，当运行 npm 或 Yarn 安装时，这些库会自动安装，正如我们在本章前面的部分所做的那样。依赖项的完整列表如下：

"peerDependencies": {

    "lottie-ios": "³.2.3",

    "react": "*",

    "react-native": "|=0.46"

  },

  "dependencies": {

    "invariant": "².2.2",

    "prop-types": "¹⁵.5.10",

    "react-native-safe-modules": "¹.0.3"

  }

如我们所见，lottie-react-native需要在包含至少三个依赖库的项目上运行：lottie-ios（应使用 npm 或 Yarn 安装，正如我们在本章前面的部分所看到的）、react和react-native（版本 0.46 或更高）。

除了这些同级依赖项之外，lottie-react-native 还需要三个常规依赖项：invariant、prop-types 和 react-native-safe-modules。所有这些都将由 npm 或 Yarn 自动安装，因此开发者无需采取任何手动操作来安装它们。

现在让我们看看 lottie-react-native 对平台特定的要求。

安装要求

两个平台都对 lottie-react-native 的正确安装有特定的要求。现在让我们看看这些差异是什么，以及我们如何在 iOS 和 Android 上完成安装。

iOS 设备

对于其 iOS 版本，lottie-react-native 依赖于 lottie-ios，这是一个由 Airbnb 用 Swift 编写的库。这意味着我们需要让我们的 React Native 应用能够读取和执行 Swift 代码。为了做到这一点，我们需要创建一个桥接头（如果我们还没有这样做的话），这样我们的应用 Objective-C 部分就可以与 Swift 部分通信，从而向 lottie-ios 发送和接收消息。

如果我们的项目中没有桥接头，我们可以通过以下步骤创建一个：

1. 在 Xcode 中打开您的 <项目名称|/ios/<项目名称|.xcworkspace 文件，然后转到 文件 | 新建 | 文件…：

图 8.1 – 在您的 Xcode 项目中创建新文件

1. 选择 Swift 文件 作为文件类型：

图 8.2 – 选择 Swift 作为文件类型

1. 确认创建桥接头：

图 8.3 – 确认创建桥接头

完成这些步骤后，我们的应用应该准备好在任意的 iOS 和 macOS 设备上使用 lottie-react-native。现在让我们准备我们的应用，以便在 Android 设备上运行 lottie-react-native。

Android 设备

在一些罕见的情况下，当在 Android 设备上安装 lottie-react-native 时，自动链接可能无法正常工作。这将导致在尝试构建应用时应用崩溃。在这种情况下，您需要按照以下步骤来修复问题：

1. 在 android/app/src/main/java/<项目名称|/MainApplication.java 文件中进行以下更改：

   1. 在 import 部分添加 import com.airbnb.android.react.lottie.LottiePackage;。

   2. 在 List<ReactPackage| getPackages(); 中添加 packages.add(new LottiePackage());。

2. 在 android/app/build.gradle 文件中进行以下更改：

   1. 在依赖项块中添加 implementation project(':lottie-react-native')。

3. 在 android/settings.gradle 文件中添加以下行：

   include ':lottie-react-native'
   project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')
   

当所有这些更改完成后，为 Android 设备重新构建应用并检查崩溃是否已修复。既然我们的安装已完成，现在让我们继续看看使用最著名的 Lottie 功能的限制和可能性。

lottie-react-native 库的有限功能

并非所有 Adobe lottie-react-native 都支持。实际上，Airbnb 在他们的网站上维护了一个不支持的功能列表：github.com/airbnb/lottie/blob/master/supported-features.md.

写作时最常见的功能支持列表如下：

• Lottie 在 AE 中对基本几何形状的支持：

图 8.4 – 形状功能支持

• Lottie 在 AE 中对基本文本效果和格式的支持：

图 8.5 – 文本功能支持

• Lottie 在 AE 中对遮罩效果的支持：

图 8.6 – 遮罩功能支持

• Lottie 在 AE 中对层效果的支持：

图 8.7 – 层效果功能支持

• Lottie 在 AE 中对形状和图形驱动透明度的支持：

图 8.8 – 遮色片功能支持

• Lottie 在 AE 中对形状组合技术的支持：

图 8.9 – 合并路径功能支持

• Lottie 在 AE 中对其他效果的支持：

图 8.10 – 其他功能支持

现在我们来学习如何在我们的 React Native 版本需要非最新版本的情况下处理 lottie-react-native 的早期版本。

安装早期版本

根据我们使用哪个版本的 React Native 来构建项目，我们需要安装特定版本或版本范围。要安装的版本列表可以在前一章中找到，因此现在我们将学习如何安装这些特定版本之一：

1. 识别我们的项目使用哪个 React Native 版本。为此，我们可以检查我们的 React Native 应用项目根目录下的 package.json 文件。在此文件中，查找 react-native 依赖项并记下版本号：

图 8.11 – 查找您的项目 React Native 版本

1. 查看前一章中的 lottie-react-native/react-native 兼容性列表，并为您的项目选择正确的 lottie-react-native。

2. 使用 npm 或 Yarn 安装所选版本的 lottie-react-native，通过在 @ 符号后指定版本号，例如，npm install –save lottie-react-native@4.1.3 或 yarn add lottie-react-native@4.1.3。

3. 如前所述，我们需要将 lottie-ios 作为依赖项安装；lottie-react-native/lottie-ios 兼容性列表也可以在前一章中找到。

4. 使用 npm 或 Yarn 安装选定的 lottie-ios 版本，通过在 @ 符号后指定版本号，例如，npm install –save lottie-ios@3.2.3 或 yarn add lottie-ios@3.2.3。

摘要

现在，我们已经正确安装了 lottie-react-native 及其依赖项，并准备好在我们的 React Native 应用中使用它来渲染 Lottie 动画。

我们的项目现在可以在 iOS 和 Android 设备上成功构建，因此让我们开始魔法之旅，并集成我们的第一个 Lottie 动画。我们将在下一章中介绍如何做到这一点。

第九章：让我们做一些魔法：集成您的第一个 Lottie 动画

我们的应用程序现在已准备好在其屏幕上显示 Lottie 动画。在本章中，我们将学习如何集成 Lottie 文件，无论是从lottiefiles.com/下载的还是在我们自己的 Adobe After Effects (AE)中生成的。成功执行此集成的要求如下：

• 拥有一个使用 Bodymovin 插件从 AE 导出的 Lottie 动画的 JSON 文件或从 LottieFiles 下载的 JSON 文件。

• 在遵循了第八章中描述的步骤，安装 lottie-react-native之后，准备好 React Native 项目。

最终结果将是我们的应用程序在初始屏幕上显示提供的 Lottie 动画。本章我们将涵盖以下主题：

• 理解 Lottie 文件

• 在 React Native 应用程序中使用 Lottie 文件

• 在 TypeScript 应用程序中使用lottie-react-native

• 寻找lottie-react-native的文档

• 使用远程 Lottie 文件

理解 Lottie 文件元素

正如我们在前面的章节中看到的，Lottie 文件是我们使用 Bodymovin 插件转换和导出的 AE 动画的 JSON 表示。作为一个 JSON 对象，我们可以在文本编辑器中打开它，并看到 Lottie 文件只是存储需要渲染的资产及其在动画每一帧上应用的变换的键值对的集合。

让我们看看一个样本 Lottie 文件：

{

   "v":"4.8.0",

   "meta":{

      "g":"LottieFiles AE "

   },

   "fr":30,

   "w":500,

   "h":250,

   "nm":"Comp 1",

   "assets":[],

   "layers":[

      {

        "nm":"Ellipses 3",

        "ks":{

            ...

         },

         "shapes":[

            {

               "ty":"gr",

               "nm":"Ellipse 1",

               "mn":"ADBE Vector Group",

               "hd":false

               ...

            }

         ],

         ...

      }

   ],

   "markers":[]

}

Lottie 文件通常比这个要大得多，但我们为了教育目的已经对其进行了总结。现在让我们来看看这个样本文件中最重要的值：

• "v"：指定此文件是哪个版本的文件。它对动画没有直接影响，因为它仅作为开发者和设计师的信息。

• "meta"：关于文件的一般信息，例如名称和许可证。

• "fr"：也称为帧率，表示动画应该以每秒多少帧渲染。

• "w"：动画的宽度。

• "h"：动画的高度。

• "assets"：在动画中显示的外部资产列表。

• "layers"：我们动画中使用的每个 AE 层的详细信息。

• "layers/ks"：关于如何在特定帧上显示特定层的信息。

• "layers/shapes"：每个层上使用的形状，包括它们的元数据和渲染选项。

通常，最好在 AE 中修改我们的 Lottie 动画，但更改导出的 Lottie JSON 文件中的值是可能的，并且可能会影响动画本身。

在 React Native 应用程序中使用 Lottie 文件

一旦我们将动画导出为 Lottie 文件，我们就可以将其集成到任何 React Native 应用中，并在任何 iOS 或 Android 设备上启动动画。在本节中，我们将展示如何在示例空白 React Native 应用的主屏幕上完成此操作，但这个过程可以扩展到任何 React Native 应用中的任何屏幕或组件。

我们首先要做的是在我们的应用内部的一个文件夹中存储我们的 Lottie 文件。我们需要确保我们可以在我们的 React 组件和屏幕中导入此文件夹中的文件。例如，我们可以将我们的 Lottie 文件存储在 assets 文件夹中，其中存储了应用中使用的所有图像：

图 9.1 – 在应用文件夹结构中存储动画

在这种情况下，我们在 assets/animations 文件夹中存储了一个名为 myLottieFile.json 的 JSON 文件，因此可以通过简单的 import 语句 require('./assets/animations/myLottieFile.json') 访问它。

现在我们来看一个示例，说明如何使用建议的文件夹结构中的集成 Lottie 文件来编写 App.js：

import React from 'react';

import LottieView from 'lottie-react-native';

import {SafeAreaView, View, StyleSheet} from 'react-native';

const App = () => {

  return (

    <SafeAreaView>

      <View style={styles.container}>

        <LottieView

          source={require('./assets/animations/myLottieFile.

          json')}

          autoPlay

          loop

        />

      </View>

    </SafeAreaView>

  );

};

const styles = StyleSheet.create({

  container: {

    width: '100%',

    height: '100%',

    justifyContent: 'center',

    alignItems: 'center',

  },

});

export default App;

在此文件中，我们在主屏幕上显示我们的 Lottie 动画，以便用户在打开应用后立即看到它。关于此文件，我们有几点需要考虑：

• SafeAreaView 用于防止动画在带刘海的屏幕设备（例如 iPhone 13）下显示。

• 将 LottieView 放在尺寸容器中很重要，以防止动画调整大小或被裁剪。这就是为什么我们使用一个包含 LottieView 组件的 100% 宽度和高度尺寸视图。

• LottieView 是一个 React 组件，它将渲染 Lottie 动画。它需要一个源属性来导入包含动画的 JSON 文件。它还接受一些属性来控制和配置动画。我们将在本章中更深入地探讨这些属性。

传递给 LottieView 组件的属性也值得关注：

• source：这需要接收导入的动画 JSON 文件。导入动画的路径，就像在 JavaScript 中的 require 语句一样，可以是绝对路径或相对于父组件/屏幕的相对路径。

• autoPlay：当指定（或设置为 true）时，这将在组件挂载后立即使应用开始播放。这通常用于父组件只有在动画运行时才有意义的情况。

• loop：当指定（或设置为 true）时，这将重复动画，直到组件卸载。

前面的组件示例是 Lottie 动画在 React Native 应用内部渲染的最简单表示，但它是一个很好的例子，说明了将 LottieView 组件放置在尺寸容器中的重要性。

如果你的应用使用类而不是函数组件，你应该知道 lottie-react-native 仍然可以以非常相似的方式导入和使用。

让我们看看一个 Lottie 文件如何集成到基于类的 React Native 应用程序中的例子：

import React from 'react';

import LottieView from 'lottie-react-native';

import {SafeAreaView, View, StyleSheet} from 'react-native';

export default class App extends React.Component {  render() {    return (

      <SafeAreaView>

           <View style={styles.container}>

                <LottieView source={require('./animation.

                json')} autoPlay loop />;

           </View>

      </SafeAreaView>

    )  }}

const styles = StyleSheet.create({

  container: {

    width: '100%',

    height: '100%',

    justifyContent: 'center',

    alignItems: 'center',

  },

});

与上一个例子类似，基于类的应用程序中的主要区别是需要返回 render 方法内部的渲染组件。其中一个基本属性（colorFilters）允许用户控制和更改层的颜色。

让我们看看这个属性如何被用来做到这一点：

import React from 'react';

import LottieView from 'lottie-react-native';

import {SafeAreaView, View, StyleSheet} from 'react-native';

const App = () => {

  return (

    <SafeAreaView>

      <View style={styles.container}>

        <LottieView

          source={require('./assets/animations/myLottieFile.

          json')}

          autoPlay

          loop

          colorFilters={[

             {

               keypath: 'button', color: '#F00000',

             },{

               keypath: 'Sending Loader',color: '#F00000',

    },

           ]}

        />

      </View>

    </SafeAreaView>

  );

};

const styles = StyleSheet.create({

  container: {

    width: '100%',

    height: '100%',

    justifyContent: 'center',

    alignItems: 'center',

  },

});

export default App;

在这种情况下，LottieView 组件中的 colorFilters 属性正在修改两个层的颜色（在 AE 中应该使用相同的名称定义），无论在动画创建过程中定义为何种颜色，都将其渲染为黑色。

TypeScript 已经成为现代 React Native 应用的默认语言。在上一个例子中，我们使用了纯 JavaScript，但 LottieView 组件是 TypeScript 兼容的。

在下一节中，我们将展示用户在使用 lottie-react-native 的 TypeScript 应用程序中可能遇到的注意事项。

在你的 TypeScript 应用中使用 lottie-react-native

lottie-react-native 库包括类型，因此 LottieView 组件可以轻松地集成到 TypeScript 应用程序中。这些类型在库代码的 lottie-react-native/src/js/index.d.ts（类型定义文件）路径中定义。它们也可以通过库的仓库在 github.com/lottie-react-native/lottie-react-native/blob/master/src/js/index.d.ts 中访问。

除了定义适用于 LottieView 的属性和方法外，此文件还包括以下对象的类型：

• AnimationObject：当 Lottie JSON 文件转换为 JavaScript 对象时的类型

• ColorFilter：用于在动画中改变颜色的过滤器类型

• TextFilterIOS：用于在 iOS 设备上改变字体的过滤器类型

• TextFilterAndroid：用于在 Android 设备上改变字体的过滤器类型

使用 lottie-react-native 时遇到的主要问题是我们在应用程序中导入 Lottie 组件（LottieView）的方式。根据我们在项目中如何配置 TypeScript，我们可能需要以不同的方式导入它：

• 如果你的 tsconfig.json 文件定义了 "esModuleInterop": false，你将需要使用 require 以以下方式导入 LottieView：const LottieView = require("lottie-react-native");。

• 如果你的 tsconfig.json 文件定义了 "esModuleInterop": true 和 "allowSyntheticDefaultImports": true（true 是默认值），你将需要以标准的 ES6 方式导入 LottieView：import LottieView from "lottie-react-native";。

让我们看看如何在之前开发的示例代码中实现这两种方式：

import React from 'react';

import {SafeAreaView, View, StyleSheet} from 'react-native';

import LottieView from 'lottie-react-native'; // if you have "esModuleInterop": true

// import LottieView = require('lottie-react-native'); // otherwise you have "esModuleInterop": false

const App = () => {

  return (

    <SafeAreaView>

      <View style={styles.container}>

        <LottieView

          source={require('./assets/animations/myLottieFile.

          json')}

          autoPlay

          loop

        />

      </View>

    </SafeAreaView>

  );

};

在下一节中，我们将看到如何找到最佳资源，以解决使用 lottie-react-native 库时的其他注意事项。

寻找 lottie-react-native 的文档

当使用第三方库时遇到困难可能是一种令人沮丧的经历，但在lottie-react-native的情况下，库的公共仓库中有一个庞大的知识库可供访问：github.com/lottie-react-native/。

这个知识库包括以下元素：

• lottie-react-native（在基本层面上）。这个文件作为对库的良好介绍，应该是寻找与库使用相关的帮助时的第一个资源。

• 使用LottieView组件来控制我们应用中的动画。

• TypeScript 注意事项 (github.com/lottie-react-native/lottie-react-native/blob/master/docs/typescript.md): 正如在在 TypeScript 应用中使用 lottie-react-native部分中看到的，TypeScript 的集成可能会很困难。这份文档解释了我们可能会遇到的问题以及如何绕过这些问题。

• lottie-react-native.

• 变更日志 (github.com/lottie-react-native/lottie-react-native/blob/master/CHANGELOG.md): 列出了为库发布的版本。当遇到特定功能或平台的问题时，这份文档非常有用，我们可以回滚/更新到不存在这些问题的版本。

• 贡献指南 (github.com/lottie-react-native/lottie-react-native/blob/master/CONTRIBUTING.md): 这份文档解释了如何请求帮助或向开源仓库贡献代码更新。

• 拉取请求 (github.com/lottie-react-native/lottie-react-native/pulls): 这是提交给库的贡献列表。用户可以使用这个列表来了解即将推出的修复或关于错误和功能的讨论。

• 问题 (github.com/lottie-react-native/lottie-react-native/issues): 在这里，库用户分享他们的问题、错误或关于库的疑问。当使用库或集成时遇到问题时，这是一个很好的搜索资源。

• Lottie for iOS 仓库 (github.com/airbnb/lottie-ios): Lottie 的 iOS 特定库的信息来源。可以用来搜索 iOS 特定的错误或功能。

• Lottie for Android 仓库 (github.com/airbnb/lottie-android): Lottie 的 Android 特定库的信息来源。可以用来搜索 Android 特定的错误或功能。

现在我们已经拥有了开始所需的全部资源，让我们在我们的应用中导入并使用第一个 Lottie 文件。

使用远程 Lottie 文件

为了获得最佳性能，动画应包含在应用程序的文件夹结构中，但在某些情况下，使用远程 JSON 文件作为 Lottie 动画以在 React Native 应用程序中渲染可能很有用。在这些情况下，lottie-react-native 允许我们通过传递给 LottieView 的 source 属性透明地指定远程 URL 作为动画的源。

让我们看看如果使用远程动画而不是本地动画，我们的初始示例会是什么样子：

import React from 'react';

import LottieView from 'lottie-react-native';

import {SafeAreaView, View, StyleSheet} from 'react-native';

const App = () => {

  return (

    <SafeAreaView>

      <View style={styles.container}>

        <LottieView

          source={'https://raw.githubusercontent.          com/lottie-react-native/lottie-react-native/          b96fd04c5d92d2acd55e6eb6cb8c3dd119d1a786/example/js/          animations/LottieLogo1.json'}

          autoPlay

          loop

        />

      </View>

    </SafeAreaView>

  );

};

const styles = StyleSheet.create({

  container: {

    width: '100%',

    height: '100%',

    justifyContent: 'center',

    alignItems: 'center',

  },

});

export default App;

如此例所示，只需更改 source 属性的值。在这种情况下，我们将 require 语句替换为一个简单的 URL，该 URL 指向托管在公共服务器上的 JSON Lottie 动画。对于外部源，用户需要确保应用程序始终可以访问外部文件，因为无法访问远程 URL 将显示一个空白区域而不是显示动画本身。

资产（如图像）也可以在 Lottie 文件中使用，并通过 lottie-react-native 进行渲染。让我们看看如何通过代码实现这种行为。

使用带有资产的 Lottie 文件

Lottie 动画可能包含显示在其中的外部图像，以制作更丰富和更复杂的动画。当使用 AE 和 Bodymovin 插件创建动画时，导出的 JSON 可能包含各种资产，例如以下内容：

...,

  "assets": [

    {

      "id": "image_name",

      "w": 200,

      "h": 100,

      "u": "images/",

      "p": "img_name.png"

    }

  ],

  ...

在这些情况下，我们的应用程序需要包含其二进制文件内的文件，因此您需要将文件添加到项目中，并从零开始重新构建它，运行 yarn ios 或 yarn android 以确保应用程序与动画中使用的新的资产一起编译。根据我们针对的平台，将资产添加到项目中的方法不同：

• 在右侧列中可以找到的 resources 文件夹，然后点击 将文件添加到 "LottieReactNative"… 以选择所需的图像。

图 9.2 – 在 Xcode 中添加动画资产

• [项目文件夹]/android/app/src/main/assets。建立一个 lottie 子目录，然后为每个动画创建一个文件夹是一个好习惯。您需要在动画的 imageAssetsFolder 属性中引用该文件夹，使用其相对路径。

让我们看看这个例子：

<View style={styles.container}> 
  <LottieView 
    source={require('./assets/animations/myLottieFile.    json')} 
    autoPlay
    loop
    imageAssetsFolder='lottie/animation_name'
  />
</View>

一旦您在项目中有了资产，您就可以重命名它们，但您还需要修改包含 Lottie 动画的 JSON 文件，以便通过其新名称识别资产文件：

...,

  "assets": [

    {

      "id": "image_name",

      "w": 200,

      "h": 100,

      "u": "images/",

      "p": "new_image_name.png"

    }

  ],

  ...

通过这种方式，我们将把闪亮的资产加载到我们的动画中，使它们能够完全渲染外部图像。

摘要

在本章中，我们学习了如何使用基本集成，如 TypeScript 类型，将 Lottie 动画加载到 React Native 中，以及如何将外部资产添加到我们的动画中。这使得我们能够在 React Native 应用中显示复杂的动画，但如果我们需要控制播放（例如，根据应用中发生的事件告诉动画开始/停止）会怎样呢？

让我们进入下一章，了解如何在 lottie-react-native 中控制 Lottie 动画。

第十章：如何做到完美：控制你的动画

到目前为止，我们在 React Native 应用中已经有一个完全功能的动画，它在挂载时开始循环播放，在卸载时停止。但如果我们想控制动画的播放呢？让我们举一个例子：当我们按顺序将五个不同的文件下载到我们的应用中时，我们需要显示加载条的动画。加载条将通过每次下载一个文件时填充自身（每次下载增加 20%）来显示下载文件的进度，一旦这五个文件都下载完成，加载条将完全填充。

![图 10.1 – 动画加载条示例]

图 10.1 – 用作示例的动画加载条

在这种情况下，我们需要控制动画，每次一个文件完全下载时更新它，在下一个下载进行时停止它。

为了解释 lottie-react-native 中这一过程是如何工作的，我们将回顾两种不同的替代方案：声明式和命令式 API。到本章结束时，我们不仅将知道如何在我们的 React Native 应用中渲染 Lottie 动画，而且我们还将能够控制它们的播放和布局。

为了解释 lottie-react-native 中这一过程是如何工作的，我们将回顾不同的替代方案：

• 声明式 API

• 命令式 API

技术要求

为了完成本章，我们必须有一个在模拟器或设备上运行的正常工作的 React Native 应用。我们将修改这个应用，包括我们在前几章中学到的 LottieView 组件，这样我们就可以通过方法和属性来修改和控制动画。

声明式 API

命令式编程与声明式编程之间的区别最常见的解释是，命令式代码指导计算机如何执行任务，而声明式代码则专注于你希望计算机做什么。

在命令式编程中，你的代码由语句组成，这些语句通过指示计算机做什么来影响程序的状态。换句话说，你的代码是围绕定义变量和改变它们的值来构建的。

在声明式编程中，你的代码由表达式组成，这些表达式根据它们的输入评估输出，通过告诉机器你想要什么。

React 是按照声明式范式设计的，尽管在需要时它允许你以命令式方式控制一些组件。同样，lottie-react-native 也是如此，因为它为在应用中渲染的动画提供了不同的命令式或声明式控制 API。

在本节中，我们将关注如何使用 lottie-react-native 库的声明式 API 来控制示例动画加载条。

下面是一个使用声明式 API 控制 Lottie 动画的示例：

const numFilesToDownload = 5;

const duration = 2000;

const App = ({downloadedFiles}) => {

  const progress = useMemo(() => new Animated.Value(0), []); 

  useEffect(() => {

    Animated.timing(progress, {

      toVal4deue: downloadedFiles.length / numFilesToDownload,

      duration: duration,

      useNativeDriver: true,

      easing: Easing.linear,

    }).start();

  }, [downloadedFiles, progress]);

  return (

    <SafeAreaView>

      <View style={styles.container}>

        <LottieView

          source={require('./assets/animations/loadingBar.          json')}

          progress={progress}

        />

      </View>

    </SafeAreaView>

  );

};

export default App;

在这个示例中，我们的 App 组件接收一个名为 downloadedFiles 的属性，包括应用程序下载的文件信息。这个信息可以由 Redux、MobX、包装应用程序的组件或任何其他方式提供。对于这个示例来说，重要的是要知道 downloadedFiles 是一个数组，其大小将从 0 增加到要下载的最大文件数（在示例中由 const numFilesToDownload = 5; 定义）。

我们正在使用 React Native 的 Animated API 来保持动画的进度：const progress = useMemo(() => new Animated.Value(0), []); 。这是一个从 0 开始并逐渐达到 1 的 Animated.Value，定义了我们希望动画完成的程度。我们在这里使用 useMemo。由于 progress 是一个变量，我们希望使用 React Native 的 Animated API 来更新它：

  useEffect(() => {

    Animated.timing(progress, {

      toValue: downloadedFiles.length / numFilesToDownload,

      duration: duration,

      useNativeDriver: true,

      easing: Easing.linear,

    }).start();

  }, [downloadedFiles, progress]);

在这部分，我们正在创建一个效果，它将根据已下载的文件数量（downloadedFiles.length）和要下载的文件数量（numFilesToDownload）来更新 progress。有了这个，每次下载一个新文件时，我们将推动进度条向总进度前进 20%。例如，如果我们已经下载了 5 个文件中的 2 个，progress 将设置为 0.4，这意味着动画需要平滑地播放直到总播放时间的 40%。

我们还在下一行代码中定义了每次推动加载条的持续时间：

const duration = 2000;

在这个示例中最重要的部分是 LottieView 组件：

        <LottieView

          source={require('./assets/animations/loadingBar.          json')}

          progress={progress}

        />

我们在这里使用 progress 属性，这样我们就可以根据某个时刻正在下载的文件数量来声明动画的进度，这个进度依赖于 progress（一个 Animated 值）。

我们可以在 lottie-react-native 库的 README 文件中找到所有声明性属性、它们的描述和默认值（github.com/lottie-react-native/lottie-react-native/blob/master/docs/api.md)。

所有这些都可以在 LottieView 组件上声明性使用，以控制我们的 Lottie 动画的渲染和行为。在下一节中，我们将学习如何使用命令式 API 控制我们的动画，对于那些需要明确说明对动画做什么而不是对状态变化做出反应的情况。

我们已经学习了如何在我们的 LottieView 对象中使用一些这些属性。现在我们将使用其他重要的属性来展示示例。

speed

speed 属性是一个数字，它根据默认速度应该播放多少次来设置动画的速度：

<LottieView 

    source={require('./assets/animations/myLottieFile.json')} 

    speed={2} 

/>

上面的示例将使我们的动画以原始动画速度的两倍播放。

<LottieView 

    source={require('./assets/animations/myLottieFile.json')} 

    speed={-1} 

/>

上面的示例将以原始动画速度反向播放我们的动画。考虑到这一点，我们可以创建一个循环，每 2 秒渲染动画来回一次，而不是重复播放：

const App = ({}) => {

  const [speed, setSpeed] = useState(1);

  const reverseSpeed = useCallback(() => {

    if (speed === 1) {

      setSpeed(-1);

    } else {

      setSpeed(1);

    }

  }, [speed]);

  useEffect(() => {

    setTimeout(() => {

      reverseSpeed();

    }, 2000);

  }, [reverseSpeed]);

  return (

    <SafeAreaView>

      <View style={styles.container}>

        <LottieView

          source={require('./assets/animations/loadingBar.          json')}

          autoPlay

          speed={speed}

        />

      </View>

    </SafeAreaView>

  );

};

onAnimationFinish

onAnimationFinish属性是一个回调，当动画完成播放时将被触发。我们可以使用它来在显示的动画播放完成后导航到新屏幕：

const App = ({navigation}) => {

  const onAnimationFinish = useCallback(() => {

    navigation.navigate('NextScreen');

  }, []);

  return (

    <SafeAreaView>

      <View style={styles.container}>

        <LottieView

          source={require('./assets/animations/loadingBar.          json')}

          autoPlay

          onAnimationFinish={onAnimationFinish}

          loop={false}

        />

      </View>

    </SafeAreaView>

  );

};

注意loop={false}对于onAnimationFinish正常工作来说是必要的，因为循环动画永远不会结束。

colorFilters

colorFilters属性是一个包含字符串编码的十六进制颜色的对象数组，它允许开发者以编程方式更改特定图层的颜色。为了使此属性正常工作，需要提供正确的 keypath（在 After Effects 中创建应用时设置的属性，并存储在 Lottie JSON 文件中），以及相应的代码：

<LottieView

    autoPlay

    source={require('./assets/animations/loadingBar.json')}

    colorFilters={[

      {

        keypath: 'button',

        color: '#FF0000',

      },

      {

        keypath: 'circle',

        color: '#00FF00',

      },

      {

        keypath: 'square',

        color: '#0000FF',

      },

    ]}

/>

这段代码修改了三个 After Effect 图层（button、circle和square），将它们的颜色分别改为红色（'#FF0000'）、绿色（'#00FF00'）和蓝色（'#0000FF'）。

textFiltersAndroid 和 textFiltersIOS

textFiltersAndroid和textFiltersIOS包含一个包含要替换的文本的对象数组，我们可以通过编程方式修改动画中的特定文本。当我们在应用中处理翻译时，此属性非常有用：

<LottieView

  autoPlay

  source={require('./assets/animations/loadingBar.json')}

  textFiltersAndroid={[

    {find: 'Hello!', replace: 'Hola!'},

    {find: 'Bye!', replace: 'Adios!'},

  ]}

     textFiltersIOS={[

    {find: 'Hello!', replace: 'Hola!'},

    {find: 'Bye!', replace: 'Adios!'},

  ]}

/>

在这个例子中，我们正在替换动画中的文本'Hello!'为'Hola!'，并将'Bye!'替换为'Adios!'，适用于 iOS 和 Android 设备。

现在我们已经学会了如何使用声明式 API，让我们继续学习另一种与 Lottie 动画交互的方式：命令式 API。

强制性 API

有时候，在我们的应用中使用命令式编程会更简单，例如，有时我们需要根据应用内的用户交互来播放/停止动画。在这种情况下，我们可以使用lottie-react-native库的命令式 API，它允许开发者以非常直接的方式控制动画播放。

React 自动为所有其组件提供ref属性，以及useRef钩子，以便我们可以在需要以命令式方式控制组件时使用。

我们在上一节中编写的代码实际上是命令式编程在需要直接在组件上触发动作时更有意义的例子，这提高了可读性，并使我们的代码更容易推理：

import React, {useEffect, useRef} from 'react';

import LottieView from 'lottie-react-native';

import {SafeAreaView, View, StyleSheet} from 'react-native';

const numFramesPerFile = 9;

const App = ({downloadedFiles}) => {

  const animation = useRef(null);

  useEffect(() => {

    if (downloadedFiles.length === 0) {

      animation.current.reset();

    } else {

      const startFrame = numFramesPerFile * (downloadedFiles.      length - 1);

      animation.current.play(startFrame, startFrame +       numFramesPerFile);

    }

  }, [downloadedFiles]);

  return (

    <SafeAreaView>

      <View style={styles.container}>

        <LottieView

          ref={animation}

          source={require('./assets/animations/loadingBar.          json')}

          loop={false}

        />

      </View>

    </SafeAreaView>

  );

};

const styles = StyleSheet.create({

  container: {

    width: '100%',

    height: '100%',

    justifyContent: 'center',

    alignItems: 'center',

  },

});

export default App;

对于这种方法，我们首先需要确定动画包含多少帧，以及下载每个要下载的文件后需要渲染多少帧。在这个例子中，我们可以这样计算：

1. 动画中包含的帧数：45

2. 需要下载的文件数：5

3. 每次文件下载要播放的帧数：45 / 5 = 9

然后，我们在代码中定义了在每次文件下载时播放的计算帧数作为一个常量：

const numFramesPerFile = 9;

接下来，我们需要创建一个对LottieView组件的引用，这将使我们能够调用其上的命令式方法。我们使用 React 提供的useRef钩子来完成此操作：

const animation = useRef(null);

这个引用需要作为 ref 属性传递给我们的 LottieView 组件：

        <LottieView

          ref={animation}

          source={require('./assets/animations/loadingBar.          json')}

          loop={false}

        />

我们还看到如何显式传递 loop={false}，这样当我们在动画上调用任何命令式回放方法时，动画就不会重复。

在所有这些设置准备就绪后，我们可以创建一个在每次文件下载时都会触发效果的动画。这个效果将在引用的组件上使用命令式播放方法。这个播放方法接受我们想要在动画中播放的初始帧和最终帧。

我们将使用这些参数在每次文件下载时仅重现动画的一部分：

  useEffect(() => {

    if (downloadedFiles.length === 0) {

      animation.current.reset();

    } else {

      const startFrame = numFramesPerFile * (downloadedFiles.      length - 1);

      animation.current.play(startFrame, startFrame +       numFramesPerFile);

    }

  }, [downloadedFiles]);

当我们知道应用下载了多少个文件（downloadedFiles.length）时，我们可以轻松计算出下一个动画部分应该开始的初始帧：

const startFrame = numFramesPerFile * (downloadedFiles.length - 1);

然后，我们到达这段代码最重要的部分：使用命令式 API 从初始帧 (startFrame) 播放动画直到最终帧 (startFrame + numFramesPerFile) 的部分：

animation.current.play(startFrame, startFrame + numFramesPerFile);

注意，如果下载的文件数量为零，我们将重置动画，以确保我们始终从初始帧开始：

    if (downloadedFiles.length === 0) {

      animation.current.reset();

    }

除了 play 和 reset，我们还可以在 lottie-react-native 库的 README 文件中找到其他命令式方法，该文件位于 github.com/lottie-react-native/lottie-react-native/blob/master/docs/api.md。

摘要

在本章中，我们回顾了 lottie-react-native 的声明式和命令式 API 之间的区别，这些 API 可以用来控制动画的外观和播放。除此之外，我们还学习了如何使用 React Native 的 Animated API 来平滑地控制 Lottie 动画的进度。

在下一章中，我们将讨论在使用 lottie-react-native 在我们的 React Native 应用中可能遇到的一些最常见问题、陷阱和问题。

第十一章：有什么问题？lottie-react-native 常见问题解答

即使这本书包含了所有信息，在使用基于 Lottie 的动画时，也可能会出现一些问题。在本章中，我们将讨论开发者在使用lottie-react-native时最常问的一些问题。为了方便，以下是在接下来的页面中你将找到的问题和问题的列表：

1. 我在我的动画中添加了一个效果，但在应用中未渲染。

2. 在我的应用中，动画根本未渲染。

3. 动画看起来被拉伸了。

4. 我该如何暂停动画？

5. 我该如何反转动画？

6. 我的动画在 iOS 设备上渲染，但在 Android 设备上没有渲染。

7. 我的动画在 Android 设备上渲染，但在 iOS 设备上没有渲染。

8. 安装lottie-react-native后，我的应用无法构建。

9. 一些帧在我的动画中没有显示。

10. 我的动画显示的颜色不正确，或者完全没有颜色。

11. 我该如何将我的 Lottie 动画用作启动画面？

12. 我的动画中缺少图像。

13. 我该如何在应用中居中动画？

14. 我该如何播放我的动画指定次数？

15. 我的动画播放性能较低。

16. 我该如何通过编程方式更改动画的颜色？

17. 我如何在应用中使用远程的 Lottie 动画文件？

18. 我的 Android 应用崩溃了。

19. 在我的应用中显示了一个错误 – 目标之间的循环依赖。

20. 在我的应用中显示了一个错误 – Gradle 7：无法解析类 MavenDeployment。

1. 我在我的动画中添加了一个效果，但在应用中未渲染

在 Adobe After Effects 中，有一些效果在特定平台上不受支持。当出现此类错误时，最好查看 Lottie 文档中支持的特性列表，网址为github.com/airbnb/lottie/blob/master/supported-features.md。

请注意，这个列表可能会随着时间的推移而变化，因为 Lottie 正在不断改进。正如列表所示，同一个效果可能在特定平台上显示，但在另一个平台上可能缺失。

对于这些情况，最常见的方法是重新制作动画，移除选定的效果，或者为失败的平台创建不同的动画，因为没有程序性的解决方案来解决这个问题。

2. 在我的应用中，动画根本未渲染

请检查包含动画的 JSON 文件是否放置在 React Native 应用项目结构中，并且可以通过动画应渲染的组件中的import/require语句访问。为了测试这一点，你可以console.log JSON 文件的内容；如果它们显示为undefined，则表示文件无法被组件访问：

const animation = require('./assets/animations/loadingBar.json')

console.log(animation)

在这种情况下，你可能需要将 JSON 文件移动到不同的文件夹，或者尝试使用不同的 JSON 文件，因为文件可能已损坏或不一致。使用 JSON 检查器可以帮助识别和修复此类问题。

3. 动画看起来被拉伸

LottieView 继承了标准 React Native View 组件的大小行为，因此，可以通过其包含父元素上的样式属性来更改它。如果图像大小看起来不正确，请首先尝试显式更改父元素的大小：

  <View style={{width: 300, height: 150}}>

        <LottieView

          ref={animation}

          source={require('./assets/animations/loadingBar.          json')}

          loop={false}

        />

  </View>

如果这不起作用，请尝试在 LottieView 组件中显式更改 width 或 height：

     <LottieView

          ref={animation}

          source={require('./assets/animations/loadingBar.          json')}

          loop={false}

          style={{width: 300, height: 150}}

     />

在两种方法中也可以使用父元素相对大小（百分比）。始终注意父元素的大小，因为许多问题可以通过确保父元素大小正确来解决。此外，如果需要，请考虑使用 flex 属性。

4. 我该如何暂停动画？

有几种方法可以解决这个问题：

• 如果你正在使用代码中的声明式方法，你可以在 LottieView 上使用 speed 属性，将其设置为 0 将停止动画。

• 如果你正在使用命令式 API，你可以在动画引用上使用 pause() 方法，这将立即停止你的动画播放。相反，play() 方法将在你需要时重新启动播放。

5. 我该如何反转动画？

实现反向播放的最简单方法是在 LottieView 组件上使用 speed 属性，因为负值会使动画反向播放。如果你想以原始速度反向播放动画，需要将 speed 属性设置为 -1，但你也可以将其设置为 -2 以实现双倍速度播放，或者将其更改为 -0.5 以实现半速播放：

<LottieView

  source={require('./assets/animations/loadingBar.json')}

  speed={-1}

/>

如果你正在使用动画 API 来控制动画的进度，你可以使用如 Animated.timing 等方法，并确保你传递的是递减的值：

  // start animation at frame 300 and go decrementally to frame      0

  const progress = useMemo(() => new Animated.Value(300), []);

  useEffect(() => {

    Animated.timing(progress, {

      toValue: 0,

      duration: 500,

      useNativeDriver: true,

      easing: Easing.linear,

    }).start();

  }, [downloadedFiles, progress]);

  return (

    <SafeAreaView>

      <View style={styles.container}>

        <LottieView

          source={require('./assets/animations/loadingBar.          json')}

          progress={progress}

        />

      </View>

    </SafeAreaView>

  );

6. 我的动画在 iOS 设备上渲染，但在 Android 设备上不渲染

lottie-react-native 的新版本只能在 AndroidX 项目中使用。这意味着如果你的应用尚未迁移到 AndroidX (developer.android.com/jetpack/androidx)，它将无法显示任何 Lottie 动画。

在这种情况下，你可以尝试 lottie-react-native 的旧版本。例如，尝试运行以下命令：

yarn add lottie-react-native@3.0.2
yarn add lottie-ios@3.0.3

考虑到这些情况，API 可能不同，或者可能需要一些额外的安装步骤。始终在使用 lottie-react-native 的旧版本时检查版本特定的文档。

7. 我的动画在 Android 设备上渲染，但在 iOS 设备上不渲染

lottie-react-native 需要一些额外的安装步骤才能正常工作：

• 记得通过运行 yarn add lottie-ios 来安装 lottie-ios 依赖项。

• 记得从你的 React Native 项目的 ios 文件夹中运行 pod install。

8. 安装 lottie-react-native 后，我的应用在 iOS 上无法构建

在 iOS 中，lottie-react-native最常见的构建问题与对 Swift 库的 React Native 项目的支持不足有关。在这种情况下，您需要创建一个 Swift 桥接头，以便使您的应用为 Swift 库做好准备：

1. 通过 Xcode 菜单添加新文件：文件 | 新建 | 文件：

图 11.1 – 在您的 Xcode 项目中创建一个新文件

1. 选择Swift 文件：

图 11.2 – 选择 Swift 作为文件类型

1. 点击创建桥接头：

图 11.3 – 确认创建桥接头

您可能需要重新构建项目以使更改生效。一旦完成，lottie-react-native应该准备好在 iOS 上显示您的动画。

9. 我的动画中有些帧没有显示

Lottie 的旧版本存在渲染问题，并且无法与新版本的 Android 和 iOS 正确工作。要修复此类问题，请确保您有适用于您正在运行的平台的最新lottie-react-native版本。

您可以在projects存储库（github.com/lottie-react-native/lottie-react-native）或 npm 网站上找到lottie-react-native的可用版本列表（www.npmjs.com/package/lottie-react-native）。

10. 我的动画显示的颜色错误或完全没有颜色

这通常不是lottie-react-native的问题，而是Bodymovin导出颜色的方式。您可能仍然可以通过手动浏览您的 JSON 文件并手动修改它们来解决这个问题。

JSON 文件中的层颜色通常由名为"sc"的键定义，因此您可以搜索该键并更改您想要更改的颜色十六进制值。例如，如果您期望红色但得到的是白色，您可以搜索"sc":"#ffffff"并将其替换为"sc":"#ff0000"。

请注意，可能存在多个层定义了该颜色，因此您可能需要尝试错误直到找到您需要更改的确切层。

11. 我如何将我的 Lottie 动画用作启动画面？

在应用启动时显示 Lottie 动画是一种很好的用户体验，随着移动应用的日益复杂化，这种做法变得越来越受欢迎。一种常见的方法是将动画作为主屏幕加载，有一个状态变量在动画完成后改变，并在大多数初始数据加载完毕后立即切换到真实的主屏幕：

import React, { useState } from 'react';

const App = () => {

  const [animationFinished, setAnimationFinished] = useState(false);

  useEffect(() => {

    loadAppData(); // load initial data

  }, []);

  if (animationFinished === false) {

    return(

      <View style={styles.splash}>

        <LottieView source={require('./assets/animations/        splashAnimation.json')}

          autoPlay

          loop={false}

          onAnimationFinish={() => {

            setAnimationFinished(true);

          }}

        />

      </View>

    )      

  } else {

    return(

      <MainScreen />

    )

  }

};

如果我们想将 Lottie 动画作为启动屏幕显示，我们需要将此组件作为初始组件，这样应用首先加载的就是这个动画。注意我们如何在组件挂载时调用loadAppData()来开始加载数据，在组件向用户显示数据之前。

12. 我的动画中缺少图像

如果您使用外部资源（图像）创建了动画，您需要将这些图像添加到您的应用中，并让lottie-react-native知道这些图像的位置。这需要在本地级别完成，并需要一些配置，如在第九章“让我们做一些魔法：集成您的第一个 Lottie 动画”中所述，在名为“使用带有资源的 Lottie 文件”的部分中解释。

确保您执行以下操作：

• 将这些图像添加到项目的文件夹结构中。

• 以一种使这些文件可以通过代码访问的方式配置您的项目。

• 将imageAssetsFolder属性传递给LottieView组件，并使用正确的相对路径指向包含这些资源的文件夹。

13. 我如何在应用中居中动画？

LottieView组件从 React Native 的标准View组件继承其布局行为，因此居中应该以我们在 React Native 中居中View的方式来进行。这可以通过在LottieView组件的style属性上使用alignSelf: 'center'键，或者确保父组件具有正确的大小并在其style属性中使用alignItems: 'center'来实现。

如果这种方法不起作用，我们应该确保父组件具有正确的大小，因为大多数对齐问题都源于此问题。

14. 我如何播放动画指定次数？

最简单的方法是使用命令式 API，调整play()方法和onAnimationFinish属性重复播放动画，当播放结束时播放动画：

import React, {useState, useRef} from 'react';

const App = ({}) => {

  const animation = useRef(null);

  const [numPlaybacks, setNumPlaybacks] = useState(0);

  return (

    <SafeAreaView>

      <View style={styles.container}>

        <LottieView

          ref={animation}

          source={require('./assets/animations/loadingBar.          json')}

          loop={false}

          autoPlay

          onAnimationFinish={() => {

            if (numPlaybacks + 1 < maxNumPlaybacks) {

              animation.current.play();

              setNumPlaybacks(numPlaybacks + 1);

            }

          }}

        />

      </View>

    </SafeAreaView>

  );

};

这段代码的关键在于如何使用onAnimationFinish来重复动画，通过状态变量（numPlaybacks）和常数最大重复次数（maxNumPlaybacks）来控制重复次数。

15. 我的动画播放性能较低

随着移动操作系统的不断发展，它们采用了不同的图形渲染技术。Lottie 通过定期发布新版本来适应这些变化，这些新版本可以提升渲染动画的性能。始终使用lottie-react-native的最新版本非常重要，因为它可能包含基于 Android 和 iOS 设备最新渲染引擎的性能改进。

React Native 通过接受useNativeDriver参数，为动画 API 提供了一种开箱即用的性能改进，该参数利用了一些 UI 组件的本地能力。使用此参数可能有助于在使用Animated和lottie-react-native结合时。

如果您想确保您正在使用lottie-react-native的最新版本，请确保您检查lottie-react-native存储库中的 README 文档，并遵循其安装指南。

16. 我如何以编程方式更改动画的颜色？

lottie-react-native允许开发者在任何LottieView组件中使用colorFilters属性，目的是更改动画中特定层的颜色。这些层的名称在 After Effects 中定义，并存储在导出的 JSON Lottie 文件中，如下面的代码块所示：

import React from 'react';

import LottieView from 'lottie-react-native';

import {SafeAreaView, View} from 'react-native';

const App = ({}) => {

  return (

    <SafeAreaView>

      <View style={{width: '100%', height: '100%'}}>

        <LottieView

          source={require('./assets/animations/loadingBar.          json')}

          autoPlay

          colorFilters={[

            {

              keypath: 'border',

              color: '#FF0000',

            },

            {

              keypath: 'bar',

              color: '#FF0000',

            },

          ]}

        />

      </View>

    </SafeAreaView>

  );

};

export default App;

在这个例子中，我们将名为border和bar的两个层的颜色更改为全红色。

17. 我如何在应用中使用远程 Lottie 动画文件？

最简单的方法是使用fetch()下载 JSON 文件，解析它，并将其设置在状态变量中，以便它可以作为LottieView容器中的source属性使用：

import React, {useState, useEffect} from 'react';

import LottieView from 'lottie-react-native';

import {SafeAreaView, View} from 'react-native';

const App = ({}) => {

  const [animation, setAnimation] = useState();

  useEffect(() => {

    fetch('https://myserver.com/animation.json', {

      method: 'GET',

    })

      .then(response => response.json())

      .then(responseJSON => {

        setAnimation(responseJSON);

      })

      .catch(e => console.error(e));

  }, []);

  return (

    <SafeAreaView>

      <View style={{width: '100%', height: '100%'}}>

        {animation && <LottieView source={animation} autoPlay         loop />}

      </View>

    </SafeAreaView>

  );

};

export default App;

如果遵循此方法，重要的是在动画完全下载之前控制LottieView组件（animation && <LottieView）。

18. 我的 Android 应用崩溃了

有几位用户报告说，由于错误，在 Android 上应用崩溃。React Native 的最新版本已经改进了这一过程，更新这些版本应该可以解决问题，但如果这不是一个可行的方案，您可以按照以下步骤手动链接所需的库：

1. 在您的android/app/src/main/java/<YourAppName>/MainApplication.java中，在顶部添加import com.airbnb.android.react.lottie.LottiePackage;。

2. 在同一文件中，在List<ReactPackage> getPackages()下添加packages.add(new LottiePackage());。

3. 在您的android/app/build.gradle中，在依赖关系部分添加implementation project(':lottie-react-native')。

4. 在您的android/settings.gradle中添加include ':lottie-react-native'。

5. 在您刚刚添加的行之后，添加project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')。

现在，您应该重新构建您的应用，并发现它不再崩溃。

19. 我的 app 上显示了一个错误 – 目标之间的循环依赖

这是在 iOS 中处理原生代码时 React Native 开发者常见的错误。问题是与依赖关系树的变化有关，最终导致重新排列了哪个库依赖于另一个库。因此，最简单的解决方案是在我们的 iOS 项目中重置依赖关系树，确保我们最终得到一个干净的依赖链。

要实现这一点，我们可以在 Xcode 中按Command + Shift + K清理builds文件夹，然后在project文件夹中按命令行中的yarn ios重新构建应用。

20. 我的 app 上显示了一个错误 – 执行任务`:lottie-react-native:compileDebugJavaWithJavac'失败

这种错误可能在更新到 React Native 的新版本并在 Android 设备上首次运行应用后出现。有时，只需清理 builds 文件夹就能解决这个问题，但如果清理不起作用，还有两种其他方法可能修复它：

• 通过将 android.useAndroidX=true 和 android.enableJetifier=true 添加到您的 gradle.properties 文件，并立即运行 npx jetifier 来将您的应用迁移到 AndroidX。这将使您的应用准备好包含基于 AndroidX 的库。

• 确保您正在使用 JDK v8 而不是较新版本（Android Studio 可能会安装较新版本）。您可以在 React Native 网站上的环境设置说明（reactnative.dev/docs/environment-setup）中找到，并在您的 shell 配置文件中将该版本的 Java 配置为默认版本。

摘要

感谢您阅读完这一章，其中我们介绍了在处理 lottie-react-native 时报告的最常见问题和疑问。还有许多其他不常被问到的问题可以在 lottie-react-native 仓库的问题（github.com/lottie-react-native/lottie-react-native/issues）和 Stack Overflow 上找到，所以如果您需要更具体的答案，请确保您转向那些资源。

20. 我的 app 上显示了一个错误 – 执行任务 ':lottie-react-native:compileDebugJavaWithJavac' 失败

Packt.com

订阅我们的在线数字图书馆，全面访问超过 7,000 本书籍和视频，以及行业领先的工具，帮助你规划个人发展并推进职业生涯。更多信息，请访问我们的网站。

第十二章：为什么订阅？

• 使用来自超过 4,000 位行业专业人士的实用电子书和视频，节省学习时间，多花时间编码

• 通过为你量身定制的技能计划提高你的学习效果

• 每月免费获得一本电子书或视频

• 完全可搜索，便于轻松访问关键信息

• 复制粘贴、打印和收藏内容

你知道 Packt 为每本书都提供电子书版本，包括 PDF 和 ePub 文件吗？你可以在packt.com升级到电子书版本，作为印刷书客户，你有权在电子书副本上享受折扣。想了解更多详情，请联系我们customercare@packtpub.com。

在www.packt.com，你还可以阅读一系列免费的技术文章，注册各种免费通讯，并享受 Packt 书籍和电子书的独家折扣和优惠。

你可能还喜欢的其他书籍

如果你喜欢这本书，你可能对 Packt 的其他书籍也感兴趣：

Adobe After Effects CC 实战运动图形

David Dodds

ISBN: 978-1-78934-515-5

• 为电视节目创建具有复杂图层的下三项目

• 使用形状图层动画创建动画歌词视频

• 探索不同的工具来动画化角色

• 应用文本动画创建动态的电影开场标题

• 使用专业视觉效果创建 VFX 项目

Adobe Animate 2022 for Creative Professionals - 第二版

Joseph Labrecque

ISBN: 978-1-80323-279-9

• 深入了解 Adobe Animate 的基础知识和新功能

• 了解与发布和将丰富媒体内容导出到各种平台相关的细微差别

• 利用高级分层和绑定技术来创建引人入胜的运动内容

• 使用摄像机和可变图层深度技术创建动态运动

• 开发基于网络的游戏、虚拟现实体验和多平台移动应用程序

Packt 正在寻找像你这样的作者

如果你对成为 Packt 的作者感兴趣，请访问authors.packtpub.com并今天申请。我们曾与成千上万的开发者和技术专业人士合作，就像你一样，帮助他们将见解分享给全球技术社区。你可以提交一般申请，申请我们正在招募作者的特定热门话题，或者提交你自己的想法。

分享你的想法

现在您已经完成了《使用 Lottie 和 After Effects 进行 UI 动画》的学习，我们非常想听听您的想法！如果您在亚马逊购买了这本书，请选择www.amazon.ae/review/create-review/error?asin=1803243805为这本书创建评论并分享您的反馈或在该购买网站上留下评论。

您的评论对我们和科技社区都非常重要，并将帮助我们确保我们提供高质量的内容。

您可能还会喜欢的其他书籍

您可能还会喜欢的其他书籍