最近发现了动画库 lottie

引言：Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile! Lottie Docs

作用：

Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovin导出为json格式），支持web、ios、android和react native。在web侧，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制到我们页面中。

优点：

Lottie方法方案是由设计师出动画，导出为json，给前端播放。所以，使用Lottie方案的好处在于：

• 动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；
• 前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；
• 设计制作动画，前端展现动画，专业人做专业事，分工合理；
• 卖家秀即买家秀，还原程度百分之百；
• 使用lottie方案，json文件大小会比gif文件小很多，性能也会更好。

原理：

在Adobe After Effects中，动画是由一个一个的图层组成的，在相应的图层上面添加一些变换(例如：缩放、移动等)，这变成为了动画。 lottie-web提供了很多操控动画的方法和事件，基本可以满足对动画进行控制的需求。

play: 播放动画
stop: 停止播放动画
pause: 暂停动画
goToAndStop: 跳到某一帧动画，并停止
setDirection: 设置播放方向
setSpeed: 设置播放速度


onComplete: 动画播放完成触发
onLoopComplete: 当前循环播放完成触发
onEnterFrame: 播放一帧动画的时候触发
onSegmentStart: 开始播放一个动画片段的时候触发

使用示例：

    <div ref="pokersLottie" />

    /**
     * 弹窗展示
     * @param params.awardImg 奖品图片
     * @param params.popType 弹窗类型
     * @param params.labelText 文本
     * @param params.goldCount 金币数量
     */
    init(params = {}) {

      this.awardImg = params.awardImg;
      this.popType = params.popType;
      this.labelText = params.labelText;
      this.goldCount = params.goldCount;
      this.popShow = false;
      this.visible = true;
      if (params.popType === 'award') {
        this.lottieShow = true;
        this.lottieLoad({
          animationOptions: {
            container: this.$refs.pokersLottie,
            path: 'https://Activity/poker/data.json',
            renderer: 'svg',
            autoPlay: true,
            loop: false,
          },
        });
        setTimeout(() => {
          this.lottieShow = false;
          this.popShow = true;
          this.$refs.pokersLottie.innerHTML = '';
        }, 1500);
      }
    },