小程序
小游戏
企业微信
微信支付
扫描小程序码分享
用lottie-miniprogram 做上拉刷新的动画效果
一开始可以动,切换页面后则无法播放动画。。。。。
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
代码调试的过程中发现,页面销毁时动画不会结束,也就是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({ autoplay: true, loop: true, animationData: openCardAnimationData, rendererSettings: { context: canvas._ctx } }); }).exec(); }, onUnload () { // 销毁页面时 关闭动画 canvasDom.cancelAnimationFrame(rid); } })
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
必现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
动画不播放
麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
代码调试的过程中发现,页面销毁时动画不会结束,也就是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({ autoplay: true, loop: true, animationData: openCardAnimationData, rendererSettings: { context: canvas._ctx } }); }).exec(); }, onUnload () { // 销毁页面时 关闭动画 canvasDom.cancelAnimationFrame(rid); } })
必现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
动画不播放
麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)