1# image-animator 2 3> **NOTE** 4> 5> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 6 7The **\<image-animator>** component is used to provide an image frame animator. 8 9 10## Child Components 11 12Not supported 13 14 15## Attributes 16 17In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported. 18 19| Name | Type | Default Value | Mandatory | Description | 20| ---------------------- | -------------------------- | -------- | ---- | ---------------------------------------- | 21| images | Array<ImageFrame> | - | Yes | Image frame information. The frame information includes the image path, size, and location. The supported image formats include PNG and JPG. <br>Set this attribute using data binding.<br>- Reference image resources in the HML file: **images = {{images}}**.<br>- Declare the corresponding variables in the JS file:<br>**images: [{src: "/common/heart-rate01.png",duration:"100"}]** Since API version 6,the duration (in milliseconds) per image frame can be set.| 22| predecode<sup>6+</sup> | number | 0 | No | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.| 23| iteration | number \| string | infinite | No | Number of times that the frame animation is played. **number** indicates a fixed number of playback operations, and **infinite** indicates an unlimited number of playback operations.| 24| reverse | boolean | false | No | 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.| 25| fixedsize | boolean | true | No | 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. **false**: The width, height, top, and left attributes of each image must be set separately.| 26| duration | string | - | Yes | Single video playback duration. The unit can be s (standing for seconds) or ms. The default unit is ms. If the value is **0**, no image is played. The value change takes effect only at the start of the next cycle. If image-specific durations have been set, the settings of this attribute do not take effect. | 27| fillmode<sup>5+</sup> | string | forwards | No | Status of the frame animation after its playback is complete. Available values are as follows:<br>- **none**: Restores to the initial status.<br>- **forwards**: Retains the ending status defined for the last key frame.| 28 29**Table 1** ImageFrame 30 31| Name | Type | Default Value | Mandatory | Description | 32| --------------------- | -------------- | ---- | ---- | ---------------------- | 33| src | <uri> | - | Yes | Image path. The image format can be SVG, PNG, JPG, or HEIF.| 34| width | <length> | 0 | No | Image width. | 35| height | <length> | 0 | No | Image height. | 36| top | <length> | 0 | No | Vertical coordinate of the image relative to the upper left corner of the component. | 37| left | <length> | 0 | No | Horizontal coordinate of the image relative to the upper left corner of the component. | 38| duration<sup>6+</sup> | number | - | No | Playback duration of each image frame, in milliseconds. | 39 40 41## Styles 42 43The [universal styles](js-components-common-styles.md) are supported. 44 45 46## Events 47 48In addition to the [universal events](js-components-common-events.md), the following events are supported. 49 50| Name | Parameter | Description | 51| ------ | ---- | --------- | 52| start | - | Triggered when the frame animation starts.| 53| pause | - | Triggered when the frame animation pauses.| 54| stop | - | Triggered when the frame animation stops.| 55| resume | - | Triggered when the frame animation resumes.| 56 57 58## Methods 59 60In addition to the [universal methods](js-components-common-methods.md), the following methods are supported. 61 62| Name | Parameter | Description | 63| -------- | ---- | ---------------------------------------- | 64| start | - | Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame. | 65| pause | - | Pauses the frame animation playback of an image. | 66| stop | - | Stops the frame animation playback of an image. | 67| resume | - | Resumes the frame animation playback of an image. | 68| getState | - | Obtains the playback state. Available values are as follows:<br>- playing<br>- paused<br>- stopped| 69 70 71## Example 72 73```html 74<!-- xxx.hml --> 75<div class="container"> 76 <image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" /> 77 <div class="btn-box"> 78 <input class="btn" type="button" value="start" @click="handleStart" /> 79 <input class="btn" type="button" value="stop" @click="handleStop" /> 80 <input class="btn" type="button" value="pause" @click="handlePause" /> 81 <input class="btn" type="button" value="resume" @click="handleResume" /> 82 </div> 83</div> 84``` 85 86```css 87/* xxx.css */ 88.container { 89 flex-direction: column; 90 justify-content: center; 91 align-items: center; 92 left: 0px; 93 top: 0px; 94 width: 454px; 95 height: 454px; 96} 97.animator { 98 width: 70px; 99 height: 70px; 100} 101.btn-box { 102 width: 264px; 103 height: 120px; 104 flex-wrap: wrap; 105 justify-content: space-around; 106 align-items: center; 107} 108.btn { 109 border-radius: 8px; 110 width: 120px; 111 margin-top: 8px; 112} 113``` 114 115```js 116//xxx.js 117export default { 118 data: { 119 frames: [ 120 { 121 src: "/common/asserts/heart78.png", 122 }, 123 { 124 src: "/common/asserts/heart79.png", 125 }, 126 { 127 src: "/common/asserts/heart80.png", 128 }, 129 { 130 src: "/common/asserts/heart81.png", 131 }, 132 { 133 src: "/common/asserts/heart82.png", 134 }, 135 { 136 src: "/common/asserts/heart83.png", 137 }, 138 { 139 src: "/common/asserts/heart84.png", 140 }, 141 { 142 src: "/common/asserts/heart85.png", 143 }, 144 { 145 src: "/common/asserts/heart86.png", 146 }, 147 { 148 src: "/common/asserts/heart87.png", 149 }, 150 { 151 src: "/common/asserts/heart88.png", 152 }, 153 { 154 src: "/common/asserts/heart89.png", 155 }, 156 { 157 src: "/common/asserts/heart90.png", 158 }, 159 { 160 src: "/common/asserts/heart91.png", 161 }, 162 { 163 src: "/common/asserts/heart92.png", 164 }, 165 { 166 src: "/common/asserts/heart93.png", 167 }, 168 { 169 src: "/common/asserts/heart94.png", 170 }, 171 { 172 src: "/common/asserts/heart95.png", 173 }, 174 { 175 src: "/common/asserts/heart96.png", 176 }, 177 ], 178 }, 179 handleStart() { 180 this.$refs.animator.start(); 181 }, 182 handlePause() { 183 this.$refs.animator.pause(); 184 }, 185 handleResume() { 186 this.$refs.animator.resume(); 187 }, 188 handleStop() { 189 this.$refs.animator.stop(); 190 }, 191}; 192``` 193 194 195
