无缝创造：深入探讨 Web 动画的开发流程

在当今数字时代，Web 设计不再仅仅是静态的图形和文本的展示，而是通过生动的 Web 动画来增添活力和交互性。Web 动画作为现代 Web 设计的核心元素之一，为 Web 设计师和开发者提供了丰富的创作空间。这也正是我为什么要这本本系列（《Web 动画之旅》）的初衷。

如果跟随本系列学习到这里，我想你已经掌握了创作 Web 动画的各种知识，例如，动画的基础理论、设计原则、动画作用、动画开发技术和技巧等。简单地说，你能独立创作符合需求的 Web 动画，并且在此过程你已经掌握了一些技巧，也积累了一定的经验。

另外，在创作 Web 动画的过程中，你肯定感受到了快乐与成就感。但与此同时，我想你也感受到了痛苦和沮丧感。这意味着，快乐与痛苦并存。其中令你感到不悦的主要原因之一是，创作复杂的、炫酷的动画很费时间和精力。在这个过程中，不管是 Web 设计师还是开发者，总是期望有更快速、更高效的方式能创作出质量更高的 Web 动画。

那么，接一下来，我们将深入了解 Web 动画的工作流程，介绍 Web 设计师和开发者如何协同工作，以创造既引人注目又流畅的动画效果。无论你是初学者还是经验丰富的专业人士，都将为你揭示 Web 动画的奥秘，助你在创造出色的 Web 体验方面迈出坚实的步伐。

Web 动画开发的痛点

想象一下，你充满创意地设计了一个令人惊叹的网站，充满了绚丽的 Web 动画。但是在这个光鲜的世界背后，有一些我们称之为"痛点"的小石子，可能会让你在动画开发的旅程中感到有点颠簸。这些“痛点”也是我们在 Web 动画开发中所面临的一些挑战，这些挑战有时让我们感到头痛，但也是我们创造精彩作品时的灵感来源。

首先，就像你们都知道的那样，设计和开发之间的协作往往是一项复杂的任务。Web 设计师们的创造力是无限的，但在将这些概念转化为可行的、流畅运行的 Web 动画时，我们常常需要进行深入的技术讨论。这就需要我们建立一种无障碍的沟通方式，确保设计的愿景能够在技术上得到实现。

其次，性能和用户体验一直是我们需要在动画开发中小心应对的方面。我们常常追求那些引人注目，炫酷的动画效果，但这可能会导致页面加载速度的减缓，对用户体验造成不利影响。因此，我们必须在追求创意的同时，时刻保持对性能的关注，以确保用户能够流畅地与我们的作品互动。

兼容性问题也是我们不得不面对的挑战之一。不同浏览器、不同设备，它们对 Web 动画的解释和渲染方式可能存在差异，就是要求我们写出兼容性强、稳定运行的代码。而这往往需要我们进行繁琐的测试和调试工作，确保我们的动画在各种环境中都能够正常呈现。

学习新技术是我们作为 Web 开发者和设计师不可避免的任务。新的库、框架和工具层出不穷，我们需要不断保持学习的态度，跟进技术的最新进展。这既是一项挑战，也是一种机会，因为只有不断学习，我们才能创造出更为前卫和令人惊艳的动画效果。

调试和优化可能是我们工作中比较冗长的环节之一。当我们的动画遇到问题时，我们需要深入了解渲染机制，通过浏览器开发者工具找到问题的根源。同时，为了提高性能，我们需要仔细优化我们的代码，这可能需要花费相当一部分时间。

最后，复杂的交互设计是我们现代 Web 动画中常常面临的挑战。我们不再仅仅追求静态的、观赏性的动画，而是更多地将用户的交互融入其中。这就需要我们在设计和开发过程中更深入地思考用户体验，确保我们的动画不仅令人印象深刻，还能够提高用户的参与感。

简单的归纳一下上面所提到的这些挑战，以便于你在创作动画过程能有一个心理准备和更好的应对。

