微信小程序 页面重载 Lottie动画不执行问题

2020-05-27  本文已影响0人  摘叶先生

代码调试的过程中发现,如果第二次进入页面 Lottie动画不执行,也就是requestAnimationFrame不触发了,然后发现第一次页面销毁时动画不会结束,也就是lottie不能自动销毁requestAnimationFrame回调里的动画,于是我手动收集了动画id,在页面onUnload时cancelAnimationFrame,以为这样问题能解决,结果不行,于是手动收集上一次动画的回调传入,问题解决。

代码片段:

let frameFn = function () { };
let rid = 0;
let canvasDom = null;
page({
  onReady () {
      wx.createSelectorQuery().select('#canvas').node((res) => {
        const canvas = res[0].node;
        canvas.width = 240
        canvas.height = 240
        const requestAnimationFrame = canvas.requestAnimationFrame;
        canvas.requestAnimationFrame = function () {
          frameFn = arguments[0];
          rid = requestAnimationFrame.apply(canvas, arguments);
          return rid;
        }
        // 页面第二次打开时动画默认不会开始,这里需要手动调用一次动画
        canvas.requestAnimationFrame(frameFn);
        canvasDom = canvas;
        lottie.setup(canvas);
        lottie.loadAnimation({
          autoplay: true,
          loop: true,
          animationData: require('./ani.js'),
          rendererSettings: {
            context: canvas._ctx
          }
        });
      }).exec();
    },
  onUnload () {
    // 销毁页面时 关闭动画
    canvasDom.cancelAnimationFrame(rid);
  }
})
上一篇下一篇

猜你喜欢

热点阅读