HarmonyOS 鸿蒙Next arkts对gif动图的支持 能否控制播放 重播之类？

Image组件主要作用是显示图片，对动图的支持还是要根据图片格式来分别处理。

推荐一个第三方库gif-drawable，支持Gif渲染及控制的相关功能，原理是直接基于Canvas进行控制的，具体能力有：

• 支持播放GIF图片。
• 支持控制GIF播放/暂停。
• 支持重置GIF播放动画。
• 支持调节GIF播放速率。
• 支持监听GIF所有帧显示完成后的回调。

开发步骤如下：

1. 安装相关包

ohpm install [@ohos](/user/ohos)/gif-drawable

使用taskpool替代worker,无需额外工程配置

1. 在需要展示的位置使用GIFComponent自定义组件

import { GIFComponent, ResourceLoader } from '[@ohos](/user/ohos)/gif-drawable'

// gif绘制组件用户属性设置

@State model:GIFComponent.ControllerOptions = new GIFComponent.ControllerOptions();

// 是否自动播放

@State gifAutoPlay:boolean = true;

// 重置GIF播放，每次取反都能生效

@State gifReset:boolean = true;

// 在ARKUI的其他容器组件中添加该组件 如果需要绑定滚动组件内部可见/不可见状态 gif自动暂停开始播放能力,只需要加上bindScroller字段即可。

GIFComponent({
  model:$model, 
  autoPlay:$gifAutoPlay, 
  resetGif: $gifReset
})

1. 配置 GIFComponent.ControllerOptions 达到更多的效果

this.gifAutoPlay = false;

// 销毁上一次资源

this.model.destroy();

// 新创建一个modelx，用于配置用户参数

let modelx = new GIFComponent.ControllerOptions()

modelx

// 配置回调动画结束监听，和耗时监听    

.setLoopFinish((loopTime) => {

this.gifLoopCount++;

this.loopHint = '当前gif循环了' + this.gifLoopCount + '次,耗时=' + loopTime + 'ms'

})

// 设置图像和组件的适配类型

.setScaleType(this.scaleType)

// 设置播放速率

.setSpeedFactor(this.speedFactor)

// 加载网络图片,getContext(this)中的this指向page页面或者组件都可以

ResourceLoader.downloadDataWithContext(getContext(this), {

url: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700'

}, (sucBuffer) => {

// 网络资源sucBuffer返回后处理

modelx.loadBuffer(sucBuffer, () => {

console.log('网络加载解析成功回调绘制！')

// 开启自动播放   

this.gifAutoPlay = true;

// 给组件数据赋新的用户配置参数，达到后续gif动画效果   

this.model = modelx;

})

}, (err) => {

// 用户根据返回的错误信息，进行业务处理(展示一张失败占位图、再次加载一次、加载其他图片等)

具体链接： [https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fgif-drawable](https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fgif-drawable)