image-animator

About 14 min

image-animator

图片帧动画播放器。

子组件

不支持。

属性

除支持通用属性外,还支持如下属性:

名称

类型

默认值

必填

描述

images

Array<ImageFrame>

-

设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式:png、jpg。ImageFrame的详细说明请见表1

说明:

使用时需要使用数据绑定的方式,如images = ,js中声明相应变量:images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]。

js中声明相应变量:images: [{src: "/common/heart-rate01.png", duration: "100"}, {src: "/common/heart-rate02.png", duration: "200"}]。支持配置每一帧图片的时长,单位毫秒。6+

predecode6+

number

0

是否启用预解码,默认值为0,即不启用预解码,如该值设为2,则播放当前页时会提前加载后面两张图片至缓存以提升性能。

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时,不播放图片。 值改变只会在下一次循环开始时生效,当images中设置了单独的duration后,该属性设置无效。

fillmode5+

string

forwards

指定帧动画执行结束后的状态。可选项有:

  • none:恢复初始状态。
  • forwards:保持帧动画结束时的状态(在最后一个关键帧中定义)。

表 1 ImageFrame说明

名称

类型

默认值

必填

描述

src

<uri>

-

图片路径,图片格式为svg,png和jpg

width

<length>

0

图片宽度。

height

<length>

0

图片高度。

top

<length>

0

图片相对于组件左上角的纵向坐标。

left

<length>

0

图片相对于组件左上角的横向坐标。

duration6+

number

-

每一帧图片的播放时长,单位毫秒。

样式

支持通用样式

事件

除支持通用事件外,还支持如下事件:

名称

参数

描述

start

-

帧动画启动时触发。

pause

-

帧动画暂停时触发。

stop

-

帧动画结束时触发。

resume

-

帧动画恢复时触发。

方法

支持通用方法外,还支持如下方法:

名称

参数

描述

start

-

开始播放图片帧动画。再次调用,重新从第1帧开始播放。

pause

-

暂停播放图片帧动画。

stop

-

停止播放图片帧动画。

resume

-

继续播放图片帧。

getState

-

获取播放状态。可能值有:

  • playing:播放中
  • paused:已暂停
  • stopped:已停止。

示例

<!-- 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>
1
2
3
4
5
6
7
8
9
10
/* 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//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();
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76