HarmonyOS 6 ArkTS ImageAnimator 组件使用文档

文章目录核心 API1. 关键属性2. 动画状态 AnimationStatus3. 生命周期回调4. 控制按钮功能完整代码功能说明总结核心 API1. 关键属性属性名作用.images([])设置动画帧传入图片资源数组.duration()设置动画总时长单位毫秒.state()设置/获取动画状态初始、运行、暂停、停止.reverse()设置是否反向播放.iterations()循环次数-1无限循环0指定次数.fillMode()动画结束后显示模式2. 动画状态AnimationStatus状态含义Initial初始状态Running播放中Paused暂停停留在当前帧Stopped停止回到第一帧3. 生命周期回调回调触发时机onStart动画开始onPause动画暂停onRepeat动画重复一次onCancel动画被取消onFinish动画播放完成4. 控制按钮功能start开始播放pause暂停在当前画面stop停止并回到第一帧reverse切换正放/倒放once播放一次infinite无限循环完整代码// xxx.ets Entry Component struct ImageAnimatorExample { State state: AnimationStatus AnimationStatus.Initial; State reverse: boolean false; State iterations: number 1; build() { Column({ space: 10 }) { ImageAnimator() .images([ { // $r(app.media.img1)需要替换为开发者所需的图像资源文件。 src: $r(app.media.start) }, { // $r(app.media.img2)需要替换为开发者所需的图像资源文件。 src: $r(app.media.startIcon) }, { // $r(app.media.img3)需要替换为开发者所需的图像资源文件。 src: $r(app.media.foreground) }, { // $r(app.media.img4)需要替换为开发者所需的图像资源文件。 src: $r(app.media.gif) } ]) .duration(4000) .state(this.state) .reverse(this.reverse) .fillMode(FillMode.None) .iterations(this.iterations) .width(340) .height(240) .margin({ top: 100 }) .onStart(() { console.info(Start) }) .onPause(() { console.info(Pause) }) .onRepeat(() { console.info(Repeat) }) .onCancel(() { console.info(Cancel) }) .onFinish(() { console.info(Finish) this.state AnimationStatus.Stopped }) Row() { Button(start).width(100).padding(5).onClick(() { this.state AnimationStatus.Running }).margin(5) Button(pause).width(100).padding(5).onClick(() { this.state AnimationStatus.Paused // 显示当前帧图片 }).margin(5) Button(stop).width(100).padding(5).onClick(() { this.state AnimationStatus.Stopped // 显示动画的起始帧图片 }).margin(5) } Row() { Button(reverse).width(100).padding(5).onClick(() { this.reverse !this.reverse }).margin(5) Button(once).width(100).padding(5).onClick(() { this.iterations 1 }).margin(5) Button(infinite).width(100).padding(5).onClick(() { this.iterations -1 // 无限循环播放 }).margin(5) } }.width(100%).height(100%) } }运行效果如图点击start按钮开始轮播图片功能说明播放start动画从当前位置开始按顺序播放。暂停pause动画停在当前帧画面不动。停止stop动画终止并回到第一帧。反向播放reverse点击切换正放/倒放可实时切换。播放一次once动画播放一轮后自动停止。无限循环infinite动画无限播放直到手动暂停/停止。总结ImageAnimator只能使用本地资源不支持网络图片。帧图片使用$r(app.media.xxx)加载。动画控制通过修改state实现。支持正向、反向、循环、无限播放。提供完整生命周期回调便于状态同步。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力