代码调试的过程中发现，如果第二次进入页面 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);
}
})
