Lottie：让动画真的”动”起来（二）

使用案例：

著名的拼多多无限套娃动画：

支付宝中的锦鲤动画：

可以看到目前的复杂动画如果用 lottie 来实现的话可以说是非常提效的，基本引入一个动画 json 就可以解决问题，虽然设计可能要多花一点点时间，但对于我们研发来说不用在频繁的调试 css 动画，改了又改最后可能还不满意，兼容性还很好，而且很多大厂也都有很成熟的 lottie 的实践，这还在等什么呢，赶紧用起来。

动态更新

说完简单的使用，我们来看一下实际项目中的进阶使用：

产品：这个动画里面的价格是接口下发的，不能写死……

研发：好好好，不就是动态的吗，好说！

上面的场景我们在需求中肯定很常见，那么如何让动画中的文案做到动态更新呢？

这里我们就先要了解一下 lottie 使用的 json 是通过设计软件 AE（Adobe After Effects）输出的，那这里就必须要设计师配置配合我们来输出 json 文件，在 AE 中使用bodymovin插件导出 json 时需要注意不要勾选 Glyphs，最后渲染的动画要使用矢量图才能够做到动态更新

此外，将需要更新的文案，让设计师在 AE 中添加源名称和图层名称

以上准备工作做好之后，还需要下载一个 lottie-api 的 npm 包，更新文案主要靠它来操作

npm i lottie-api

更新文案的 demo

import React, { useEffect } from "react";
import lottie from "lottie";
import LottieAPI from "lottie-api";
import Json from "./data.json";

function App() {
  useEffect(() => {
    const animation = lottie.loadAnimation({
      name: "root",
      container: document.querySelector(".root"),
      renderer: "svg",
      loop: false,
      autoplay: true,
      animationData: Json, //json数据
    });
 
    animation.addEventListener("DOMLoaded", function () {
      const animationAPI = LottieAPI.createAnimationApi(animation);
      var layers = animationAPI.getKeyPath("textnode,comp1");
      layers.getElements()[0].setText("xxx");
    });
  }, []);

  return <div className="root" />;
}

export default App;

上述代码首先进行动画的加载，监听 animation 的 DOMLoaded 事件，保证此时动画处于加载完的状态。然后调用 lottie-api 中的getKeyPath方法将图层名称和源名称传入，最后找到相应的元素后进行setText操作即可进行文案更新。

点击事件

动态更新的功能做完之后，产品又开始提需求了

产品：我想要点击某个动画中的按钮的时候可以有 xxx 的交互效果……

研发：行行行，你是产品你说了算

点击的功能其实也很简单，原理跟我们使用 js 点击事件一样，先获取元素，然后监听点击事件就可以了，那怎么可以获取到元素呢，这时候就又需要设计师来帮忙处理了，渲染动画时在图层后面加#xxx，对应的元素渲染出来后就会带 xxx 的 id 属性，这样我们就可以通过 document.getElementById("xxx")来获取元素了。

以下是点击事件的 demo：

import React, { useEffect } from "react";
import lottie from "lottie";
import Json from "./data.json";

function App() {
  useEffect(() => {
    const anim = lottie.loadAnimation({
      name: "root",
      container: document.querySelector(".root"),
      renderer: "svg",
      loop: false,
      autoplay: true,
      animationData: Json, //json数据
    });
    
    anim.addEventListener("DOMLoaded", function () {
      const button = document.getElementById("J_txt");
      //监听元素的点击事件
      button.addEventListener("click", () => {
        console.log("触发了点击事件！！！");
      });
    });
  }, []);
  
  return <div className="root" />;
}

export default App;

回调事件

产品：我又来提需求了，整个动画结束之后，需要页面进行 xxx 的操作，这个功能是必须要的……

研发：你事儿可真多，xxxxxx

再经过了一顿输出之后，只在代码中添加了以下改动，就完美的实现了所有需求

import React, { useEffect } from "react";
import Json from "./data.json";

function App() {
  useEffect(() => {
    const anim = lottie.loadAnimation({
      name: "root",
      container: document.querySelector(".root"),
      renderer: "svg",
      animationData: Json,
    });

    anim.addEventListener("complete", () => {
      console.log("动画结束");
    });
  }, []);

  return <div className="root" />;
}

export default App;

总结：

除了上述讲的点击、完成回调事件等，还有很多的事件都可以进行监听，如：loopComplete(循环播放结束时)、data_ready(动画 json 文件加载完毕)、destroy(动画销毁时)……，详细的大家可以在 lottie 官方进行查阅。