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## Attributes 21 22In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 23 24| Name | Type |Description | 25| ---------- | ----------------------- |-------- | 26| 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.| 27| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | Playback status of the animation. The default status is **Initial**.<br>Default value: **AnimationStatus.Initial**| 28| 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**| 29| 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**| 30| 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**| 31| 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**| 32| 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**| 33| 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**| 34 35## ImageFrameInfo 36 37| Name | Type | Mandatory| Description| 38| -------- | -------------- | -------- | -------- | 39| 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.| 40| width | number \| string | No | Image width.<br>Default value: **0** | 41| height | number \| string | No | Image height.<br>Default value: **0** | 42| top | number \| string | No | Vertical coordinate of the image relative to the upper left corner of the widget<br>Default value: **0** | 43| left | number \| string | No | Horizontal coordinate of the image relative to the upper left corner of the widget<br>Default value: **0** | 44| duration | number | No | Playback duration of each image frame, in milliseconds.<br>Default value: **0** | 45 46## Events 47 48In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 49 50| Name| Description| 51| -------- | -------- | 52| onStart(event: () => void) | Triggered when the animation starts to play.| 53| onPause(event: () => void) | Triggered when the animation playback is paused.| 54| onRepeat(event: () => void) | Triggered when the animation playback is repeated.| 55| onCancel(event: () => void) | Triggered when the animation playback is canceled.| 56| onFinish(event: () => void) | Triggered when the animation playback is complete.| 57 58 59## Example 60 61```ts 62// xxx.ets 63@Entry 64@Component 65struct ImageAnimatorExample { 66 @State state: AnimationStatus = AnimationStatus.Initial 67 @State reverse: boolean = false 68 @State iterations: number = 1 69 70 build() { 71 Column({ space: 10 }) { 72 ImageAnimator() 73 .images([ 74 { 75 src: $r('app.media.img1') 76 }, 77 { 78 src: $r('app.media.img2') 79 }, 80 { 81 src: $r('app.media.img3') 82 }, 83 { 84 src: $r('app.media.img4') 85 } 86 ]) 87 .duration(2000) 88 .state(this.state).reverse(this.reverse) 89 .fillMode(FillMode.None).iterations(this.iterations).width(340).height(240) 90 .margin({ top: 100 }) 91 .onStart(() => { 92 console.info('Start') 93 }) 94 .onPause(() => { 95 console.info('Pause') 96 }) 97 .onRepeat(() => { 98 console.info('Repeat') 99 }) 100 .onCancel(() => { 101 console.info('Cancel') 102 }) 103 .onFinish(() => { 104 console.info('Finish') 105 this.state = AnimationStatus.Stopped 106 }) 107 Row() { 108 Button('start').width(100).padding(5).onClick(() => { 109 this.state = AnimationStatus.Running 110 }).margin(5) 111 Button('pause').width(100).padding(5).onClick(() => { 112 this.state = AnimationStatus.Paused // Display the image of the current frame. 113 }).margin(5) 114 Button('stop').width(100).padding(5).onClick(() => { 115 this.state = AnimationStatus.Stopped // Display the image of the initial frame. 116 }).margin(5) 117 } 118 119 Row() { 120 Button('reverse').width(100).padding(5).onClick(() => { 121 this.reverse = !this.reverse 122 }).margin(5) 123 Button('once').width(100).padding(5).onClick(() => { 124 this.iterations = 1 125 }).margin(5) 126 Button('infinite').width(100).padding(5).onClick(() => { 127 this.iterations = -1 // The animation is played for an unlimited number of times. 128 }).margin(5) 129 } 130 }.width('100%').height('100%') 131 } 132} 133``` 134 135 136
