小程序使用lottie时问题

小程序使用lottie时问题

Tags
调优
小程序
技术
Published
November 16, 2023
Author
yakiisama
AI summary
在小程序业务中会经常使用 UI 同学给的 json 文件,使用 lottie 做成动画时,遇到两个问题:
  • 动画有齿痕,不清晰
  • windows 上会报错,TypeError: Cannot read properties of undefined (reading 'requestAnimationFrame')
 
解决方案:
  • 不清晰
const canvas = res.node; const context = canvas.getContext('2d'); const { pixelRatio: dpr = 2 } = systemInfo.value; // 56: 图片原本尺寸 canvas.width = 56 * dpr; canvas.height = 56 * dpr; context.scale(dpr, dpr); lottie.setup(canvas);
  • window bug
const myAnim = lottie.loadAnimation({}); // 卸载或者不使用的时候需要暂停 onUnload(() => { myAnim?.pause(); });