团队协作：如果你在一个团队中工作，那么与设计师和其他开发者协同工作可能是一个挑战。有时设计师的创意和开发的可行性之间存在差距，这就需要更多的沟通和协调，以确保最终呈现的动画符合所有人的期望。
性能问题：想象一下，你的动画在你的开发环境中运行得非常流畅，但当你将它带到真实的浏览器中时，突然感觉比龟速还要慢。这就是性能问题，即使在高性能设备上也可能发生。大量的元素和复杂的动画轨迹可能成为性能的绊脚石。解决这个问题可能需要对你的代码进行调优和性能测试。
兼容性困扰：兼容性问题，简直是每个开发者的梦魇。你的动画在一个浏览器中运行得很完美，但在另一个浏览器中却一团糟。这就是浏览器兼容性问题，不同的浏览器对于 CSS 、JavaScript 和 SVG 的支持程度可能会有所不同。这可能需要你额外的时间来解决和测试，以确保用户在各种浏览器中都能够欣赏到你的杰作。
调试困难：当你的动画突然停滞或者不按预期运行时，你可能会感到有点手足无措。调试 Web 动画可能相对复杂，需要你深入了解你的代码并使用浏览器的开发者工具。了解如何定位问题和使用调试工具是一个逐渐培养的技能。
复杂性和维护：刚刚完成了一个引人注目的动画，但过了几个月，你突然意识到要维护和扩展它变得越来越困难。复杂的动画可能变得难以管理，而在保持代码整洁的同时添加新功能可能变得具有挑战性。
学习曲线：对于新手来说，学习 Web 动画可能就像踏上一座高山。从基本的 CSS 动画到复杂的 JavaScript 库，学习的路途可能会颇具挑战性。理解关键概念、熟悉工具和语法，这一切都需要时间和耐心。但别担心，这也是一个充满乐趣和成就感的过程。

虽然这些痛点可能会让你感到有点头疼，但请相信，它们并非无法克服。每一位经验丰富的开发者都曾经是一个动画新手，他们通过不断的实践和学习逐渐掌握了这门艺术。所以，不要灰心，继续前行！在这个激动人心的动画世界里，每一个挑战都是一次成长的机会。

Web 动画开发流程的演进

本系列花了很多节课与大家一起探讨了 Web 动画开发的技术。换句话说，我们在创作 Web 动画时，可能会使用下面所列技术之一：

使用 CSS 创建过渡或关键帧动画
使用 WAAPI 创建动画
使用 SVG 和 SMIL 创建动画
基于 JavaScript 动画库创建动画
CSS 、SVG 和 JavaScript 结合创建动画

不管使用哪一种技术来创建 Web 动画，它都有一个具体的开发流程。就目前为止，它主要有两种开发流程，其中之一就是传统动画开发模式和当下流行的动画开发模式。

传统动画开发模式

到目前为止，对于大多数 Web 开发者或者团队而言，还可以停留在传统 Web 动画开发模式中。传统 Web 动画开发模式和我们平常的 Web 开发模式非常的相似。这种模式主要有三个步骤：

首先由 Web 设计师们设计出 Web 动画
然后设计师们会将自己设计好的 Web 动画转换出视频或 GIF 等格式的演示文件，提供给 Web 开发者。与此同时，出色的 Web 设计师还会将动画相关的参数提供给 Web 开发者
最后，Web 开发者会根据设计师提供的动画演示文件和相关参数，使用代码来还原设计师所创作的动画，并最终呈现给用户

可以说，这是一个痛苦的过程，同时也增加了 Web 设计师和开发者的沟通成本，也增加了 Web 设计师的工作量。

除了增加了沟通成本之外，还有动画效果之间的差异。即使 Web 开发者用尽了各种方式最终还原出来的 Web 动画效果，总会令 Web 设计师略感失望。设计师总是认为自己的创意没有达到预期还原；开发者会认为这已然是最好的效果了。

也正因为如此，不管是设计师还是开发者，都在思考，都希望 Web 开发的模式能有所改变：动画效果能不能变得更丝滑一些、效果还原能不能更接近一些、能不能有一些创意和创新、能不能玩一些更有意思的，创作一些更复杂的交互动效。

当前动画开发模式

很多时候就是那样，因为痛才会有所改变。Web 设计师和开发者亦是如此，谁都希望自己是快乐的。在大家共同努力之下，Web 动画的开发模式也发生了很大的改变：

这个流程使得专业的人做更专业的事。Web 设计师专业的做他的设计，开发人员专业的做他的业务开发。因为 Web 动画的创建是由工具或者软件来实现，然后使用 JavaScript 脚本，将业务插入到转化后的 Web 动画中。

这意味着，现如今，Web 动画的开发模式变成了这样：

这也是时下 Web 动画主流开发模式。例如国外的 Lottie 和国内的 PAG 创建 Web 动画都使用了类似的开发流程：

Lottie: https://lottiefiles.com/

PAG: https://pag.art/

如果你经常要创作 SVG 动画，那么还可以直接使用 SVGator：

SVGator：https://www.svgator.com/

使用 Lottie-web 创建动画

Lottie-web：https://lottiefiles.com/web-player

为了让大家有一个更好的体验，接下来我将以 Lottie-web 为基础，和大家一起探讨如何基于 Lottie 快速创建 Web 动画。

如果你要创建的是 Web 动画，那么可以考虑 Lottie 的 Lottie-web 来创建。它可以快速，精确的实现 Web 设计师设计的 Web 动画效果。只不过，在使用 Lottie-web 时，需要具备几个前提条件：

