最近發現了動畫庫 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);
      }
    },