小程序使用lottie時問題

2023年11月16日#小程序63

AI 翻譯

這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文

AI 生成的摘要

在小程序業務中使用 lottie 動畫時，遇到兩個問題：動畫不清晰和 Windows 上出現 TypeError 錯誤。解決方案包括調整畫布大小和比例，以提高動畫清晰度，並在卸載時暫停動畫以避免錯誤。

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