鸿蒙Canvas中实现图像序列的动画播放，如GIF动画？

Question

我正在开发一个鸿蒙应用，需要展示图像序列的动画播放效果，类似于GIF动画。请问使用鸿蒙Canvas是否可以实现这一功能？如果可以的话，请提供一个包含图像序列动画播放功能的代码示例。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在鸿蒙Canvas中实现图像序列的动画播放，你可以使用setInterval或requestAnimationFrame来循环绘制图像序列的每一帧。将图像序列存储在一个数组中，并在每次循环中绘制数组中的下一个图像。

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');

// 设置canvas大小
canvas.width = 400;
canvas.height = 400;

// 图像序列（假设是ImageBitmap对象的数组）
let frames = [image1, image2, image3, /* ... 更多帧 ... */];
let frameIndex = 0;
let frameInterval = 100; // 每帧之间的时间间隔（毫秒）

// 动画循环
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
    ctx.drawImage(frames[frameIndex], 0, 0, canvas.width, canvas.height);
    frameIndex = (frameIndex + 1) % frames.length; // 循环播放
}

setInterval(animate, frameInterval);

// 将canvas添加到页面中
document.body.appendChild(canvas);

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。