收藏
回答

lottie-miniprogram 动画 切换页面后再初始化就不动了

用lottie-miniprogram 做上拉刷新的动画效果

一开始可以动,切换页面后则无法播放动画。。。。。

回答关注问题邀请回答
收藏

4 个回答

  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    03-18

    麻烦提供能复现问题的代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    03-18
    有用
    回复 15
    查看更多(10)
  • M
    M
    04-21

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

    代码片段:

    let frameFn = function () { };
    let rid = 0;
    let canvasDom = null;
    page({
      onReady () {
          wx.createSelectorQuery().select('#canvas').node((res) => {
            const canvas = res.node;
            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({
              autoplaytrue,
              looptrue,
              animationData: openCardAnimationData,
              rendererSettings: {
                context: canvas._ctx
              }
            });
          }).exec();
        },
      onUnload () {
        // 销毁页面时 关闭动画
        canvasDom.cancelAnimationFrame(rid);
      }
    })
    
    
    04-21
    有用 2
    回复 2
    • monkey 💋
      monkey 💋
      04-23
      感谢分享,以采用此方式,解决二次渲染的问题
      04-23
      回复
    • fiveone.lwq
      fiveone.lwq
      07-27
      如果有多个lottile,rid如何保存?
      07-27
      回复
  • 星辉
    星辉
    08-30

    必现lottie-miniprogram动画不播放,无任何错误提示。

    代码片段:https://developers.weixin.qq.com/s/IrPzRZmV7ajU

    iPhone X

    iOS:13.3.1

    微信版本:7.0.15

    基础库版本:2.12.2


    复现步骤:

    1. 首页进入lottie的page,点击init

    2. 后退

    3. 再进入lottie的page,点击init

    动画不播放

    08-30
    有用 1
    回复 1
    • 星辉
      星辉
      09-10
      v1.0.11已修复
      09-10
      回复
  • monkey 💋
    monkey 💋
    发表于小程序端
    04-19
    不理了吗。。。
    04-19
    有用
    回复 1
    • M
      M
      04-20
      我也碰到了,请问您这个问题解决了嘛
      04-20
      回复
登录 后发表内容
问题标签