获取 Lottie-web 库
AE 导出的 JSON 文件（或其他平台获取的描述动画的 JSON 文件）
使用 Lottie-web 渲染 AE 导出的 JSON 数据，让动效在 Web 上渲染

获取 Lottie-web 库

获取 Lottie-web 最简单的方式是从 CDN 上获取。

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js" integrity="sha512-jEnuDt6jfecCjthQAJ+ed0MTVA++5ZKmlUcmDGBv2vUI/REn6FuIdixLNnQT+vKusE2hhTk2is3cFvv5wA+Sgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

除了引入静态的 CDN 地址之外，还可以使用 NPM 或 Yarn 来安装lottie-web：

plaintext

npm i lottie-web 
 
// 或 
yarn add lottie-web

然后在 JavaScript 中像下面这样引入相应的 Lottie-web 相关的脚本：

plaintext

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

我们的演示案例都是在 Codepen 上呈现，你可以像下图这样引入 Lottie-web：

打开浏览器开发者调试器，你将看到 lottieWeb 对象相关的参数：

你可以调用 loadAnimation 来渲染动画：

HTML

<div id="lottie"></div>

JavaScript

const animation = lottieWeb.loadAnimation({
    // 动效加载到的DOM元素
    container: document.getElementById("lottie"), // 必须项
    
    // 包含动效的JSON文件的相对路径，也可以是绝对路径
    // 必须项，描述动效的JSON文件，一般由AE软件中导出的JSON文件
    path: "https://lottie.host/7401522f-2d8b-4049-ad18-eb0edb6af224/CE9lFrNlEH.json",
    
    // 动效渲染出来的格式，可以是svg、canvas和html
    renderer: "svg", // 必须项，除了svg选择之外还可以是canvas和html
  
    // 用于指定动效是否循环播放，true是循环播放，false不是循环播放
    loop: true, // 可选项
  
    // 指定动效是不是加载后就立即播放，true是立即播放，false不是立即播放
    autoplay: true, // 可选项
});

这个时候渲染出来的 Web 动画效果如下图所示：

Demo 地址：https://codepen.io/airen/full/jOROXeY

注意，具体渲染出什么样的动画效果是由 loadAnimation 中的 path 参数引入的 .json 文件决定的。这也意味着，你所引入的 .json 文件是要符合 Lottie-web 的规范与要求，否则有可能不会正常渲染出所需动画效果。你也可以通过 loadAnimation 提供的参数来控制动画的播放方式，例如是否循环播放。

获取 JSON 数据

正如前面示例所示，使用 Lottie-web 有一个关键点，就是需要一个描述动画效果的 JSON 文件。这个 JSON 文件可以是由 AE 设计软件导出来，也可以在第三方平台上获取。如果你不是一名 Web 设计师加上不懂得使用 AE 设计动效，那么获取 Lottie-web 所需的 JSON 文件最直接的方式就是第三方面平，例如，从 LottieFiles 市场上获取：

LottieFies: https://lottiefiles.com/marketplace

你在这个市场上花一定的时间很可能找到适合你所需要的动效。在 LottieFiles 市场上可以购买，也可以找许可证允许的免费JSON文件。不过，大多数情况之下，还是需要自己来创作才能满足更具体的需求，毕竟要在市场上找到符合自己需求的动画数据（JSON）成本还是非常的高。

获取到相应的 JSON 数据之后，你只要像上例那样，替换 loadAnimation 的 path 参数即可：

Demo 地址：https://codepen.io/airen/full/BaEaMow

刚才也提到了，如果要获得符合自己需求的动画效果的 JSON 数据，那就需要使用相关的设计软件来设计动画，例如 AE（Adobe After Effects）。如何使用 AE 来设计动画效果相关的内容已经超出这节课的范畴，如果你感兴趣的话，可以在网上搜索相关的教程，或者阅读 AE 软件所提供的操作文档。

这里假设你已经会使用 AE 制作自己想要的动画效果，或者说设计师已经向你提供了 AE 制作的动画效果文件。

接着就需要 AE 中导出描述动画效果的 JSON 文件。在这个过程中，不管是 Web 设计师还是 Web 开发者都需要知道。从 AE 中导出来的 JSON 文件是需要提供给 Lottie-web 解析渲染的，因此需要符合 Lottie-web 要求。为了避免不必要的麻烦，可以在 AE 软件中安装 LottieFiles 扩展插件。如此一来，从 AE 导出来的 JSON 文件就是 Lottie-web 所需的文件。

使用 LottieFiles插件还有另一个好处，可以直接在插件中引用 LottieFiles 市场的动效模板文件：

