1# image-animator 2 3The **\<image-animator>** component is used to provide an image frame animator. 4 5> **NOTE** 6> 7> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## Attributes 16 17| Name | Type | Default Value | Mandatory| Description | 18| --------------------- | -------------------------- | -------- | ---- | ------------------------------------------------------------ | 19| images | Array<ImageFrame> | - | Yes | Image frame information. The frame information includes the image path, size, and location. The supported image formats include PNG, JPG, and BMP. For details about **ImageFrame**, see Table 1.<br>**NOTE**<br>1. Use data binding, for example, **images = {{images}}**, to specify the image. Declare the corresponding variable in JavaScript: **images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]**.<br>2. Some lightweight devices are not able to parse images in their original format. To address this issue, in the application compilation phase, the image is directly compiled into a parseable bitmap (total number of bytes: image length x width x 4) and packed in the application installation package. Naturally, larger images result in a larger application installation package. To maintain a proper size of the application installation package, reduce the image resolution as appropriate.| 20| 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.| 21| reverse | boolean | false | No | Playback sequence.<br/>- **true**: Images are played from the last one to the first one.<br/>- **false**: Images are played from the first one to the last one.| 22| 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.<br> **false**: The image size is different from the component size. In this case, the width, height, top, and left attributes of each image must be set separately.| 23| duration | string | - | Yes | Single video playback duration, in seconds (s) or milliseconds (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.| 24| 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.| 25| id | string | - | No | Unique ID of the component. | 26| style | string | - | No | Style declaration of the component. | 27| class | string | - | No | Style class of the component, which is used to refer to a style table. | 28| ref | string | - | No | Reference information of child elements, which is registered with the parent component on **$refs**.| 29 30 **Table 1** ImageFrame 31 32| Name | Type | Default Value | Mandatory | Description | 33| ------ | -------------- | ---- | ---- | ---------------- | 34| src | <uri> | - | Yes | Image path. | 35| width | <length> | 0 | No | Image width. | 36| height | <length> | 0 | No | Image height. | 37| top | <length> | 0 | No | Vertical coordinate of the image relative to the upper left corner of the component.| 38| left | <length> | 0 | No | Horizontal coordinate of the image relative to the upper left corner of the component.| 39 40 41## Events 42 43| Name | Parameter | Description | 44| ------------------ | --------------------------------- | ----------- | 45| stop | - | Triggered when the frame animation stops | 46| click | - | Triggered when the component is clicked. | 47| longpress | - | Triggered when the component is long pressed. | 48| swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component.| 49 50 51## Styles 52 53| Name | Type | Default Value | Mandatory | Description | 54| ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- | 55| width | <length> \| <percentage><sup>5+</sup> | - | No | Component width.<br><br>If this attribute is not set, the default value **0** is used. | 56| height | <length> \| <percentage><sup>5+</sup> | - | No | Component height.<br><br>If this attribute is not set, the default value **0** is used. | 57| padding | <length> | 0 | No | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| 58| padding-[left\|top\|right\|bottom] | <length> | 0 | No | Left, top, right, and bottom padding. | 59| margin | <length> \| <percentage><sup>5+</sup> | 0 | No | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| 60| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | No | Left, top, right, and bottom margins. | 61| border-width | <length> | 0 | No | Shorthand attribute to set the margin for all sides. | 62| border-color | <color> | black | No | Shorthand attribute to set the color for all borders. | 63| border-radius | <length> | - | No | Radius of round-corner borders. | 64| background-color | <color> | - | No | Background color. | 65| opacity<sup>5+</sup> | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. | 66| display | string | flex | No | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| 67| [left\|top] | <length> \| <percentage><sup>6+</sup> | - | No | left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.| 68 69 70## Methods 71 72| Name | Parameter | Description | 73| -------- | ---- | ---------------------------------------- | 74| start | - | Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame. | 75| pause | - | Pauses the frame animation playback of an image. | 76| stop | - | Stops the frame animation playback of an image. | 77| resume | - | Resumes the frame animation playback of an image. | 78| getState | - | Obtains the playback state. Available values are as follows:<br>- playing<br>- paused<br>- stopped| 79 80 81## Example 82 83 84```html 85<!-- xxx.hml --> 86<div class="container"> 87 <image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" /> 88 <div class="btn-box"> 89 <input class="btn" type="button" value="start" @click="handleStart" /> 90 <input class="btn" type="button" value="stop" @click="handleStop" /> 91 <input class="btn" type="button" value="pause" @click="handlePause" /> 92 <input class="btn" type="button" value="resume" @click="handleResume" /> 93 </div> 94</div> 95``` 96 97 98```css 99/* xxx.css */ 100.container { 101 flex-direction: column; 102 justify-content: center; 103 align-items: center; 104 left: 0px; 105 top: 0px; 106 width: 454px; 107 height: 454px; 108} 109.animator { 110 width: 70px; 111 height: 70px; 112} 113.btn-box { 114 width: 264px; 115 height: 120px; 116 flex-wrap: wrap; 117 justify-content: space-around; 118 align-items: center; 119} 120.btn { 121 border-radius: 8px; 122 width: 120px; 123 margin-top: 8px; 124} 125``` 126 127 128```js 129//xxx.js 130export default { 131 data: { 132 frames: [ 133 { 134 src: "/common/asserts/heart78.png", 135 }, 136 { 137 src: "/common/asserts/heart79.png", 138 }, 139 { 140 src: "/common/asserts/heart80.png", 141 }, 142 { 143 src: "/common/asserts/heart81.png", 144 }, 145 { 146 src: "/common/asserts/heart82.png", 147 }, 148 { 149 src: "/common/asserts/heart83.png", 150 }, 151 { 152 src: "/common/asserts/heart84.png", 153 }, 154 { 155 src: "/common/asserts/heart85.png", 156 }, 157 { 158 src: "/common/asserts/heart86.png", 159 }, 160 { 161 src: "/common/asserts/heart87.png", 162 }, 163 { 164 src: "/common/asserts/heart88.png", 165 }, 166 { 167 src: "/common/asserts/heart89.png", 168 }, 169 { 170 src: "/common/asserts/heart90.png", 171 }, 172 { 173 src: "/common/asserts/heart91.png", 174 }, 175 { 176 src: "/common/asserts/heart92.png", 177 }, 178 { 179 src: "/common/asserts/heart93.png", 180 }, 181 { 182 src: "/common/asserts/heart94.png", 183 }, 184 { 185 src: "/common/asserts/heart95.png", 186 }, 187 { 188 src: "/common/asserts/heart96.png", 189 }, 190 ], 191 }, 192 handleStart() { 193 this.$refs.animator.start(); 194 }, 195 handlePause() { 196 this.$refs.animator.pause(); 197 }, 198 handleResume() { 199 this.$refs.animator.resume(); 200 }, 201 handleStop() { 202 this.$refs.animator.stop(); 203 }, 204}; 205``` 206 207 208
