HarmonyOS GIF动态图片，怎么设置只显示一次

GIF动态图片，怎么设置只显示一次

咨询场景描述：有没有动态图的显示状态回调，api没找到此部分

HarmonyOS

Heiang

2024-08-10 12:38:02

1256浏览

回答 1

按赞同

按时间

put_get

可以使用第三方库gif-drawable，支持Gif渲染及控制的相关功能。详见https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fgif-drawable

可以参考demo

//demo.ets 
import { GIFComponent, ResourceLoader } from '@ohos/gif-drawable' 
import { image } from '@kit.ImageKit'; 
 
@Entry 
@Component 
struct Index { 
  // gif绘制组件用户属性设置 
  @State model: GIFComponent.ControllerOptions = new GIFComponent.ControllerOptions(); 
  // 是否自动播放 
  @State gifAutoPlay: boolean = true; 
  @State imagePixelMap: image.PixelMap | undefined = undefined 
  @State gifReset: boolean = false; 
 
  async aboutToAppear() { 
    let modelx = new GIFComponent.ControllerOptions() 
    modelx.setScaleType(GIFComponent.ScaleType.FIT_CENTER) 
      .setSpeedFactor(1) 
      .setOpenHardware(true) 
      .setLoopFinish((loopTime:number)=>{ 
        this.gifAutoPlay = false 
      }) 
    ResourceLoader.loadMedia($r('app.media.gifExample').id, getContext(this)).then((buffer) => { 
      modelx.loadBuffer(buffer, (err) => { 
        if (err) { 
          console.log('loadMediaByWorker error =' + err) 
        } 
        console.log('loadMedia加载解析成功回调绘制！') 
        this.model = modelx; 
      }) 
    }) 
  } 
 
  build() { 
    Row() { 
      Column() { 
        Text('GIF显示') 
        Button('start').onClick(()=>{ 
          this.gifAutoPlay = true; 
        }) 
        GIFComponent({ 
          model: $model, 
          autoPlay: $gifAutoPlay, 
          resetGif: $gifReset, 
        }) 
          .width(300) 
          .height(300) 
          .backgroundColor(Color.Gray) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.