HarmonyOS鸿蒙Next中怎么控制webp播放的次数，以及有没有播放完成的回调

HarmonyOS鸿蒙Next中怎么控制webp播放的次数，以及有没有播放完成的回调 么控制webp播放的次数，以及有没有播放完成的回调？

试过image、ImageAnimator都解决不了这两个问题

8 回复

由于ImageAnimator只会把webp当做一个图片来处理，所以不会停。要把webp当做文件，先抽出来他的所有帧，得到图片数组，然后再去使用ImageAnimator去播放，才能正常暂停和次数限制，参考这个Demo：

import { image } from ‘@kit.ImageKit’ @Entry @Component struct ImageAnimatorExample { @State state: AnimationStatus = AnimationStatus.Initial @State reverse: boolean = false @State iterations: number = 10 @State images:Array<ImageFrameInfo> = [] imageFrames:Array<ImageFrameInfo> = [] isSelected:boolean = false; async aboutToAppear() { this.imageFrames = await this.getImageFrameInfoFromMedia($r(‘app.media.testwebp’)) } build() { Column({ space: 10 }) { ImageAnimator() .images(this.imageFrames) .state(this.state) .iterations(this.iterations) .width(40) .height(40) .margin({ top: 100 }) .onClick(() => { this.isSelected = true; this.state = AnimationStatus.Running console.log("heqian onClick "+ this.imageFrames.length) }) .onFinish(() => { console.info(‘Finish’) this.state = AnimationStatus.Stopped }) Button(‘reset’) .onClick(() => { this.isSelected = false; this.state = AnimationStatus.Stopped console.log("heqian reset "+ this.imageFrames.length) }) } .width(‘100%’).height(‘100%’) } private async getImageFrameInfoFromMedia(resource: Resource) { let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({ bundleName: resource.bundleName, moduleName: resource.moduleName, id: resource.id }) let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength)) let createPixelMap: Array<image.PixelMap> = await imageSource.createPixelMapList({ desiredPixelFormat: image.PixelMapFormat.RGBA_8888 }) let delayList = await imageSource.getDelayTimeList() await imageSource.release() let imageFrameInfoArray: Array<ImageFrameInfo> = []; for (let i = 0; i < createPixelMap.length; i++) { imageFrameInfoArray.push({ src: createPixelMap[i], duration: delayList[i] }) } return imageFrameInfoArray } }


效果图：

![webp.gif](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)

更多关于HarmonyOS鸿蒙Next中怎么控制webp播放的次数，以及有没有播放完成的回调的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


姓名: 张三
职业: 软件工程师
邮箱: zhangsan@example.com
电话: 1234567890


备注: 这是一个测试示例。

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

可以使用ImageKnife，ImageAnimator来实现webp播放与控制，参考：https://gitee.com/openharmony-tpc/ImageKnife

我这样实现的也不行，跟ImageKnife的实现应该是一样的，

会无限播放，

在HarmonyOS鸿蒙Next中，控制WebP动画播放次数和监听播放完成回调可以通过Image组件和ImageAnimator组件实现。

  1. 控制WebP播放次数：

    • 使用ImageAnimator组件，通过设置iterations属性来控制动画播放次数。例如，iterations: 3表示动画将播放3次。

  2. 播放完成的回调：

    • ImageAnimator组件提供了onFinish事件，当动画播放完成时会触发该回调。你可以在回调函数中执行相应的逻辑。

示例代码：

@Entry
@Component
struct WebpAnimation {
  private controller: ImageAnimatorController = new ImageAnimatorController();

  build() {
    Column() {
      ImageAnimator({
        images: [
          {
            src: 'image1.webp',
            duration: 100
          },
          {
            src: 'image2.webp',
            duration: 100
          }
        ],
        iterations: 3,
        controller: this.controller
      })
      .onFinish(() => {
        console.log('Animation finished');
      })
    }
  }
}

在HarmonyOS鸿蒙Next中，可以通过Image组件加载WebP图片，并使用ImageAnimator组件控制动画播放次数。通过设置repeatCount属性来指定播放次数，例如repeatCount={3}表示播放3次。监听播放完成事件，可以使用onEnd回调，当动画播放结束时触发。示例代码如下：

<ImageAnimator
  images={[{ src: 'example.webp', duration: 100 }]}
  repeatCount={3}
  onEnd={() => console.log('播放完成')}
/>

通过repeatCount和onEnd，你可以灵活控制WebP动画的播放次数并监听播放完成事件。

回到顶部