复杂动画方案

1. 万能的gif

   用静态png和动态gif进行切换控制动画

   优点：简单，不需要canvas绘制，没有额外资源

   缺点： ps导出会有毛边，在某些机型会有问题，动画控制切换不流畅

2. Lottie动画

   实现过程：

   1. 设计师用AE做动画，安装Bodymovin插件， 点击Windows > Extensions > Bodymovin插件，render合成动画，输出json， 具体安装看这里：airbnb.io/lottie/#/af…

2. 各平台使用lottie库对应的插件，进行绘制，详情见官网

例子：

    /** canvas 上下文 */
    const context = canvas.getContext('2d')
    /** lottie绘制动画 */
    lottie.loadAnimation({
        loop: true,
        autoplay: true,
        animationData: require('/**AE导出的*/.json'),
        rendererSettings: {
          context,
         },
      })

优点：动画高效、性能好、动画高度还原、导出的json文件小、支持暂停/切换动画

缺点：需要添加依赖库，有些图形不支持，前端组件卸载时记得销毁实例