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

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

作者: 摘叶先生 | 来源:发表于2020-05-27 11:06 被阅读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);
      }
    })
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/dsziahtx.html