aboutToAppear 生命周期方法
加载 GIF 图片并解码为 PixelMap 列表。
创建 Animator 对象，设置动画参数（如时长、循环次数等）。
播放动画，并通过 onFrame 回调更新当前帧。
async aboutToAppear() {
this.pixelMaps = await this.getPixelMaps();
this.backAnimator = this.getUIContext().createAnimator({
duration: 10000, // 动图总时长
easing: "linear",
delay: 0, // 延迟播放时间
fill: "forwards",
direction: "normal",
iterations: -1, // 循环播放
begin: 0,
end: this.pixelMaps.length
});
this.backAnimator.play();
this.backAnimator.onFrame = (value: number) => {
this.currentFrame = Math.floor(value % this.pixelMaps.length);
};
}
getPixelMaps 方法
调用 getPixmapListFromMedia 方法，从资源中加载 GIF 图片并生成 PixelMap 列表。
private async getPixelMaps() {
let MyPixelMaps: Array
MyPixelMaps = await this.getPixmapListFromMedia($r('app.media.icon')); // 加载 GIF 图片
return MyPixelMaps;
}
getPixmapListFromMedia 方法
使用 ImageKit 加载 GIF 图片并解码为 PixelMap 列表。
private async getPixmapListFromMedia(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
desiredPixelFormat: image.PixelMapFormat.RGBA_8888
});
await imageSource.release();
return createPixelMap;
}
完整代码
import { image } from "@kit.ImageKit";
import { AnimatorResult } from "@kit.ArkUI";
import { ViewConstants } from "@ohos/utils";
@Component
export struct gifAnimation {
pixelMaps: Array
private backAnimator: AnimatorResult | undefined = undefined
@State currentFrame: number = 0; // 当前帧
async aboutToAppear() {
this.pixelMaps = await this.getPixelMaps();
this.backAnimator = this.getUIContext().createAnimator({
duration: 10000, // 动图总时长 根据业务更改
easing: "linear",
delay: 0, // 延迟播放时间
fill: "forwards",
direction: "normal",
iterations: -1, // 循环播放-1 只播放一次1
begin: 0,
end: this.pixelMaps.length
})
this.backAnimator.play()
this.backAnimator.onFrame = (value: number) => {
this.currentFrame = Math.floor(value % this.pixelMaps.length)
}
}
aboutToDisappear(): void {
this.backAnimator?.finish()
this.backAnimator = undefined
}
private async getPixelMaps() {
let MyPixelMaps: Array
MyPixelMaps = await this.getPixmapListFromMedia($r('app.media.icon')) // gif图, 生成多张PixelMap
return MyPixelMaps;
}
private async getPixmapListFromMedia(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
desiredPixelFormat: image.PixelMapFormat.RGBA_8888
})
await imageSource.release()
return createPixelMap
}
build() {
Stack() {
Image(this.pixelMaps[this.currentFrame]).width(ViewConstants.FULL_PERCENT).height(150).onClick(() => {
this.backAnimator?.pause()
})
Button("播放").onClick(() => {
this.backAnimator?.play()
})
}
}
}