harmony 鸿蒙image-animator
image-animator
The <image-animator> 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 | 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
<!-- xxx.hml -->
<div class="container">
<image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" />
<div class="btn-box">
<input class="btn" type="button" value="start" @click="handleStart" />
<input class="btn" type="button" value="stop" @click="handleStop" />
<input class="btn" type="button" value="pause" @click="handlePause" />
<input class="btn" type="button" value="resume" @click="handleResume" />
</div>
</div>
/* 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;
}
//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();
},
};
你可能感兴趣的鸿蒙文章
harmony 鸿蒙JavaScript-compatible Web-like Development Paradigm (ArkUI.Lite)
0
赞
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