【lottie】动画

lottie官网
http://airbnb.io/lottie/#/

动画裁剪
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/preserveAspectRatio

demo

 this.lottie = lottie.loadAnimation({
            container: document.getElementById('lottieBox'),
            renderer: 'svg',
            loop: false,
            autoplay: true,
            animationData: animation, // 动画json文件地址import导入
            assetsPath: this.assetsPath + this.curIndex + '/',  // 动画图片地址前缀最好用绝对路径包含域名
             rendererSettings: {
              context: '', // the canvas context
              scaleMode: 'noScale',
              clearCanvas: false,
              progressiveLoad: false,
              hideOnTransparent: true,
              preserveAspectRatio: 'xMinYMax'  // 动画裁剪方式
            },
            renderConfig: {
              viewBoxOnly:  true
            }
      })

动画播放

this.lottie.play();

动画暂停

 this.lottie.pause();