1# image-animator 2 3The **\<image-animator>** component is used to provide an image frame animator. 4 5## Child Component 6 7Not supported 8 9## Attributes 10 11In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. 12 13 14 15| Name | Type | Default Value | Mandatory | Description | 16| ----------- | ----------------- | ------------- | --------- | ------------------------------------------------------------ | 17| images | Array\<ImageFrame> | - | Yes | Image frame information. The frame information includes the image path, size, and location. Currently, the following image formats are supported: PNG and JPG. For details about **ImageFrame**, see [Table 1](js-components-basic-image-animator.md#table67453165913).NOTE:Set this attribute using data binding, for example, **images = {{images}}**. Declare the corresponding variable **images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]** in the JavaScript.Declare the variable **images: [{src: "/common/heart-rate01.png", duration: "100"}, {src: "/common/heart-rate02.png", duration: "200"}]** in the JavaScript. You can set the duration (in milliseconds) of each image frame. 6+ | 18| predecode6+ | number | 0 | No | Whether to enable pre-decoding. The default value is 0, indicating that pre-decoding is disabled. If this parameter is set to 2, the last two images are loaded to the cache in advance to improve the performance when the current page is played. | 19| 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. | 20| 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. | 21| fixedsize | boolean | true | No | Whether the image size is fixed to the widget size. **true**: The image size is the same as the widget 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. | 22| 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. | 23| fillmode5+ | 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. | 24 25**Table 1** ImageFrame description 26 27 28 29| Name | Type | Default Value | Mandatory | Description | 30| ---------- | -------- | ------------- | --------- | ------------------------------------------------------------ | 31| src | \<uri> | - | Yes | Image path. The image format can be SVG, PNG, or JPG. | 32| width | \<length> | 0 | No | Image width | 33| height | \<length> | 0 | No | Image height | 34| top | \<length> | 0 | No | Vertical coordinate of the image relative to the upper left corner of the widget | 35| left | \<length> | 0 | No | Horizontal coordinate of the image relative to the upper left corner of the widget | 36| duration6+ | number | - | No | Playback duration of each image frame, in milliseconds. | 37 38## Styles 39 40Styles in [Universal Styles](js-components-common-styles.md) are supported. 41 42## Events 43 44In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. 45 46 47 48| Name | Parameter | Description | 49| ------ | --------- | ------------------------------------------ | 50| start | - | Triggered when the frame animation starts | 51| pause | - | Triggered when the frame animation pauses | 52| stop | - | Triggered when the frame animation stops | 53| resume | - | Triggered when the frame animation resumes | 54 55## Methods 56 57In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported. 58 59 60 61| Name | Parameter | Description | 62| -------- | --------- | ------------------------------------------------------------ | 63| start | - | Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame. | 64| pause | - | Pauses the frame animation playback of an image. | 65| stop | - | Stops the frame animation playback of an image. | 66| resume | - | Resumes the frame animation playback of an image. | 67| getState | - | Obtains the playback state. Available values are as follows:<br/>-Playing<br/>-Paused<br/>-Stopped | 68 69## Example Code 70 71``` 72<!-- xxx.hml --> 73<div class="container"> 74 <image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" /> 75 <div class="btn-box"> 76 <input class="btn" type="button" value="start" @click="handleStart" /> 77 <input class="btn" type="button" value="stop" @click="handleStop" /> 78 <input class="btn" type="button" value="pause" @click="handlePause" /> 79 <input class="btn" type="button" value="resume" @click="handleResume" /> 80 </div> 81</div> 82/* xxx.css */ 83.container { 84 flex-direction: column; 85 justify-content: center; 86 align-items: center; 87 left: 0px; 88 top: 0px; 89 width: 454px; 90 height: 454px; 91} 92.animator { 93 width: 70px; 94 height: 70px; 95} 96.btn-box { 97 width: 264px; 98 height: 120px; 99 flex-wrap: wrap; 100 justify-content: space-around; 101 align-items: center; 102} 103.btn { 104 border-radius: 8px; 105 width: 120px; 106 margin-top: 8px; 107} 108//xxx.js 109export default { 110 data: { 111 frames: [ 112 { 113 src: "/common/asserts/heart78.png", 114 }, 115 { 116 src: "/common/asserts/heart79.png", 117 }, 118 { 119 src: "/common/asserts/heart80.png", 120 }, 121 { 122 src: "/common/asserts/heart81.png", 123 }, 124 { 125 src: "/common/asserts/heart82.png", 126 }, 127 { 128 src: "/common/asserts/heart83.png", 129 }, 130 { 131 src: "/common/asserts/heart84.png", 132 }, 133 { 134 src: "/common/asserts/heart85.png", 135 }, 136 { 137 src: "/common/asserts/heart86.png", 138 }, 139 { 140 src: "/common/asserts/heart87.png", 141 }, 142 { 143 src: "/common/asserts/heart88.png", 144 }, 145 { 146 src: "/common/asserts/heart89.png", 147 }, 148 { 149 src: "/common/asserts/heart90.png", 150 }, 151 { 152 src: "/common/asserts/heart91.png", 153 }, 154 { 155 src: "/common/asserts/heart92.png", 156 }, 157 { 158 src: "/common/asserts/heart93.png", 159 }, 160 { 161 src: "/common/asserts/heart94.png", 162 }, 163 { 164 src: "/common/asserts/heart95.png", 165 }, 166 { 167 src: "/common/asserts/heart96.png", 168 }, 169 ], 170 }, 171 handleStart() { 172 this.$refs.animator.start(); 173 }, 174 handlePause() { 175 this.$refs.animator.pause(); 176 }, 177 handleResume() { 178 this.$refs.animator.resume(); 179 }, 180 handleStop() { 181 this.$refs.animator.stop(); 182 }, 183}; 184``` 185 186