按照前面的示例所示，把导出来的data.json 文件放到 loadAnimation() 中的 path 中：

JavaScript

var animation = lottieWeb.loadAnimation({ 
    // animationData: { /* ... */ }, 
    container: document.getElementById('lottie'), // required 
    path: './data.json', // required 
    renderer: 'svg', // required 
    loop: true, // optional 
    autoplay: true, // optional 
})

注意，你也可以将 path 中的 JSON 数据放在 animationData 中：

JavaScript

const animation = lottieWeb.loadAnimation({
    // 动效加载到的DOM元素
    container: document.getElementById("lottie"), // 必须项
    // 包含动效的JSON文件的相对路径，也可以是绝对路径
    // 必须项，描述动效的JSON文件，一般由AE软件中导出的JSON文件
    // path: "https://lottie.host/6f4ee854-3625-4849-8985-e423a0752949/hZWZsrb0zk.json",
    // 动效渲染出来的格式，可以是svg、canvas和html
    renderer: "svg", // 必须项，除了svg选择之外还可以是canvas和html
    // 用于指定动效是否循环播放，true是循环播放，false不是循环播放
    loop: true, // 可选项
    // 指定动效是不是加载后就立即播放，true是立即播放，false不是立即播放
    autoplay: true, // 可选项
    animationData: {"v":"5.2.1","fr":25,"ip":0,"op":45,"w":130,"h":120,"nm":"猫头鹰","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"左眼球","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":25,"s":[96],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":26,"s":[0],"e":[100]},{"t":27}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[44.451,39.813,0],"e":[40.826,40.313,0],"to":[-0.60416668653488,0.08333333581686,0],"ti":[0.60416668653488,-0.08333333581686,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":8,"s":[40.826,40.313,0],"e":[40.826,40.313,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":13,"s":[40.826,40.313,0],"e":[39.951,41,0],"to":[-0.14583332836628,0.11458333581686,0],"ti":[0.14583332836628,-0.11458333581686,0]},{"t":20}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.906,0],[0,-0.906],[0.906,0],[0,0.906]],"o":[[0.906,0],[0,0.906],[-0.906,0],[0,-0.906]],"v":[[0,-1.64],[1.64,0],[0,1.64],[-1.64,0]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":46,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"左眼珠","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p667_1_0p167_0p167","t":0,"s":[44.04,41.125,0],"e":[38.978,41.5,0],"to":[-0.84375,0.0625,0],"ti":[0.84375,-0.0625,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":8,"s":[38.978,41.5,0],"e":[38.978,41.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":13,"s":[38.978,41.5,0],"e":[39.79,41.312,0],"to":[0.13541667163372,-0.03125,0],"ti":[-0.13541667163372,0.03125,0]},{"t":20}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":23,"s":[{"i":[[0,-2.022],[2.022,0],[0,2.022],[-2.022,0]],"o":[[0,2.022],[-2.022,0],[0,-2.022],[2.022,0]],"v":[[3.661,0],[0,3.661],[-3.661,0],[0,-3.661]],"c":true}],"e":[{"i":[[0,0.025],[2.022,0],[0,-0.025],[-2.022,0]],"o":[[0,-0.025],[-2.022,0],[0,0.025],[2.022,0]],"v":[[3.723,-0.107],[0.063,-0.152],[-3.598,-0.107],[0.063,-0.062]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":26,"s":[{"i":[[0,0.025],[2.022,0],[0,-0.025],[-2.022,0]],"o":[[0,-0.025],[-2.022,0],[0,0.025],[2.022,0]],"v":[[3.723,-0.107],[0.063,-0.152],[-3.598,-0.107],[0.063,-0.062]],"c":true}],"e":[{"i":[[0,-2.022],[2.022,0],[0,2.022],[-2.022,0]],"o":[[0,2.022],[-2.022,0],[0,-2.022],[2.022,0]],"v":[[3.661,0],[0,3.661],[-3.661,0],[0,-3.661]],"c":true}]},{"t":29}],"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.109803921569,0.21568627451,0.517647058824,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":79,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"右眼球","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":25,"s":[96],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":26,"s":[0],"e":[100]},{"t":27}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[20.263,41.375,0],"e":[16.826,40.75,0],"to":[-0.57291668653488,-0.10416666418314,0],"ti":[0.57291668653488,0.10416666418314,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":8,"s":[16.826,40.75,0],"e":[16.826,40.75,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":13,"s":[16.826,40.75,0],"e":[18.451,41.813,0],"to":[0.27083334326744,0.17708332836628,0],"ti":[-0.27083334326744,-0.17708332836628,0]},{"t":20}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.906,0],[0,-0.906],[0.906,0],[0,0.906]],"o":[[0.906,0],[0,0.906],[-0.906,0],[0,-0.906]],"v":[[0,-1.64],[1.64,0],[0,1.64],[-1.64,0]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":46,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"右眼珠","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p667_1_0p167_0p167","t":0,"s":[20.478,42.027,0],"e":[16.54,41.402,0],"to":[-0.65625,-0.10416666418314,0],"ti":[0.65625,0.10416666418314,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"n":"0p667_0p667_0p333_0p333","t":8,"s":[16.54,41.402,0],"e":[16.54,41.402,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"n":"0p833_0p833_0p333_0","t":13,"s":[16.54,41.402,0],"e":[18.603,41.527,0],"to":[0.34375,0.02083333395422,0],"ti":[-0.34375,-0.02083333395422,0]},{"t":20}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":23,"s":[{"i":[[0,-2.022],[2.022,0],[0,2.022],[-2.022,0]],"o":[[0,2.022],[-2.022,0],[0,-2.022],[2.022,0]],"v":[[3.661,0],[0,3.661],[-3.661,0],[0,-3.661]],"c":true}],"e":[{"i":[[0,0.025],[2.022,0],[0,-0.025],[-2.022,0]],"o":[[0,-0.025],[-2.022,0],[0,0.025],[2.022,0]],"v":[[3.723,-0.107],[0.063,-0.152],[-3.598,-0.107],[0.063,-0.062]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":26,"s":[{"i":[[0,0.025],[2.022,0],[0,-0.025],[-2.022,0]],"o":[[0,-0.025],[-2.022,0],[0,0.025],[2.022,0]],"v":[[3.723,-0.107],[0.063,-0.152],[-3.598,-0.107],[0.063,-0.062]],"c":true}],"e":[{"i":[[0,-2.022],[2.022,0],[0,2.022],[-2.022,0]],"o":[[0,2.022],[-2.022,0],[0,-2.022],[2.022,0]],"v":[[3.661,0],[0,3.661],[-3.661,0],[0,-3.661]],"c":true}]},{"t":29}],"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.109803921569,0.21568627451,0.517647058824,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"形状图层 5","sr":1,"ks":{"o":{"a":0,"k":30,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[17.5,40.18,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[-4.251,-1.829],[-1.108,-0.012],[-0.01,0],[-1.355,3.042],[0,0]],"o":[[0,0],[-1.829,4.252],[1.019,0.438],[0.01,0],[3.328,0],[0,0],[0,0]],"v":[[-6.601,-6.205],[-6.911,-5.485],[-2.523,5.524],[0.699,6.205],[0.729,6.205],[8.429,1.205],[8.739,0.475]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.250980392157,0.411764735802,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"形状图层 4","sr":1,"ks":{"o":{"a":0,"k":30,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[41.364,39.93,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[-3.261,0],[-1.096,0.476],[1.858,4.277]],"o":[[0,0],[0,0],[1.382,3.182],[1.123,0],[4.277,-1.858],[0,0]],"v":[[6.666,-6.271],[-8.834,0.459],[-8.514,1.189],[-0.765,6.271],[2.596,5.569],[6.976,-5.541]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.250980392157,0.411764735802,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"形状图层 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[29.172,41.555,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[5.231,-2.269],[0.419,-0.121],[1.783,0.472],[1.258,2.963],[0,0],[3.104,-0.895],[1.393,5.527],[-0.898,2.084],[0,0],[-6.621,-2.872],[-0.532,-0.152],[-3.228,2.544],[0,0],[0,0],[-1.632,-0.443],[-1.107,0],[-1.182,0.347],[2.009,6.931],[0.216,0.509]],"o":[[2.258,5.236],[-0.401,0.172],[-1.77,0.518],[-3.094,-0.889],[0,0],[-1.246,2.98],[-5.527,1.393],[-0.554,-2.2],[0,0],[-2.871,6.622],[0.507,0.221],[3.936,1.184],[0,0],[0,0],[1.331,1.042],[1.071,0.279],[1.232,0.003],[6.93,-2.012],[-0.157,-0.53],[0,0]],"v":[[20.311,-8.59],[14.931,4.99],[13.701,5.43],[8.271,5.5],[1.391,-0.59],[-1.129,-0.59],[-8.009,5.54],[-20.538,-1.945],[-20.009,-8.55],[-22.529,-9.64],[-15.739,7.55],[-14.179,8.11],[-2.749,5.94],[0.191,9.69],[3.071,5.91],[7.561,8.16],[10.841,8.58],[14.481,8.06],[23.391,-8.13],[22.831,-9.69]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.250980407,0.411764740944,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"形状图层 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[29,18.125,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[0.01,21.055],[28.06,8.865],[22.59,6.945],[0.01,17.945],[-22.58,6.945],[-28.05,8.865],[-1.21,20.525]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.250980392157,0.411764705882,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"形状图层 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[29,18.125,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0.949,-0.453],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-0.949,-0.453],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[0.08,15.212],[0.08,15.212],[0.08,15.212],[24.39,3.442],[24.39,1.352],[0.08,13.142],[-21.92,2.492],[-21.92,-2.408],[-0.02,8.282],[18.98,-0.988],[18.98,3.112],[20.16,1.872],[21.35,1.982],[21.35,-2.128],[24.35,-3.608],[1.45,-14.758],[-1.55,-14.758],[-24.39,-3.618],[-24.39,-3.618],[-24.39,1.292],[-24.39,1.292],[-24.39,3.362],[0.05,15.202]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.250980392157,0.411764705882,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"形状图层 6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[29.08,36.337,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[7.27,0],[2.02,-5.62],[5.42,0],[0,-8.73],[-7.27,0],[-1.6,3],[-5.41,0],[0,8.73]],"o":[[-5.42,0],[-2,-5.61],[-7.27,0],[0,8.73],[5.43,0],[1.77,3],[7.27,0],[0,-8.73]],"v":[[12.085,-15.815],[-0.005,-6.255],[-12.095,-15.785],[-25.255,0.015],[-12.095,15.805],[-0.005,10.475],[12.085,15.815],[25.255,0.015]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"头","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p667_1_0p167_0p167"],"t":17,"s":[0],"e":[-24]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":25,"s":[-24],"e":[-24]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"n":["0p833_0p833_0p333_0"],"t":29,"s":[-24],"e":[0]},{"t":35}],"ix":10},"p":{"a":0,"k":[70,56.75,0],"ix":2},"a":{"a":0,"k":[29.5,38.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":58,"h":58,"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"形状图层 13","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[81.594,92.875,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-0.563],[0,0],[0.563,0],[0,0],[0,0.563],[0,0],[-0.563,0],[0,0]],"o":[[0,0],[0,0.563],[0,0],[-0.563,0],[0,0],[0,-0.563],[0,0],[0.563,0]],"v":[[1.02,-1.54],[1.02,1.54],[0,2.56],[0,2.56],[-1.02,1.54],[-1.02,-1.54],[0,-2.56],[0,-2.56]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.109803921569,0.21568627451,0.517647058824,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"形状图层 10","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[62.5,92.875,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-0.563],[0,0],[0.563,0],[0,0],[0,0.563],[0,0],[-0.563,0],[0,0]],"o":[[0,0],[0,0.563],[0,0],[-0.563,0],[0,0],[0,-0.563],[0,0],[0.563,0]],"v":[[1.02,-1.54],[1.02,1.54],[0,2.56],[0,2.56],[-1.02,1.54],[-1.02,-1.54],[0,-2.56],[0,-2.56]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.109803921569,0.21568627451,0.517647058824,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"形状图层 12","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[79.094,92.875,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-0.563],[0,0],[0.563,0],[0,0],[0,0.563],[0,0],[-0.563,0],[0,0]],"o":[[0,0],[0,0.563],[0,0],[-0.563,0],[0,0],[0,-0.563],[0,0],[0.563,0]],"v":[[1.02,-1.54],[1.02,1.54],[0,2.56],[0,2.56],[-1.02,1.54],[-1.02,-1.54],[0,-2.56],[0,-2.56]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.109803921569,0.21568627451,0.517647058824,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"形状图层 9","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[60,92.875,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-0.563],[0,0],[0.563,0],[0,0],[0,0.563],[0,0],[-0.563,0],[0,0]],"o":[[0,0],[0,0.563],[0,0],[-0.563,0],[0,0],[0,-0.563],[0,0],[0.563,0]],"v":[[1.02,-1.54],[1.02,1.54],[0,2.56],[0,2.56],[-1.02,1.54],[-1.02,-1.54],[0,-2.56],[0,-2.56]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.109803921569,0.21568627451,0.517647058824,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"形状图层 11","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[76.594,92.875,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-0.563],[0,0],[0.563,0],[0,0],[0,0.563],[0,0],[-0.563,0],[0,0]],"o":[[0,0],[0,0.563],[0,0],[-0.563,0],[0,0],[0,-0.563],[0,0],[0.563,0]],"v":[[1.02,-1.54],[1.02,1.54],[0,2.56],[0,2.56],[-1.02,1.54],[-1.02,-1.54],[0,-2.56],[0,-2.56]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.109803921569,0.21568627451,0.517647058824,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"形状图层 8","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[57.5,92.875,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-0.563],[0,0],[0.563,0],[0,0],[0,0.563],[0,0],[-0.563,0],[0,0]],"o":[[0,0],[0,0.563],[0,0],[-0.563,0],[0,0],[0,-0.563],[0,0],[0.563,0]],"v":[[1.02,-1.54],[1.02,1.54],[0,2.56],[0,2.56],[-1.02,1.54],[-1.02,-1.54],[0,-2.56],[0,-2.56]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.109803921569,0.21568627451,0.517647058824,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"形状图层 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[69.5,78.25,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0.45],[4.035,3.4],[2.122,-0.001],[0.793,0.427],[0.901,-0.004],[0.96,1.846],[-0.121,-5.24],[0,-0.31]],"o":[[0,-0.44],[0.121,-5.275],[-0.939,1.903],[-0.901,-0.006],[-0.792,0.43],[-2.081,0.003],[-3.993,3.395],[0,0.34],[0,0]],"v":[[13.71,7.53],[13.71,6.19],[7.52,-7.53],[2.52,-4.42],[-0.06,-5.08],[-2.64,-4.42],[-7.59,-7.42],[-13.71,6.23],[-13.71,7.23]],"c":false},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.250980392157,0.411764735802,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"描边 2","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"st","c":{"a":0,"k":[0.250980392157,0.411764735802,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"描边 1","mn":"ADBE Vector Graphic - Stroke","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"形状图层 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[69.25,78.25,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-0.044,-1.842],[10.95,0],[0,13.6],[-0.274,1.821]],"o":[[0.289,1.82],[0,13.59],[-10.95,0],[0.039,-1.841],[0,0]],"v":[[19.33,-15.05],[19.83,-9.55],[0,15.05],[-19.83,-9.55],[-19.36,-15.05]],"c":false},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.250980392157,0.411764735802,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"描边 1","mn":"ADBE Vector Graphic - Stroke","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"形状图层 6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[63.5,82.875,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[0.26,1.9],[-1.91,-0.171],[-0.26,-1.9],[1.91,0.17]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.250980392157,0.411764735802,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"形状图层 7","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[75.25,82.75,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-0.26,1.9],[-1.91,0.17],[0.26,-1.9],[1.91,-0.171]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.250980392157,0.411764735802,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"形状图层 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[69.375,86.375,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[1.5,1.19],[-1.5,1.19],[-1.5,-1.19],[1.5,-1.19]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.250980392157,0.411764735802,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"形状图层 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[69.375,79.75,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[1.5,1.19],[-1.5,1.19],[-1.5,-1.19],[1.5,-1.19]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.250980392157,0.411764735802,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"形状图层 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[69.75,71.75,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[7.605,0],[0,-11.786],[-7.605,0],[0,11.785]],"o":[[-7.605,0],[0,11.785],[7.605,0],[0,-11.786]],"v":[[0,-21.34],[-13.77,0],[0,21.34],[13.77,0]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.772549079446,0.823529471603,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"形状图层 14","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[69.75,101,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[-5.223,2.34]],"o":[[0,0],[0,0],[5.223,2.34],[0,0]],"v":[[3.42,-7.975],[-3.44,-7.975],[-8.21,5.635],[8.21,5.635]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.109803929048,0.215686289469,0.517647058824,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"描边 1","mn":"ADBE Vector Graphic - Stroke","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"形状图层 16","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[118.5,60,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-48.125,33.438],[-46.062,44.125]],"c":false},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.109803929048,0.215686289469,0.517647058824,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"描边 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"形状 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"形状图层 15","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[118.5,60,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-50.125,33.125],[-51.875,44.562]],"c":false},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.109803929048,0.215686289469,0.517647058824,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"描边 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"形状 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"形状图层 17","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[118.5,60,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-80.625,33.125],[-17.25,33.125]],"c":false},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.109803929048,0.215686289469,0.517647058824,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"描边 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"形状 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"形状图层 18","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[69.75,97,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[-1.906,0],[-1.814,0.677]],"o":[[0,0],[0,0],[1.814,0.677],[1.906,0],[0,0]],"v":[[2.345,-4.428],[-2.355,-4.428],[-5.625,3.412],[0,4.428],[5.625,3.412]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.772549079446,0.823529471603,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"形状图层 20","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[39],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":6,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":15,"s":[100],"e":[0]},{"t":23}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[-3],"e":[35]},{"t":23}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":0,"s":[45.438,62.438,0],"e":[15.625,45.375,0],"to":[-4.96875,-2.84375,0],"ti":[19.5104160308838,13.5520830154419,0]},{"t":23}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[50.261,50.261,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.561,0.527],[1,0.28],[0.898,0.477],[0.28,-0.33],[-0.029,-0.231],[0,0],[0.562,-0.479],[-0.82,-0.98],[-1.28,1.06],[0.408,1.219],[0,0],[0,0],[-0.871,-0.234],[-1.149,-0.886]],"o":[[-0.93,-0.84],[-0.96,-0.336],[0,0],[-0.162,0.168],[0,0],[-0.737,0.053],[-1.27,1],[0.82,0.98],[1.044,-0.749],[0,0],[0,0],[0.871,-0.234],[1.384,0.437],[-0.317,-0.701]],"v":[[3.089,-6.46],[-0.911,-8.1],[-3.701,-9.32],[-4.181,-9.08],[-4.391,-8.45],[0.129,3.92],[-1.871,4.74],[-2.701,8.43],[1.079,8.3],[2.149,4.99],[0.584,0.691],[-2.071,-6.6],[0.589,-6.6],[4.419,-4.6]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.250980392157,0.411764735802,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"形状图层 19","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[51],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":12,"s":[100],"e":[0]},{"t":22}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[28]},{"t":15}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":10,"s":[50.25,57.25,0],"e":[26.438,35.375,0],"to":[-6.71875,-0.45833334326744,0],"ti":[5.96875,15.9583330154419,0]},{"t":22}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.561,0.527],[1,0.28],[0.898,0.477],[0.28,-0.33],[-0.029,-0.231],[0,0],[0.562,-0.479],[-0.82,-0.98],[-1.28,1.06],[0.408,1.219],[0,0],[0,0],[-0.871,-0.234],[-1.149,-0.886]],"o":[[-0.93,-0.84],[-0.96,-0.336],[0,0],[-0.162,0.168],[0,0],[-0.737,0.053],[-1.27,1],[0.82,0.98],[1.044,-0.749],[0,0],[0,0],[0.871,-0.234],[1.384,0.437],[-0.317,-0.701]],"v":[[3.089,-6.46],[-0.911,-8.1],[-3.701,-9.32],[-4.181,-9.08],[-4.391,-8.45],[0.129,3.92],[-1.871,4.74],[-2.701,8.43],[1.079,8.3],[2.149,4.99],[0.133,-0.548],[-2.071,-6.6],[0.589,-6.6],[4.419,-4.6]],"c":true},"ix":2},"nm":"路径 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.250980392157,0.411764735802,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":0,"op":75,"st":0,"bm":0}],"markers":[{"tm":8,"cm":"眼球动作","dr":0},{"tm":20,"cm":"眼球第2次动作","dr":0},{"tm":23,"cm":"眨眼动作","dr":0}]},
});

