收藏
回答

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

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

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

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

5 个回答

  • 臭卖鱼的
    臭卖鱼的
    2020-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);
      }
    })
    
    
    2020-04-21
    有用 2
    回复 5
    • monkey 💋
      monkey 💋
      2020-04-23
      感谢分享,以采用此方式,解决二次渲染的问题
      2020-04-23
      回复
    • fiveone.lwq
      fiveone.lwq
      2020-07-27
      如果有多个lottile,rid如何保存?
      2020-07-27
      回复
    • A码元彭真[小程序开发]
      A码元彭真[小程序开发]
      2020-12-18
      感谢感谢,这个问题困扰了好多天了,一天无法解决
      2020-12-18
      回复
    • 测不准'  '&a=3
      测不准' '&a=3
      2021-09-30
      自定义组件中使用报错
      2021-09-30
      回复
    • 测不准'  '&a=3
      测不准' '&a=3
      2021-09-30回复测不准' '&a=3
      是小游戏支持,小程序不支持原因么
      2021-09-30
      回复
  • 星辉
    星辉
    2020-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

    动画不播放

    2020-08-30
    有用 1
    回复 1
    • 星辉
      星辉
      2020-09-10
      v1.0.11已修复
      2020-09-10
      回复
  • Jack Hui
    Jack Hui
    星期六 19:27

    小程序 lottie-miniprogram 1.0.12版本不支持文本fonts,看了一下是document.createelement('span')返回为null,问一下这个能修复么?

    星期六 19:27
    有用
    回复
  • monkey 💋
    monkey 💋
    发表于小程序端
    2020-04-19
    不理了吗。。。
    2020-04-19
    有用
    回复 1
    • 臭卖鱼的
      臭卖鱼的
      2020-04-20
      我也碰到了,请问您这个问题解决了嘛
      2020-04-20
      回复
  • 是小白啊
    是小白啊
    2020-03-18

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

    2020-03-18
    有用
    回复 15
    • monkey 💋
      monkey 💋
      2020-03-18
      https://developers.weixin.qq.com/s/xl2g5WmH7Ofv
      2020-03-18
      回复
    • monkey 💋
      monkey 💋
      2020-03-18
      开发者工具上没问题,真机效果跟上传到体验版都有这个问题
      2020-03-18
      回复
    • 是小白啊
      是小白啊
      2020-03-19回复monkey 💋
      测试了下,iPhonexr,微信版本:7.0.11,切换页面后是可以正常动画的,你的客户端版本是?
      2020-03-19
      回复
    • monkey 💋
      monkey 💋
      2020-03-19回复是小白啊
      就是7.0.11,我体验版小程序上能复现这个问题,能定位下吗?
      2020-03-19
      回复
    • monkey 💋
      monkey 💋
      2020-03-19回复是小白啊
      是有用wx:if做动态渲染的,代码片段上没写
      2020-03-19
      回复
    查看更多(10)
登录 后发表内容
问题标签