1# ImageAnimator 2 3The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played as well as the duration of each image can be configured. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10 11## Child Components 12 13Not supported 14 15 16## APIs 17 18ImageAnimator() 19 20 21## Attributes 22 23| Name | Type |Description | 24| ---------- | ----------------------- |-------- | 25| images | Array<[ImageFrameInfo](#imageframeinfo)> | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. For details, see **ImageFrameInfo**.<br>Default value: **[]**<br>**NOTE**<br>Dynamic update is not supported.| 26| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | Playback status of the animation. The default status is **Initial**.<br>Default value: **AnimationStatus.Initial**| 27| duration | number | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.<br>Default value: **1000**| 28| reverse | boolean | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.<br>Default value: **false**| 29| fixedSize | boolean | Whether the image size is the same as the component size.<br> **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br> **false**: The width, height, top, and left attributes of each image must be set separately.<br>Default value: **true**| 30| preDecode<sup>(deprecated)</sup> | number | Number of pre-decoded images. The value **2** indicates that two images following the currently playing page will be pre-decoded to improve performance.<br>This API is deprecated since API version 9.<br>Default value: **0**| 31| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | Status before and after the animation starts. For details about the options, see **FillMode**.<br>Default value: **FillMode.Forwards**| 32| iterations | number | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.<br>Default value: **1**| 33 34## ImageFrameInfo 35 36| Name | Type | Mandatory| Description| 37| -------- | -------------- | -------- | -------- | 38| src | string \| [Resource](ts-types.md#resource)<sup>9+</sup> | Yes | Image path. The image format can be .svg, .png, or .jpg. Since API version 9, this attribute accepts paths of the [Resource](ts-types.md#resource) type.| 39| width | number \| string | No | Image width.<br>Default value: **0** | 40| height | number \| string | No | Image height.<br>Default value: **0** | 41| top | number \| string | No | Vertical coordinate of the image relative to the upper left corner of the widget<br>Default value: **0** | 42| left | number \| string | No | Horizontal coordinate of the image relative to the upper left corner of the widget<br>Default value: **0** | 43| duration | number | No | Playback duration of each image frame, in milliseconds.<br>Default value: **0** | 44 45 46## Events 47 48| Name| Description| 49| -------- | -------- | 50| onStart(event: () => void) | Triggered when the animation starts to play.| 51| onPause(event: () => void) | Triggered when the animation playback is paused.| 52| onRepeat(event: () => void) | Triggered when the animation playback is repeated.| 53| onCancel(event: () => void) | Triggered when the animation playback is canceled.| 54| onFinish(event: () => void) | Triggered when the animation playback is complete.| 55 56 57## Example 58 59```ts 60// xxx.ets 61@Entry 62@Component 63struct ImageAnimatorExample { 64 @State state: AnimationStatus = AnimationStatus.Initial 65 @State reverse: boolean = false 66 @State iterations: number = 1 67 68 build() { 69 Column({ space: 10 }) { 70 ImageAnimator() 71 .images([ 72 { 73 src: $r('app.media.img1') 74 }, 75 { 76 src: $r('app.media.img2') 77 }, 78 { 79 src: $r('app.media.img3') 80 }, 81 { 82 src: $r('app.media.img4') 83 } 84 ]) 85 .duration(2000) 86 .state(this.state).reverse(this.reverse) 87 .fillMode(FillMode.None).iterations(this.iterations).width(340).height(240) 88 .margin({ top: 100 }) 89 .onStart(() => { 90 console.info('Start') 91 }) 92 .onPause(() => { 93 console.info('Pause') 94 }) 95 .onRepeat(() => { 96 console.info('Repeat') 97 }) 98 .onCancel(() => { 99 console.info('Cancel') 100 }) 101 .onFinish(() => { 102 console.info('Finish') 103 this.state = AnimationStatus.Stopped 104 }) 105 Row() { 106 Button('start').width(100).padding(5).onClick(() => { 107 this.state = AnimationStatus.Running 108 }).margin(5) 109 Button('pause').width(100).padding(5).onClick(() => { 110 this.state = AnimationStatus.Paused // Display the image of the current frame. 111 }).margin(5) 112 Button('stop').width(100).padding(5).onClick(() => { 113 this.state = AnimationStatus.Stopped // Display the image of the initial frame. 114 }).margin(5) 115 } 116 117 Row() { 118 Button('reverse').width(100).padding(5).onClick(() => { 119 this.reverse = !this.reverse 120 }).margin(5) 121 Button('once').width(100).padding(5).onClick(() => { 122 this.iterations = 1 123 }).margin(5) 124 Button('infinite').width(100).padding(5).onClick(() => { 125 this.iterations = -1 // The animation is played for an unlimited number of times. 126 }).margin(5) 127 } 128 }.width('100%').height('100%') 129 } 130} 131``` 132 133 134
