代碼調(diào)試的過程中發(fā)現(xiàn)业筏，如果第二次進入頁面 Lottie動畫不執(zhí)行黔攒，也就是requestAnimationFrame不觸發(fā)了旨巷，然后發(fā)現(xiàn)第一次頁面銷毀時動畫不會結束，也就是lottie不能自動銷毀requestAnimationFrame回調(diào)里的動畫尿赚，于是我手動收集了動畫id散庶，在頁面onUnload時cancelAnimationFrame蕉堰，以為這樣問題能解決，結果不行督赤，于是手動收集上一次動畫的回調(diào)傳入嘁灯，問題解決。
代碼片段：
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;
}
// 頁面第二次打開時動畫默認不會開始躲舌，這里需要手動調(diào)用一次動畫
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);
}
})
