Loren

Loren

小程序使用lottie時問題

在小程序業務中會經常使用 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();
});

此文由 Mix Space 同步更新至 xLog
原始鏈接為 https://looyank.cc/posts/shit/lottie


載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。