1# ImageAnimator 2 3提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 权限列表 11 12无 13 14 15## 子组件 16 17无 18 19 20## 接口 21 22ImageAnimator() 23 24 25## 属性 26 27| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | 28| ---------- | ------------------------------------------------------------ | -------- | ---- | ------------------------------------------------------------ | 29| images | Array<{<br/>src: string,<br/>width?: number \| string,<br/>height?: number \| string,<br/>top?: number \| string,<br/>left?: number \| string,<br/>duration?: number<br/>}> | [] | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小、图片位置和图片播放时长信息。详细说明：<br/>- src：图片路径，图片格式为svg，png和jpg。<br/>- width：图片宽度。<br/>- height：图片高度。<br/>- top：图片相对于组件左上角的纵向坐标。<br/>- left：图片相对于组件左上角的横向坐标。<br/>- duration：每一帧图片的播放时长，单位毫秒。 | 30| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | Initial | 否 | 默认为初始状态，用于控制播放状态。 | 31| duration | number | 1000 | 否 | 单位为毫秒，默认时长为1000ms。<br/>duration为0时，不播放图片。<br/>值的改变只会在下一次循环开始时生效。<br/>当images中设置了单独的duration后，该属性设置无效。 | 32| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。 | 33| fixedSize | boolean | true | 否 | 设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。 | 34| preDecode | number | 0 | 否 | 是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。 | 35| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | Forwards | 否 | 设置动画开始前和结束后的状态，可选值参见FillMode说明。 | 36| iterations | number | 1 | 否 | 默认播放一次，设置为-1时表示无限次播放。 | 37 38## 事件 39 40| 名称 | 功能描述 | 41| ------------------------------- | --------------- | 42| onStart(event: () => void) | 状态回调，动画开始播放时触发。 | 43| onPause(event: () => void) | 状态回调，动画暂停播放时触发。 | 44| onRepeat(event: () => void) | 状态回调，动画重新播放时触发。 | 45| onCancel(event: () => void) | 状态回调，动画取消播放时触发。 | 46| onFinish(event: () => void) | 状态回调，动画播放完成时触发。 | 47 48 49## 示例 50 51```ts 52// xxx.ets 53@Entry 54@Component 55struct ImageAnimatorExample { 56 @State state: AnimationStatus = AnimationStatus.Initial 57 @State reverse: boolean = false 58 @State iterations: number = 1 59 60 build() { 61 Column({ space:5 }) { 62 ImageAnimator() 63 .images([ 64 { 65 //comment文件夹与pages同级 66 src: '/comment/bg1.jpg', 67 duration: 500, 68 width: 325, 69 height: 200, 70 top: 0, 71 left: 0 72 }, 73 { 74 src: '/comment/bg2.jpg', 75 duration: 500, 76 width: 325, 77 height: 200, 78 top: 0, 79 left: 0 80 }, 81 { 82 src: '/comment/bg3.jpg', 83 duration: 500, 84 width: 325, 85 height: 200, 86 top: 0, 87 left: 0 88 }, 89 { 90 src: '/comment/bg4.jpg', 91 duration: 500, 92 width: 325, 93 height: 200, 94 top: 0, 95 left: 0 96 } 97 ]) 98 .state(this.state).reverse(this.reverse).fixedSize(false).preDecode(2) 99 .fillMode(FillMode.None).iterations(this.iterations).width(325).height(210) 100 .margin({top:100}) 101 .onStart(() => { // 当帧动画开始播放后触发 102 console.info('Start') 103 }) 104 .onPause(() => { 105 console.info('Pause') 106 }) 107 .onRepeat(() => { 108 console.info('Repeat') 109 }) 110 .onCancel(() => { 111 console.info('Cancel') 112 }) 113 .onFinish(() => { // 当帧动画播放完成后触发 114 console.info('Finish') 115 }) 116 Row() { 117 Button('start').width(100).padding(5).onClick(() => { 118 this.state = AnimationStatus.Running 119 }) 120 Button('pause').width(100).padding(5).onClick(() => { 121 this.state = AnimationStatus.Paused 122 }) 123 Button('stop').width(100).padding(5).onClick(() => { 124 this.state = AnimationStatus.Stopped 125 }) 126 } 127 Row() { 128 Button('reverse').width(100).padding(5).onClick(() => { 129 this.reverse = !this.reverse 130 }) 131 Button('once').width(100).padding(5).onClick(() => { 132 this.iterations = 1 133 }) 134 Button('iteration').width(100).padding(5).onClick(() => { 135 this.iterations = -1 136 }) 137 } 138 }.width('100%').height('100%').backgroundColor(0xF1F3F5) 139 } 140} 141``` 142 143 144
