image-animator
图片帧动画播放器。
子组件
不支持。
属性
名称
|
类型
|
默认值
|
必填
|
描述
|
images
|
Array<ImageFrame>
|
-
|
是
|
设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式:png、jpg。ImageFrame的详细说明请见表1。
说明: 使用时需要使用数据绑定的方式,如images = {{images}},js中声明相应变量:images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]。
|
iteration
|
number | string
|
infinite
|
否
|
设置帧动画播放次数。number表示固定次数,infinite枚举表示无限次数播放。
|
reverse
|
boolean
|
false
|
否
|
设置播放顺序。false表示从第1张图片播放到最后1张图片; true表示从最后1张图片播放到第1张图片。
|
fixedsize
|
boolean
|
true
|
否
|
设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致,此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。
|
duration
|
string
|
-
|
是
|
设置单次播放时长。单位支持[s(秒)|ms(毫秒)],默认单位为ms。 duration为0时,不播放图片。 值改变只会在下一次循环开始时生效。
|
fillmode5+
|
string
|
forwards
|
否
|
指定帧动画执行结束后的状态。可选项有:
- none:恢复初始状态。
- forwards:保持帧动画结束时的状态(在最后一个关键帧中定义)。
|
id
|
string
|
-
|
否
|
组件的唯一标识。
|
style
|
string
|
-
|
否
|
组件的样式声明。
|
class
|
string
|
-
|
否
|
组件的样式类,用于引用样式表。
|
ref
|
string
|
-
|
否
|
用来指定指向子元素或子组件的引用信息,该引用将注册到父组件的$refs 属性对象上。
|
disabled
|
boolean
|
false
|
否
|
当前组件是否被禁用,在禁用场景下,组件将无法响应用户交互。
|
data
|
string
|
-
|
否
|
给当前组件设置data属性,进行相应的数据存储和读取。
|
表 1 ImageFrame说明
名称
|
类型
|
默认值
|
必填
|
描述
|
src
|
<uri>
|
-
|
是
|
图片路径,图片格式为svg,png和jpg。
|
width
|
<length>
|
0
|
否
|
图片宽度。
|
height
|
<length>
|
0
|
否
|
图片高度。
|
top
|
<length>
|
0
|
否
|
图片相对于组件左上角的纵向坐标。
|
left
|
<length>
|
0
|
否
|
图片相对于组件左上角的横向坐标。
|
事件
名称
|
参数
|
描述
|
start
|
-
|
帧动画启动时触发。
|
pause
|
-
|
帧动画暂停时触发。
|
stop
|
-
|
帧动画结束时触发。
|
resume
|
-
|
帧动画恢复时触发。
|
touchstart
|
TouchEvent
|
手指刚触摸屏幕时触发该事件。
|
touchmove
|
TouchEvent
|
手指触摸屏幕后移动时触发该事件。
|
touchcancel
|
TouchEvent
|
手指触摸屏幕中动作被打断时触发该事件。
|
touchend
|
TouchEvent
|
手指触摸结束离开屏幕时触发该事件。
|
click
|
-
|
点击动作触发该事件。
|
longpress
|
-
|
长按动作触发该事件。
|
swipe5+
|
SwipeEvent
|
组件上快速滑动后触发。
|
样式
名称
|
类型
|
默认值
|
必填
|
描述
|
width
|
<length> | <percentage>
|
-
|
否
|
设置组件自身的宽度。
缺省时使用元素自身内容需要的宽度。
|
height
|
<length> | <percentage>
|
-
|
否
|
设置组件自身的高度。
缺省时使用元素自身内容需要的高度。
|
padding
|
<length> | <percentage>5+
|
0
|
否
|
使用简写属性设置所有的内边距属性。
该属性可以有1到4个值: 指定一个值时,该值指定四个边的内边距。
指定两个值时,第一个值指定上下两边的内边距,第二个指定左右两边的内边距。
指定三个值时,第一个指定上边的内边距,第二个指定左右两边的内边距,第三个指定下边的内边距。
指定四个值时分别为上、右、下、左边的内边距(顺时针顺序)。
|
padding-[left|top|right|bottom]
|
<length> | <percentage>5+
|
0
|
否
|
设置左、上、右、下内边距属性。
|
padding-[start|end]
|
<length> | <percentage>5+
|
0
|
否
|
设置起始和末端内边距属性。
|
margin
|
<length> | <percentage>5+
|
0
|
否
|
使用简写属性设置所有的外边距属性,该属性可以有1到4个值。
只有一个值时,这个值会被指定给全部的四个边。
两个值时,第一个值被匹配给上和下,第二个值被匹配给左和右。
三个值时,第一个值被匹配给上, 第二个值被匹配给左和右,第三个值被匹配给下。
四个值时,会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。
|
margin-[left|top|right|bottom]
|
<length> | <percentage>5+
|
0
|
否
|
设置左、上、右、下外边距属性。
|
margin-[start|end]
|
<length> | <percentage>5+
|
0
|
否
|
设置起始和末端外边距属性。
|
border
|
-
|
0
|
否
|
使用简写属性设置所有的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置时,各属性值为默认值。
|
border-style
|
string
|
solid
|
否
|
使用简写属性设置所有边框的样式,可选值为:
- dotted:显示为一系列圆点,圆点半径为border-width的一半。
- dashed:显示为一系列短的方形虚线。
|
border-[left|top|right|bottom]-style
|
string
|
solid
|
否
|
分别设置左、上、右、下四个边框的样式,可选值为dotted、dashed、solid。
|
border-[left|top|right|bottom]
|
-
|
-
|
否
|
使用简写属性设置对应位置的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置的值为默认值。
|
border-width
|
<length>
|
0
|
否
|
使用简写属性设置元素的所有边框宽度,或者单独为各边边框设置宽度。
|
border-[left|top|right|bottom]-width
|
<length>
|
0
|
否
|
分别设置左、上、右、下四个边框的宽度。
|
border-color
|
<color>
|
black
|
否
|
使用简写属性设置元素的所有边框颜色,或者单独为各边边框设置颜色。
|
border-[left|top|right|bottom]-color
|
<color>
|
black
|
否
|
分别设置左、上、右、下四个边框的颜色。
|
border-radius
|
<length>
|
-
|
否
|
border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width,border-[left|top|right|bottom]-color ,border-[left|top|right|bottom]-style,如果要设置color、width和style,需要将四个方向一起设置(border-width、border-color、border-style)。
|
border-[top|bottom]-[left|right]-radius
|
<length>
|
-
|
否
|
分别设置左上,右上,右下和左下四个角的圆角半径。
|
background
|
<linear-gradient>
|
-
|
否
|
仅支持设置渐变样式,与background-color、background-image不兼容。
|
background-color
|
<color>
|
-
|
否
|
设置背景颜色。
|
background-image
|
string
|
-
|
否
|
设置背景图片。与background-color、background不兼容;支持本地图片资源地址。
示例:
- background-image: url("/common/background.png")
|
background-size
|
- string
- <length> <length>
- <percentage> <percentage>
|
auto
|
否
|
设置背景图片的大小。
|
background-repeat
|
string
|
repeat
|
否
|
针对重复背景图像样式进行设置,背景图像默认在水平和垂直方向上重复。
- repeat:在水平轴和竖直轴上同时重复绘制图片。
- repeat-x:只在水平轴上重复绘制图片。
- repeat-y:只在竖直轴上重复绘制图片。
- no-repeat:不会重复绘制图片。
|
background-position
|
- string string
- <length> <length>
- <percentage> <percentage>
|
0px 0px
|
否
|
- 关键词方式:如果仅规定了一个关键词,那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
- left:水平方向上最左侧。
- right:水平方向上最右侧。
- top:竖直方向上最顶部。
- bottom:竖直方向上最底部。
- center:水平方向或竖直方向上中间位置。
- length值参数方式:第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值,另外一个值将是50%。
- 百分比参数方式:第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值,另外一个值为50%。
- 可以混合使用<percentage>和<length>
|
opacity
|
number
|
1
|
否
|
元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。
|
display
|
string
|
flex
|
否
|
确定一个元素所产生的框的类型,可选值为:
|
visibility
|
string
|
visible
|
否
|
是否显示元素所产生的框。不可见的框会占用布局(将'display'属性设置为'none'来完全去除框),可选值为:
- visible:元素正常显示。
- hidden:隐藏元素,但是其他元素的布局不改变,相当于此元素变成透明。
说明: visibility和display样式都设置时,仅display生效
|
flex
|
-
|
-
|
否
|
规定当前组件如何适应父组件中的可用空间。
flex可以指定1个,2个5+或3个5+值。
单值语法:
- 一个无单位数:用来设置组件的flex-grow
- 一个有效的宽度值5+:用来设置组件的flex-basis
双值语法5+:
第一个值必须是无单位数,用来设置组件的flex-grow。第二个值是以下之一:
- 一个无单位数:用来设置组件的flex-shrink
- 一个有效的宽度值:用来设置组件的flex-basis
三值语法5+:
第一个值必须是无单位数,用来设置组件的flex-grow;第二个值必须是无单位数,用来设置组件的flex-shrink;第三个值必须是一个有效的宽度值,用来设置组件的flex-basis。
说明: 仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。
|
flex-grow
|
number
|
0
|
否
|
设置组件的拉伸样式,指定父组件容器主轴方向上剩余空间(容器本身大小减去所有flex子元素占用的大小)的分配权重。0为不伸展。
说明: 仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。
|
flex-shrink
|
number
|
1
|
否
|
设置组件的收缩样式,元素仅在默认宽度之和大于容器的时候才会发生收缩,0为不收缩。
说明: 仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。
|
flex-basis
|
<length>
|
-
|
否
|
设置组件在主轴方向上的初始大小。
说明: 仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。
|
position
|
string
|
relative
|
否
|
设置元素的定位类型,不支持动态变更。
- fixed:相对与整个界面进行定位。
- absolute:相对于父元素进行定位。
- relative:相对于其正常位置进行定位。
说明: absolute属性仅在父容器为<div>、<stack>时生效。
|
[left|top|right|bottom]
|
<length>
|
-
|
否
|
left|top|right|bottom需要配合position样式使用,来确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
- right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
- bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
|
方法
名称
|
参数
|
描述
|
start
|
-
|
开始播放图片帧动画。再次调用,重新从第1帧开始播放。
|
pause
|
-
|
暂停播放图片帧动画。
|
stop
|
-
|
停止播放图片帧动画。
|
resume
|
-
|
继续播放图片帧。
|
getState
|
-
|
获取播放状态。可能值有:
- playing:播放中
- paused:已暂停
- stopped:已停止。
|
示例
<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>
.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;
}
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();
},
};