记一次在Taro开发的微信小程序中使用lottie动画的经验

前景提要

最近在做公司项目的时候，看到移动端开发用的小图标有动态效果，非常好玩了解到是使用lottie进行实现的，这个东西以前有看到过对应的插件库，但是一直没有时间做研究，趁着这个五一就抽一天时间，去图书馆借了一本讲AE的书，跟着网上的教程加入了一个lottie动画到小程序中去。在此分享一下，希望各位大佬有更好的处理方式可以一起沟通交流。

lottie相关库

相关库: 
[lottie-web](https://github.com/airbnb/lottie-web)
[lottie-miniprogram](https://github.com/wechat-miniprogram/lottie-miniprogram)
[犸良](https://design.alipay.com/emotion)

lottie-web是airbnb开发的用于在web，ios，android端使用lottie动画的开源库，在AE中进行设计后的动画通过安装在AE中的Bodymovin插件导出对应的json，就可以根据官方文档在使用此库的位置使用动画。

lottie-miniprogram官方小程序文档中提供的用于在小程序中使用的lottie库。

犸良。蚂蚁设计服务平台，如果不具备AE开发能力，没有相关的开发资源，可以通过此平台，快速创建使用一些简单通用的lottie动画。

小程序实现

<!-- 在小程序中通过canvas进行lottie元素的绘制 -->
<canvas id="c1" type="2d" style="display: inline-block; width: 300px; height: 300px;"></canvas>

// lottie-miniprogram插件中提供的小程序代码实现片段
wx.createSelectorQuery().selectAll('#c1').node(res => {
  const canvas = res[0].node
  const context = canvas.getContext('2d')

  canvas.width = 300
  canvas.height = 300

  lottie.setup(canvas)
  this.ani = lottie.loadAnimation({
    loop: true,
    autoplay: true,
    animationData: require('../json/catrim.js'),
    rendererSettings: {
      context,
    },
  })
  this._inited = true; // 用于控制当前 
}).exec()

Taro实现

注意事项：

1. 因为小程序中不支持预加载lottie图像(didShow的时候不能动态让canvas加载lottie动画，需要进行对应的事件操作之后再进行加载，所以这里使用一个Icon进行遮罩)，预加载之前显示这个Icon，动画加载完成之后开始执行的时候取消，这个Icon最好能取到动画的首帧图，或者是处于lottie动画某个关键帧的图片，根据场景来确定。
2. Taro中不需要通过单独在内部设置canvas的width和height，来设置lottie动画的dpr，Taro中的Canvas组件会自动进行适配。

<View>
	<AtIcon value="heart-2" size="20" color="#ccc" />
	<Canvas id=“canvas” type="2d" />
</View>

Taro.createSelectorQuery().select('#canvas').node((res: any) => {
  const canvas = res.node;
  const context = canvas.getContext('2d');
  lottie.setup(canvas);
  likeBtn = lottie.loadAnimation({
    rendererSettings: {
      context
    },
    loop: false,
    autoplay: false,
    animationData: require('./like.json')
  });
}).exec()

遇到的问题

1. lottie动画在微信小程序中不能初始就渲染，目前只能采用另一个元素来提前占位的方式。
2. 在Taro构建的小程序中，比如点赞功能，可能存在多次点击频繁切换lottie动画的播放和停止的状态，可能导致动画显示的状态不一致，这里目前我使用防抖函数来进行处理，在单位时间之内不能频繁点击切换来进行处理。

更新2021-5-13

解决问题1. 初始不能直接进行渲染，可以设置一个定时器，等待页面渲染完成之后，可以正常进行元素的渲染。

如果有同行有更好的处理方式，希望能一起分享，虚心求教。