5.11 image-animator组件
image-animator
支持设备
|
手机 |
平板 |
智慧屏 |
智能穿戴 |
|---|---|---|---|
|
支持 |
支持 |
支持 |
支持 |
权限列表
ohos.permission.INTERNET（如果使用云端路径）
子组件
不支持。
属性
除支持通用属性外，还支持如下属性：
|
名称 |
类型 |
默认值 |
必填 |
描述 |
|---|---|---|---|---|
|
images |
Array |
- |
是 |
设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg。ImageFrame的详细说明请见表1。
|
|
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 |
否 |
指定帧动画执行结束后的状态。可选项有：
|
|
名称 |
类型 |
默认值 |
必填 |
描述 |
|---|---|---|---|---|
|
src |
|
- |
是 |
图片路径，图片格式为svg，png和jpg。 |
|
width |
|
0 |
否 |
图片宽度。 |
|
height |
|
0 |
否 |
图片高度。 |
|
top |
|
0 |
否 |
图片相对于组件左上角的纵向坐标。 |
|
left |
|
0 |
否 |
图片相对于组件左上角的横向坐标。 |
|
duration6+ |
number |
- |
否 |
每一帧图片的播放时长，单位毫秒。 |
样式
支持通用样式。
事件
除支持通用事件外，还支持如下事件：
|
名称 |
参数 |
描述 |
|---|---|---|
|
start |
- |
帧动画启动时触发。 |
|
pause |
- |
帧动画暂停时触发。 |
|
stop |
- |
帧动画结束时触发。 |
|
resume |
- |
帧动画恢复时触发。 |
方法
支持通用方法外，还支持如下方法：
|
名称 |
参数 |
描述 |
|---|---|---|
|
start |
- |
开始播放图片帧动画。再次调用，重新从第1帧开始播放。 |
|
pause |
- |
暂停播放图片帧动画。 |
|
stop |
- |
停止播放图片帧动画。 |
|
resume |
- |
继续播放图片帧。 |
|
getState |
- |
获取播放状态。可能值有：
|
示例
html
css
.container { flex-direction: column;/*设置块元素中组件是横排还是竖排*/ justify-content: center; align-items: center; left: 0px; top: 0px; width: 454px; height: 454px;}.animator { width: 70px; height: 70px;}.t1{ 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
export default { data: { frames: [ { src: "/common/images/x1.png",//每帧图片的路径 }, { src: "/common/images/x2.png", }, { src: "/common/images/x3.png", }, { src: "/common/images/x4.png", }, { src: "/common/images/x5.png", }, { src: "/common/images/x4.png",//每帧图片的路径 }, { src: "/common/images/x3.png", }, { src: "/common/images/x2.png", }, { src: "/common/images/x1.png", }, ], }, handleStart() { this.$refs.animator.start();//设置触发事件 }, handlePause() { this.$refs.animator.pause();//需要注意的是使用 $ref 获取到当前动画的节点对象。 }, handleResume() { this.$refs.animator.resume(); }, handleStop() { this.$refs.animator.stop(); },};图片
例样图片
截屏获得图片，可以一个图不变扩大截屏范围，也可以截屏范围不变，缩小图像
