文章目录
- 核心 API
- 1. 关键属性
- 2. 动画状态 `AnimationStatus`
- 3. 生命周期回调
- 4. 控制按钮功能
- 完整代码
- 功能说明
- 总结
核心 API
1. 关键属性
| 属性名 | 作用 |
|---|---|
.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实现。 - 支持正向、反向、循环、无限播放。
- 提供完整生命周期回调，便于状态同步。
如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力
