【HarmonyOS NEXT】控制 WebP 格式动图播放次数的实现方案

一、配景

在开发过程中，我们大概会碰到必要控制 WebP 格式动态图播放次数的需求。比方，某些场景下只必要动图播放一次，而不是循环播放。然而，使用原生组件（如 Image 或 ImageAnimator）时，WebP 动图会被当作寻常图片处理处罚，无法直接控制播放次数。本文将先容两种办理方案：使用官方原生 API ImageAnimator 组件和使用第三方插件 ImageKnife。
二、实现方式

2.1 使用官方原生 API - ImageAnimator 组件
2.2 使用第三方插件 - ImageKnife
三、使用 ImageAnimator 组件实现

官方文档指引👉：文档中心
3.1 办理思绪

ImageAnimator 组件默认将 WebP 动图作为寻常图片处理处罚，无法直接控制播放次数。为了实现播放次数的控制，我们必要将 WebP 动图分析为多帧图片，然后将这些帧作为 ImageAnimator 的输入，从而实现对播放次数的准确控制。
3.2 示例代码

以下是使用 ImageAnimator 组件实现 WebP 动图播放一次的核心代码：

1. import { image } from '@kit.ImageKit';
3. @Entry
4. @Component
5. struct ImageAnimatorExample {
6.   @State state: AnimationStatus = AnimationStatus.Initial; // 控制动画状态
7.   imageFrames: Array<ImageFrameInfo> = []; // 存储解析后的帧信息
8.   isSelected: boolean = false; // 控制点击状态
10.   async aboutToAppear() {
11.     // 解析 WebP 动图，获取帧信息
12.     this.imageFrames = await this.getImageFrameInfoFromMedia($r('app.media.duck'));
13.   }
15.   build() {
16.     Column({ space: 10 }) {
17.       // ImageAnimator 组件
18.       ImageAnimator()
19.         .images(this.imageFrames) // 设置帧信息
20.         .state(this.state) // 设置动画状态
21.         .iterations(1) // 设置播放次数为 1
22.         .width(400)
23.         .height(400)
24.         .margin({ top: 100 })
25.         .onClick(() => {
26.           // 点击图片，开始播放动画
27.           this.isSelected = true;
28.           this.state = AnimationStatus.Running;
29.         });
31.       // 重置按钮
32.       Button('Reset')
33.         .onClick(() => {
34.           // 点击按钮，停止动画并重置状态
35.           this.isSelected = false;
36.           this.state = AnimationStatus.Stopped;
37.         });
38.     }
39.     .width('100%')
40.     .height('100%');
41.   }
43.   // 解析 WebP 动图，获取帧信息
44.   private async getImageFrameInfoFromMedia(resource: Resource) {
45.     // 获取 WebP 文件的二进制数据
46.     let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({
47.       bundleName: resource.bundleName,
48.       moduleName: resource.moduleName,
49.       id: resource.id,
50.     });
52.     // 创建 ImageSource 对象
53.     let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength));
55.     // 获取所有帧的 PixelMap
56.     let createPixelMap: Array<image.PixelMap> = await imageSource.createPixelMapList({
57.       desiredPixelFormat: image.PixelMapFormat.RGBA_8888,
58.     });
60.     // 获取每帧的延迟时间
61.     let delayList = await imageSource.getDelayTimeList();
62.     await imageSource.release();
64.     // 构建帧信息数组
65.     let imageFrameInfoArray: Array<ImageFrameInfo> = [];
66.     for (let i = 0; i < createPixelMap.length; i++) {
67.       imageFrameInfoArray.push({
68.         src: createPixelMap[i],
69.         duration: delayList[i],
70.       });
71.     }
73.     return imageFrameInfoArray;
74.   }
75. }

复制代码

3.3 实现效果

• 点击“Reset”按钮后，动画克制并重置状态展示图片。
  
• 点击图片后，动图开始播放，且只播放一次。
  

   图2

四、使用第三方插件 ImageKnife

4.1 办理思绪

ImageKnife 是一个功能强盛的第三方插件，支持对动图的精致控制，包罗播放次数、播放状态等。通过 ImageKnife，我们可以更简朴地实现 WebP 动图的播放控制。
4.2 三方库先容及安装

4.2.1 简介：

这是专门为OpenHarmony打造的一款图像加载缓存库，致力于更高效、更轻巧、更简朴
entry/src/main/ets/pages/ImageAnimatorPage.ets · OpenHarmony-TPC/ImageKnife - Gitee.com
4.2.2 安装：

1. ohpm i @ohos/imageknife

复制代码

4.3 示例代码

以下是使用 ImageKnife 实现 WebP 动图播放的核心代码：

1. import { AnimatorOption, ImageKnifeAnimatorComponent } from '@ohos/imageknife';
3. @Entry
4. @Component
5. struct ImageAnimatorExample {
6.   @State animatorOption: AnimatorOption = {
7.     state: AnimationStatus.Running, // 动画状态
8.     iterations: 3, // 播放次数
9.   };
11.   build() {
12.     Column() {
13.       // ImageKnifeAnimatorComponent 组件
14.       ImageKnifeAnimatorComponent({
15.         imageKnifeOption: {
16.           loadSrc: $r('app.media.duck'), // 加载 WebP 动图
17.         },
18.         animatorOption: this.animatorOption, // 设置动画选项
19.       })
20.         .width(300)
21.         .height(300)
22.         .backgroundColor(Color.Orange)
23.         .margin({ top: 30 });
24.     }
25.     .width('100%')
26.     .height('100%');
27.   }
28. }

复制代码

4.4 实现效果

• 动图主动开始播放，控制播放3次。
  
• 通过 animatorOption 可以机动控制播放次数和状态。
  

   图1
   🚀🚀🚀  踩坑不易，还渴望各位大佬支持一下
  📃 鸿蒙土拨鼠充电开源项目：
  ✍GitHub开源项目所在👉：https://github.com/cheinlu/groundhog-charging-system
  📃 鸿蒙土拨鼠大理石开源项目
  ✍GitHub开源项目所在👉：https://github.com/cheinlu/HarmonyOS-groundhog-marble-system
  末了：👏👏😊😊😊👍👍