HarmonyOS 鸿蒙Next中Image加载gif图会一直循环播放；希望只播放一次，且停留在最后一帧；该如何实现呢？

HarmonyOS 鸿蒙Next中Image加载gif图会一直循环播放；希望只播放一次，且停留在最后一帧；该如何实现呢？

4 回复

可以使用三方库ohos_gif-drawable、imageknife等

或者使用如下代码也可以

import image from '@ohos.multimedia.image';

@Entry
@Component
struct GifTest {
  @State gifLast: PixelMap | Resource = $r('app.media.startIcon');
  @State gif: PixelMap | Resource = $r('app.media.food_loading_one');

  build() {
    Row() {
      Image(this.gif)
        .width('100%')
        .height('50%')
    }
    .height('100%')
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .width('100%')
  }

  aboutToAppear(): void {
    let loading = getContext().resourceManager.getRawFdSync('food_loading_one.gif');
    let imageSource = image.createImageSource(loading);

    // 获取GIF帧数
    imageSource.getFrameCount((err, count) => {
      // 取出最后一帧
      this.gifLast = imageSource.createPixelMapSync({ index: count - 1 });
    })

    // 获取每帧的间隔时间
    imageSource.getDelayTimeList((err, list) => {
      // 将间隔时间相加，得到GIF时长
      let time = list.reduce((total, currentNumber) => total + currentNumber, 0);
      setTimeout(() => {
        // 将最后一帧替换GIF
        this.gif = this.gifLast;
      }, time);
    })
  }
}

更多关于HarmonyOS 鸿蒙Next中Image加载gif图会一直循环播放；希望只播放一次，且停留在最后一帧；该如何实现呢？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以试试用三方库：

OpenHarmony三方库中心仓：这个库可以满足你的需求

在HarmonyOS中，使用Image组件加载GIF时默认循环播放。要实现只播放一次并停留在最后一帧，可以使用ohos.media.image和Animator控制。具体步骤：

  1. 将GIF拆解为帧序列；
  2. 使用FrameAnimator设置duration和iteratedCount(1)；
  3. 监听stateChange事件，在结束时显示最后一帧图片。

关键代码：

animator.setIteratedCount(1)

和

animator.stop()

在HarmonyOS Next中，可以通过设置Image组件的iterationCount属性来控制GIF播放次数。要实现只播放一次并停留在最后一帧，可以这样实现：

Image($r('app.media.your_gif'))
  .iterationCount(1)  // 设置只播放1次
  .fillMode(FillMode.Forwards)  // 播放结束后保持最后一帧

关键点说明：

  1. iterationCount(1) - 设置GIF只循环播放1次
  2. fillMode(FillMode.Forwards) - 播放结束后保留最后一帧画面

如果遇到兼容性问题，也可以考虑将GIF转换为帧动画序列，使用Animator组件进行更精确的控制。

回到顶部