你在浏览器中可以看到相应的效果：

Demo 地址：https://codepen.io/airen/full/VwNwgyp

除了使用 AE 之外，你还可以 LottieFiles 提供的在线编辑器，你可以通过该编辑器来创建动画，并导出 Lottie-web 所需要的 JSON 文件：

URL：https://creator.lottiefiles.com/

渲染动画

前面提到过，当你在项目中引入 Lottie-web 之后，它会提供一个 loadAnimation 对象，该对象提供渲染和控制动画的相关参数：

例如：

JavaScript

const animation = lottieWeb.loadAnimation({
    // 动效加载到的DOM元素
    container: document.getElementById("lottie"), // 必须项
    
    // 包含动效的JSON文件的相对路径，也可以是绝对路径
    // 必须项，描述动效的JSON文件，一般由AE软件中导出的JSON文件
    path: "https://lottie.host/7401522f-2d8b-4049-ad18-eb0edb6af224/CE9lFrNlEH.json",
    
    // 动效渲染出来的格式，可以是svg、canvas和html
    renderer: "svg", // 必须项，除了svg选择之外还可以是canvas和html
  
    // 用于指定动效是否循环播放，true是循环播放，false不是循环播放
    loop: true, // 可选项
  
    // 指定动效是不是加载后就立即播放，true是立即播放，false不是立即播放
    autoplay: true, // 可选项
});

上面代码中的 renderer: "svg" 会将 JSON 数据渲染成 SVG 动画:

Demo 地址：https://codepen.io/airen/full/BaEaMow

要是将 renderer 设置为 "canvas" ，那么会将 JSON 数据渲染成一个 Canvas 动画：

Demo 地址：https://codepen.io/airen/full/BaEabKM

你还可以根据动画的需求来调整 loadAnimation 的参数。这里就不再花更多的时间来详细阐述每个参数的具体功能。

小结

这节课主要和大家一起探讨了 Web 开发动画存在的一些痛点。以此为着手点，探讨了 Web 动画开发的流程差异，并且深入探讨了当下开发 Web 动画的主流方式。即从设计软件中设计动画，然后直接导出所需的 Web 动画。为了让大家能更具体感，还专门向大家演示了如何基于 Lottie-web ，将 AE 设计的动画转换成在 Web 动画。