与Lottie一起动画

网页动画不仅趣味十足，更能有效提升用户参与度，将访客转化为客户。想想Twitter的“点赞”按钮：点击点赞时，彩色气泡围绕着心形按钮扩散，按钮逐渐变成圆形，最终呈现点赞后的红色填充状态。如果只是简单地将心形轮廓填充，效果将逊色得多。这种兴奋感和满足感完美诠释了动画如何提升用户体验。

本文将介绍如何使用Lottie在网页上渲染Adobe After Effects动画，实现诸如Twitter点赞按钮之类的复杂动画效果。

Bodymovin是Adobe After Effects的一个插件，可将动画导出为JSON格式；Lottie则是一个库，可在移动端和网页上原生渲染这些JSON动画。它由Hernan Torrisi创建。如果您在想：“我不用After Effects，这篇文章可能不适合我”，请稍等片刻。我也没有使用After Effects，但我曾在项目中使用过Lottie。

当然，您不必非要使用Lottie才能在网页上制作动画。另一种方法是从头开始设计动画，但这可能非常耗时，尤其对于Lottie擅长处理的复杂动画类型更是如此。另一种选择是使用GIF动画，GIF动画的动画类型无限，但其文件大小通常是Bodymovin生成的JSON文件的两倍。

让我们开始了解它的工作原理。

获取JSON文件

要使用Lottie，我们需要一个包含After Effects动画的JSON文件。幸运的是，Icons8提供了许多免费的动画图标，以JSON、GIF和After Effects格式提供。

将脚本添加到HTML

我们还需要在HTML中引入Bodymovin播放器的JavaScript库，并调用其loadAnimation()方法。基本方法如下所示：

<div id="icon-container"></div>
<script>
  var animation = bodymovin.loadAnimation({
    container: document.getElementById('icon-container'), // 必需
    path: 'data.json', // 必需
    renderer: 'svg', // 必需
    loop: true, // 可选
    autoplay: true, // 可选
    name: "Demo Animation", // 可选
  });
</script>

激活动画

动画加载到容器后，我们可以使用事件监听器配置动画的激活方式和触发动作。以下是可用的属性：

• container：加载动画的DOM元素
• path：包含动画的JSON文件的相对路径
• renderer：动画格式，包括SVG、canvas和HTML
• loop：布尔值，指定动画是否循环播放
• autoplay：布尔值，指定动画加载后是否自动播放
• name：动画名称，用于将来引用

请注意，在前面的示例中，animationData属性已注释掉。它与path属性互斥，是一个包含导出动画数据的对象。

尝试一个示例

我想用Icons8的这个动画播放/暂停控制图标演示如何使用Lottie：

Bodymovin播放器库在此处静态托管，可以直接放入HTML中，但也可以作为包使用：

npm install lottie-web  ### 或 yarn add lottie-web

然后，在您的HTML文件中，包含已安装包的dist文件夹中的脚本。您也可以从Skypack导入库作为模块：

import lottieWeb from "https://cdn.skypack.dev/lottie-web";

目前，我们的暂停按钮处于循环播放状态，并且自动播放：

让我们更改它，以便通过操作触发动画。

触发动画

如果关闭自动播放，我们将得到一个静态的暂停图标，因为这是它从After Effects导出的方式。

但是，别担心！Lottie提供了一些可应用于动画实例的方法。也就是说，npm包的文档更全面。

我们需要做几件事：

• 最初显示为“播放”状态。
• 点击时将其动画设置为“暂停”状态
• 随后点击时在两者之间切换动画。

goToAndStop(value, isFrame)方法在这里很合适。当动画加载到容器中时，此方法将动画设置为转到提供的值，然后停止在那里。在这种情况下，我们必须找到动画在播放时的值并设置它。第二个参数指定提供的值是基于时间还是帧。它是一个布尔类型，默认值为false（即基于时间的值）。因为我们想将动画设置为播放帧，所以我们将其设置为true。

基于时间的值将动画设置为时间轴上的特定点。例如，动画开始时（暂停时）的时间值为1。但是，基于帧的值将动画设置为特定的帧值。根据TechTerms的说法，帧是图像序列中的单个图片。因此，如果我将动画的帧值设置为5，则动画将转到动画中的第五帧（在这种情况下为“图像序列”）。

尝试不同的值后，我发现动画从帧值11到16播放。因此，我选择14以确保安全。

现在，我们需要设置动画，以便在用户单击它时更改为暂停，并在用户再次单击它时播放。接下来，我们需要playSegments(segments, forceFlag)方法。segments参数是一个包含两个数字的数组类型。第一个和第二个数字分别表示该方法应读取的第一帧和最后一帧。forceFlag是一个布尔值，指示该方法是否应立即触发。如果设置为false，它将等到动画播放到作为segments数组中第一帧指定的值后才会触发。如果为true，则会立即播放片段。

在这里，我创建了一个标志来指示何时播放从播放到暂停的片段，以及从暂停到播放的片段。我还将forceFlag布尔值设置为true，因为我希望立即进行转换。

就是这样！我们将After Effects中的动画渲染到浏览器中！感谢Lottie！

Canvas？

我更喜欢使用SVG作为渲染器，因为它支持缩放，我认为它可以渲染最清晰的动画。Canvas渲染效果不太好，也不支持缩放。但是，如果您想使用现有画布渲染动画，则需要执行一些额外操作。

更多操作

动画实例还有一些事件，也可以用来配置动画的行为。

例如，在下面的Pen中，我在动画中添加了两个事件监听器，并在触发事件时设置显示一些文本。

所有事件都可以在npm包的文档中找到。有了这些，我再说一句，去渲染一些惊人的动画吧！

以上是与Lottie一起动画的详细内容。更多信息请关注PHP中文网其他相关文章！