Issues with using Lottie in mini programs

Nov 16, 2023#小程序63

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

In the context of using JSON files from UI designers for animations with Lottie in a mini-program, two main issues were encountered: unclear animations with jagged edges and a TypeError on Windows related to `requestAnimationFrame`. To address the clarity issue, the canvas dimensions were adjusted based on the device's pixel ratio, ensuring better resolution. For the Windows bug, it was suggested to pause the animation when unloading or not in use to prevent errors. This content was updated by Mix Space and has an original link.

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