序言

前端现在炫酷的动效满天飞，咱们用transition、transform、animation等已经很难满足UED团队的需求了，目前有两个主流的动画库，lottie和svga，帮助我们减少了大量的时间在捣鼓动效上。我们只需要请我们的设计同学从 Adobe After Effects 中设计好动效后，导出成json格式或者svga格式提供给我们即可。本文主要是讲一下这两个库的用法以及他们各自的优缺点。

lottie-web

lottie-web 是 Airbnb 开源的项目，有较大的社区支持，目前是最主流的web端动画库。

工作流程：

简单用法：

import { useCallback } from "react";
import lottie from "lottie-web";
import banner from "./banner.json"; // 设计提供的json文件

function App() {
  let instance;
  let speed = 1;

  const container = useCallback((node) => {
    // 调用loadAnimation加载动画，并返回动画实例
    instance = lottie.loadAnimation({
      container: node, // 容器
      renderer: "svg", // 通过svg或canvas渲染
      loop: true, // 是否循环
      autoplay: true, // 是否自动播放
      animationData: banner, // 动画文件
    });

    // 非循环动画完成后回调
    instance.onComplete = () => {
      console.log('onComplete')
    }

    // 循环动画每次完成后回调
    instance.onLoopComplete = () => {
      console.log('onLoopComplete')
    }
  }, []);

  const play = () => {
    instance.play();
  };

  const pause = () => {
    instance.pause();
  };

  const stop = () => {
    instance.stop();
  };

  const fast = () => {
    speed++;
    instance.setSpeed(speed);
  };

  const slow = () => {
    speed--;
    instance.setSpeed(speed);
  };

  const normal = () => {
    speed = 1;
    instance.setSpeed(speed);
  };

  const destroy = () => {
    instance.destroy();
  };

  return (
    <div>
      <div ref={container}></div>
      <button onClick={play}>播放</button>
      <button onClick={pause}>暂停</button>
      <button onClick={stop}>停止</button>
      <button onClick={fast}>加速</button>
      <button onClick={slow}>减速</button>
      <button onClick={normal}>正常速</button>
      <button onClick={destroy}>销毁</button>
    </div>
  );
}

export default App;

用法很简单，效果也非常的不错，缺点是不论是库的大小还是json文件的大小都比较大。

svga

svga是由国人开发的，可能是由于没有背靠大厂的关系，不管是在国内还是国际影响力都比较小，也没有什么社区支持。

那么为什么要选svga呢？svga官网是这么说的：

对开发者友好 便捷的 SDK 使得 SVGA 可运行在不同平台上，集成步骤轻松简单。

对设计师友好 你可以使用 After Effects 或是 Animate(Flash) 进行动画设计，SVGA 可以支持其中的大部分效果，设计师使用导出工具即可生成动画文件。

性价比更高 动画文件体积更小，播放资源占用更优，动画还原效果更好。

工作流程：

相较于lottie，多了一步 parser 解析的过程，文档写的也不太清晰，对于开发者友好这一点略逊于lottie。

对于设计师友好这一点呢，我也问了设计同学，有些特效的支持度是不如lottie的，越复杂的动画效果就越差一点。

svga真正的优势在于性价比高，库的体积大约是lottie的1/4，动画文件的体积大约是lottie的1/3，cpu占用率大约是lottie的1/3。所以在追求高性能的场景，例如网络直播的礼物特效，用svga是一个更优的选择。

简单用法：

import { useCallback } from "react";
import { Parser, Player } from "svga";
import data from "./data.svga"; // 设计提供的svga文件

function App() {
  let player;

  const container = useCallback(async (node) => {
    if (node) {
      const parser = new Parser(); // 创建解析器
      const svga = await parser.load(data); // 解析svga文件
      player = new Player(node); // 创建播放器
      await player.mount(svga); // 播放器加载svga
    }
  }, []);

  const start = () => {
    player.start();
  };

  const pause = () => {
    player.pause();
  };

  const resume = () => {
    player.resume();
  };

  const stop = () => {
    player.stop();
  };

  const clear = () => {
    player.clear();
  };

  const destroy = () => {
    player.destroy();
  };

  return (
    <div>
      {/* 仅支持canvas作为容器 */}
      <canvas ref={container} style={{ width: "100%" }}></canvas>
      <button onClick={start}>播放</button>
      <button onClick={pause}>暂停</button>
      <button onClick={resume}>重新播放</button>
      <button onClick={stop}>停止</button>
      <button onClick={clear}>清空</button>
      <button onClick={destroy}>销毁</button>
    </div>
  );
}

export default App;