在web中使用Lottie

首先，获取 bodymovin 播放器的 javascript 库。可以通过script标签引入:

<script src="js/bodymovin.js" type="text/javascript"></script>
//  OR
<script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>

或者通过 npm / bower 方式引入：

npm install lottie-web
//  OR
bower install lottie-web

Lottie初始化

调用 lottie.loadAnimation ()来启动动画:

• animationData: 导出动画数据的对象
• path: 动画对象的相对路径(animationData 和 path 是互斥的)
• loop: true / false / number 动画循环播放控制
• autoplay: true / false 是否自动播放
• name: 动画名称，供将来参考
• renderer: ‘svg’ / ‘canvas’ / ‘html’ 设置渲染器的类型
• container: 用于渲染动画的 dom 元素

它返回的动画实例，您可以控制播放，暂停，setSpeed 等。

lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

Lottie常用实例方法

• anim.play() — 开始播放动画
• anim.stop() — 停止动画
• anim.pause() — 暂停动画
• anim.setSpeed(speed) — 设置播发速度 (1 是正常速度)
• anim.goToAndStop(value, isFrame) — 播放到什么时机停止，第一个参数指的是时间或帧数，第二个参数表示第一个参数是否为帧数
• anim.goToAndPlay(value, isFrame) — 到指定时机进行播放，第一个参数指的是时间或帧数，第二个参数表示第一个参数是否为帧数

Lottie常用Events事件

• complete 完成
• loopComplete
• configready (when initial config is done) Config ready (完成初始配置后)
• dataready (when all parts of the animation have been loaded) Data ready (动画的所有部分都已加载)
• DOMLoaded (when elements have been added to the DOM) DOMLoaded (向 DOM 添加元素时)
• destroy

更多相关使用问题请参考官方文档。— lottie文档

H5项目中Lottie组件使用指南

组件相关代码

function Lottie(props) {
  const { options, initCallBack, className, events } = props;
  const containerDom = useRef(null);
  const lottieRef = useRef(null);
  useEffect(() => {
    lottieRef.current = lottie.loadAnimation({
      container: containerDom.current,
      ...options
    });
    (events || []).forEach(({ eventName, cbFun }) => {
      lottieRef.current.addEventListener(eventName, cbFun);
    });
    initCallBack && initCallBack(lottieRef.current);
    return () => {
      (events || []).forEach(({ eventName, cbFun }) =>
        lottieRef.current.removeEventListener(eventName, cbFun)
      );
    };
  }, [initCallBack, lottieRef, options, events]);
  return <div ref={containerDom} className={className}></div>;
}

Lottie组件参数

• options — Lottie动画配置参数，等同于 lottie.loadAnimation 方法参数
• className —组件样式类名；
• initCallBack —Lottie动画生成成功回调，回调参数为Lottie实例，可用户调用其相关方法；
• events —接收一个对象数组用于监听Lottie相关事件，每个对象分别有eventName事件名称，和cbFun事件回调函数2个参数

具体使用方式可以参考下面案例代码：

function Home(props) {
  const lottieRef = useRef({});
  const play = () => {
    lottieRef.current.play();
  };
  const stop = () => {
    lottieRef.current.stop();
  };
  const pause = () => {
    lottieRef.current.pause();
  };
  return (
    <div className="page-home">
      <Lottie
        className="lottie"
        initCallBack={e => (lottieRef.current = e)}
        events={[
          {
            eventName: 'data_ready',
            cbFun: () => console.log('animation data has loaded------')
          },
          {
            eventName: 'DOMLoaded',
            cbFun: () => console.log('animation data has DOMLoaded------')
          }
        ]}
        options={{
          renderer: 'svg',
          loop: true,
          autoplay: true,
          path: 'https://static.fenxianglife.com/ui/h5/loader.json'
        }}
      />
      <div className="btn" onClick={play}>
        开始
      </div>
      <div className="btn" onClick={stop}>
        结束
      </div>
      <div className="btn" onClick={pause}>
        暂停
      </div>
    </div>
  );
}