# image-animator The **\** component is used to provide an image frame animator. > **NOTE** > > This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components Not supported ## Attributes | Name | Type | Default Value | Mandatory| Description | | --------------------- | -------------------------- | -------- | ---- | ------------------------------------------------------------ | | 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.
**NOTE**
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"}]**.
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.| | 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.| | reverse | boolean | false | No | Playback sequence.
- **true**: Images are played from the last one to the first one.
- **false**: Images are played from the first one to the last one.| | fixedsize | boolean | true | No | Whether the image size is the same as the component size.
**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 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.| | 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.| | fillmode5+ | string | forwards | No | Status of the frame animation after its playback is complete. Available values are as follows:
- **none**: restores to the initial status.
- **forwards**: retains the ending status defined for the last key frame.| | id | string | - | No | Unique ID of the component. | | style | string | - | No | Style declaration of the component. | | class | string | - | No | Style class of the component, which is used to refer to a style table. | | ref | string | - | No | Reference information of child elements, which is registered with the parent component on **$refs**.| **Table 1** ImageFrame | Name | Type | Default Value | Mandatory | Description | | ------ | -------------- | ---- | ---- | ---------------- | | src | <uri> | - | Yes | Image path. | | width | <length> | 0 | No | Image width. | | height | <length> | 0 | No | Image height. | | top | <length> | 0 | No | Vertical coordinate of the image relative to the upper left corner of the component.| | left | <length> | 0 | No | Horizontal coordinate of the image relative to the upper left corner of the component.| ## Events | Name | Parameter | Description | | ------------------ | --------------------------------- | ----------- | | stop | - | Triggered when the frame animation stops | | click | - | Triggered when the component is clicked. | | longpress | - | Triggered when the component is long pressed. | | swipe5+ | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component.| ## Styles | Name | Type | Default Value | Mandatory | Description | | ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- | | width | <length> \| <percentage>5+ | - | No | Component width.

If this attribute is not set, the default value **0** is used. | | height | <length> \| <percentage>5+ | - | No | Component height.

If this attribute is not set, the default value **0** is used. | | padding | <length> | 0 | No | Shorthand attribute to set the padding for all sides.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.
- 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.
- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| | padding-[left\|top\|right\|bottom] | <length> | 0 | No | Left, top, right, and bottom padding. | | margin | <length> \| <percentage>5+ | 0 | No | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- 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.
- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| | margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | No | Left, top, right, and bottom margins. | | border-width | <length> | 0 | No | Shorthand attribute to set the margin for all sides. | | border-color | <color> | black | No | Shorthand attribute to set the color for all borders. | | border-radius | <length> | - | No | Radius of round-corner borders. | | background-color | <color> | - | No | Background color. | | opacity5+ | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. | | display | string | flex | No | How and whether to display the box containing an element. Available values are as follows:
- **flex**: flexible layout
- **none**: not rendered| | [left\|top] | <length> \| <percentage>6+ | - | No | left\|Edge of the element.
- **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.
- **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.| ## Methods | Name | Parameter | Description | | -------- | ---- | ---------------------------------------- | | start | - | Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame. | | pause | - | Pauses the frame animation playback of an image. | | stop | - | Stops the frame animation playback of an image. | | resume | - | Resumes the frame animation playback of an image. | | getState | - | Obtains the playback state. Available values are as follows:
- playing
- paused
- stopped| ## Example ```html
``` ```css /* xxx.css */ .container { flex-direction: column; justify-content: center; align-items: center; left: 0px; top: 0px; width: 454px; height: 454px; } .animator { width: 70px; height: 70px; } .btn-box { width: 264px; height: 120px; flex-wrap: wrap; justify-content: space-around; align-items: center; } .btn { border-radius: 8px; width: 120px; margin-top: 8px; } ``` ```js //xxx.js export default { data: { frames: [ { src: "/common/asserts/heart78.png", }, { src: "/common/asserts/heart79.png", }, { src: "/common/asserts/heart80.png", }, { src: "/common/asserts/heart81.png", }, { src: "/common/asserts/heart82.png", }, { src: "/common/asserts/heart83.png", }, { src: "/common/asserts/heart84.png", }, { src: "/common/asserts/heart85.png", }, { src: "/common/asserts/heart86.png", }, { src: "/common/asserts/heart87.png", }, { src: "/common/asserts/heart88.png", }, { src: "/common/asserts/heart89.png", }, { src: "/common/asserts/heart90.png", }, { src: "/common/asserts/heart91.png", }, { src: "/common/asserts/heart92.png", }, { src: "/common/asserts/heart93.png", }, { src: "/common/asserts/heart94.png", }, { src: "/common/asserts/heart95.png", }, { src: "/common/asserts/heart96.png", }, ], }, handleStart() { this.$refs.animator.start(); }, handlePause() { this.$refs.animator.pause(); }, handleResume() { this.$refs.animator.resume(); }, handleStop() { this.$refs.animator.stop(); }, }; ``` ![image-animator](figures/image-animator-lite.gif)