In the mini-program business, JSON files provided by the UI team are often used. When using Lottie to create animations, two issues are encountered:
- The animation has jagged edges and is unclear.
- An error occurs on Windows:
TypeError: Cannot read properties of undefined (reading 'requestAnimationFrame')
.
Solutions:
- Unclear
const canvas = res.node;
const context = canvas.getContext('2d');
const { pixelRatio: dpr = 2 } = systemInfo.value;
// 56: Original image size
canvas.width = 56 * dpr;
canvas.height = 56 * dpr;
context.scale(dpr, dpr);
lottie.setup(canvas);
- Window bug
const myAnim = lottie.loadAnimation({});
// It needs to be paused when unloading or not in use
onUnload(() => {
myAnim?.pause();
});
This article is synchronized and updated to xLog by Mix Space. The original link is https://looyank.cc/posts/shit/lottie