5.11 image-animator组件

image-animator

图片帧动画播放器。

支持设备

手机	平板	智慧屏	智能穿戴
支持	支持	支持	支持

权限列表

ohos.permission.INTERNET（如果使用云端路径）

子组件

不支持。

属性

除支持通用属性外，还支持如下属性：

名称	类型	默认值	必填	描述
images	Array<ImageFrame>	-	是	设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg。ImageFrame的详细说明请见表1。 说明 使用时需要使用数据绑定的方式，如images = {{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：已停止。

 示例

html

<div class="container">
    <image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" reverse="true" predecode="3" fixedsize="true"/><!--images存放每一帧图片的集合-->
<!--duration设置所有图片播放完成所需时间    reverse判断照片的播放顺序从前往后还是从后往前  predecode提前缓存好指定数目的照片  fixedsize定义图片尺寸，ture与组件大小相同，否则需要为每张照片设置尺寸-->
    <div class="btn-box"><!--设置按钮控制播放状态-->
        <input class="btn" type="button" value="start" @click="handleStart" /><!--开始，@click设置点击触发事件名称-->
        <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>

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();
    },
};

图片

例样图片 

 

 

 

 

截屏获得图片，可以一个图不变扩大截屏范围，也可以截屏范围不变，缩小图像