HarmonyOS 鸿蒙Next中循环播放

HarmonyOS 鸿蒙Next中循环播放 如何实现Image组件中GIF动图循环播放

5 回复

  • 方案一：制作GIF时设置循环次数（推荐）。
    利用图像编辑工具（如Photoshop、在线工具）在导出GIF时直接设置循环属性，修改循环次数后的GIF图直接加载即可。

  • 方案二：可通过三方库[@ohos/gif-drawable](https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fgif-drawable)设置轮播次数。

import { GIFComponent, ResourceLoader } from '[@ohos](/user/ohos)/gif-drawable';
import { resourceManager } from '@kit.LocalizationKit';
@Entry
@Component
struct SetGifPlayOne {
  @State model: GIFComponent.ControllerOptions = new GIFComponent.ControllerOptions();
  // 是否自动播放
  @State gifAutoPlay: boolean = true;
  // 重置gif播放，每次取反都能生效
  @State gifReset: boolean = true;
  // getHostContext方法需通过类型断言将结果强制转换为Context，否则编译报错
  private context: Context = this.getUIContext().getHostContext() as Context;
  resourceManager: resourceManager.ResourceManager = this.context.resourceManager;
  async aboutToAppear() {
    this.gifAutoPlay = false;
    this.model.destroy();
    let modelx = new GIFComponent.ControllerOptions();
    modelx.setScaleType(GIFComponent.ScaleType.FIT_CENTER)
      .setSpeedFactor(1)
      .setOpenHardware(true);
    // 此处'Giftest'仅作示例，请开发者自行替换。
    ResourceLoader.loadMedia($r('app.media.Giftest').id, this.context).then((buffer) => {
      modelx.loadBuffer(buffer, (error) => {
        if (error) {
          console.error(`loadMediaByWorker error = ${error}`);
        }
        console.info('loadMedia parsing successfully callback drawing');
        this.gifAutoPlay = true;
        this.model = modelx;
      });
    });
  }
  build() {
    RelativeContainer() {
      GIFComponent({ model: $model, autoPlay: $gifAutoPlay, resetGif: $gifReset })
        .width(200)
        .height(200)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        });
    }
    .backgroundColor(0xF1F3F5)
    .height('100%')
    .width('100%');
  }
}

注意：上文代码示例是循环播放，如果要设置固定播放次数，比如3次，可以参照如下实现：

// 在setLoopFinish回调中判断达到播放次数后就关闭自动播放
modelx.setLoopFinish(() => {
  this.gifLoopCount++;
  if (this.gifLoopCount > 3) {
    this.gifAutoPlay = false;
  }
});

更多关于HarmonyOS 鸿蒙Next中循环播放的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


如何设置Image组件中GIF动图播放次数

解决方案

  • 方案一：制作GIF时设置循环播放（推荐）。 利用图像编辑工具（如Photoshop、在线工具）在导出GIF时直接设置循环属性，修改为循环播放的GIF图直接加载即可。

  • 方案二：可通过三方库[@ohos/gif-drawable](https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fgif-drawable)设置循环播放。

import { GIFComponent, ResourceLoader } from '[@ohos](/user/ohos)/gif-drawable';
import { resourceManager } from '@kit.LocalizationKit';

@Entry
@Component
struct SetGifPlayOne {
  @State model: GIFComponent.ControllerOptions = new GIFComponent.ControllerOptions();
  // 是否自动播放
  @State gifAutoPlay: boolean = true;
  // 重置gif播放，每次取反都能生效
  @State gifReset: boolean = true;
  // getHostContext方法需通过类型断言将结果强制转换为Context，否则编译报错
  private context: Context = this.getUIContext().getHostContext() as Context;
  resourceManager: resourceManager.ResourceManager = this.context.resourceManager;

  async aboutToAppear() {
    this.gifAutoPlay = false;
    this.model.destroy();
    let modelx = new GIFComponent.ControllerOptions();
    modelx.setScaleType(GIFComponent.ScaleType.FIT_CENTER)
      .setSpeedFactor(1)
      .setOpenHardware(true);
    // 此处'Giftest'仅作示例，请开发者自行替换。
    ResourceLoader.loadMedia($r('app.media.Giftest').id, this.context).then((buffer) => {
      modelx.loadBuffer(buffer, (error) => {
        if (error) {
          console.error(`loadMediaByWorker error = ${error}`);
        }
        console.info('loadMedia parsing successfully callback drawing');
        this.gifAutoPlay = true;
        this.model = modelx;
      });
    });
  }

  build() {
    RelativeContainer() {
      GIFComponent({ model: $model, autoPlay: $gifAutoPlay, resetGif: $gifReset })
        .width(200)
        .height(200)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        });
    }
    .backgroundColor(0xF1F3F5)
    .height('100%')
    .width('100%');
  }
}

参考：如何设置Image组件中GIF动图播放次数

在HarmonyOS鸿蒙Next中实现循环播放，可使用ArkTS的动画组件或媒体服务。通过设置动画的iterations属性为-1或使用media模块的loop参数开启循环。例如，在动画中定义iterations: -1，或在音频播放器中配置avPlayer.loop = true。系统组件如ImageAnimator也支持设置duration和iterations控制循环次数。

在HarmonyOS Next中，可以通过设置Image组件的repeatCount属性来实现GIF动图的循环播放。具体实现如下：

  1. 使用ImageAnimator组件（推荐方式）：
ImageAnimator({
  images: [
    {
      src: 'common/images/gif_frame1.png',
      width: '100px',
      height: '100px',
      top: '0px',
      left: '0px',
      duration: 100
    },
    // 添加更多帧...
  ],
  state: AnimationStatus.Running,
  duration: 1000,
  iterations: -1 // 设置为-1表示无限循环
})
  1. 使用Image组件配合动画：
Image($r('app.media.animated_gif'))
  .interpolation(ImageInterpolation.High)
  .repeatCount(-1) // 无限循环

关键参数说明：

  • iterations或repeatCount设置为-1时表示无限循环
  • 通过state属性控制动画状态（Running/Paused/Stopped）
  • 建议使用ImageAnimator实现更复杂的帧动画控制

注意：如果使用网络GIF图片，需要确保资源已正确加载，并考虑添加加载状态处理。

回到顶部