1# image-animator 2 3> **说明：** 4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6图片帧动画播放器。 7 8 9## 子组件 10 11不支持。 12 13 14## 属性 15 16除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 17 18| 名称 | 类型 | 默认值 | 必填 | 描述 | 19| ---------------------- | -------------------------- | -------- | ---- | ---------------------------------------- | 20| images | Array<ImageFrame> | - | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg。ImageFrame的详细说明请见表 ImageFrame说明。<br/>使用时需要使用数据绑定的方式：<br>- hml文件中引用图片资源：`images = {{images}}`，<br>- js文件中声明相应变量：<br>`images: [{src: "/common/heart-rate01.png",duration:"100"}]`。从API Version 6 开始，支持配置每一帧图片的时长，单位毫秒。 | 21| predecode<sup>6+</sup> | number | 0 | 否 | 是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。 | 22| iteration | number \| string | infinite | 否 | 设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。 | 23| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。 | 24| fixedsize | boolean | true | 否 | 设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。 | 25| duration | string | - | 是 | 设置单次播放时长。单位支持[s(秒)\|ms(毫秒)]，默认单位为ms。 duration为0时，不播放图片。 值改变只会在下一次循环开始时生效，当images中设置了单独的duration后，该属性设置无效。 | 26| fillmode<sup>5+</sup> | string | forwards | 否 | 指定帧动画执行结束后的状态。可选项有：<br/>- none：恢复初始状态。<br/>- forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。 | 27 28**表1** ImageFrame说明 29 30| 名称 | 类型 | 默认值 | 必填 | 描述 | 31| --------------------- | -------------- | ---- | ---- | ---------------------- | 32| src | <uri> | - | 是 | 图片路径，图片格式支持svg、png、jpg和heif。 | 33| width | <length> | 0 | 否 | 图片宽度。 | 34| height | <length> | 0 | 否 | 图片高度。 | 35| top | <length> | 0 | 否 | 图片相对于组件左上角的纵向坐标。 | 36| left | <length> | 0 | 否 | 图片相对于组件左上角的横向坐标。 | 37| duration<sup>6+</sup> | number | - | 否 | 每一帧图片的播放时长，单位毫秒。 | 38 39 40## 样式 41 42支持[通用样式](js-components-common-styles.md)。 43 44 45## 事件 46 47除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 48 49| 名称 | 参数 | 描述 | 50| ------ | ---- | --------- | 51| start | - | 帧动画启动时触发。 | 52| pause | - | 帧动画暂停时触发。 | 53| stop | - | 帧动画结束时触发。 | 54| resume | - | 帧动画恢复时触发。 | 55 56 57## 方法 58 59支持[通用方法](js-components-common-methods.md)外，还支持如下方法： 60 61| 名称 | 参数 | 描述 | 62| -------- | ---- | ---------------------------------------- | 63| start | - | 开始播放图片帧动画。再次调用，重新从第1帧开始播放。 | 64| pause | - | 暂停播放图片帧动画。 | 65| stop | - | 停止播放图片帧动画。 | 66| resume | - | 继续播放图片帧。 | 67| getState | - | 获取播放状态。<br/>- playing：播放中<br/>- paused：已暂停<br/>- stopped：已停止。 | 68 69 70## 示例 71 72```html 73<!-- xxx.hml --> 74<div class="container"> 75 <image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" /> 76 <div class="btn-box"> 77 <input class="btn" type="button" value="start" @click="handleStart" /> 78 <input class="btn" type="button" value="stop" @click="handleStop" /> 79 <input class="btn" type="button" value="pause" @click="handlePause" /> 80 <input class="btn" type="button" value="resume" @click="handleResume" /> 81 </div> 82</div> 83``` 84 85```css 86/* xxx.css */ 87.container { 88 flex-direction: column; 89 justify-content: center; 90 align-items: center; 91 left: 0px; 92 top: 0px; 93 width: 454px; 94 height: 454px; 95} 96.animator { 97 width: 70px; 98 height: 70px; 99} 100.btn-box { 101 width: 264px; 102 height: 120px; 103 flex-wrap: wrap; 104 justify-content: space-around; 105 align-items: center; 106} 107.btn { 108 border-radius: 8px; 109 width: 120px; 110 margin-top: 8px; 111} 112``` 113 114```js 115//xxx.js 116export default { 117 data: { 118 frames: [ 119 { 120 src: "/common/asserts/heart78.png", 121 }, 122 { 123 src: "/common/asserts/heart79.png", 124 }, 125 { 126 src: "/common/asserts/heart80.png", 127 }, 128 { 129 src: "/common/asserts/heart81.png", 130 }, 131 { 132 src: "/common/asserts/heart82.png", 133 }, 134 { 135 src: "/common/asserts/heart83.png", 136 }, 137 { 138 src: "/common/asserts/heart84.png", 139 }, 140 { 141 src: "/common/asserts/heart85.png", 142 }, 143 { 144 src: "/common/asserts/heart86.png", 145 }, 146 { 147 src: "/common/asserts/heart87.png", 148 }, 149 { 150 src: "/common/asserts/heart88.png", 151 }, 152 { 153 src: "/common/asserts/heart89.png", 154 }, 155 { 156 src: "/common/asserts/heart90.png", 157 }, 158 { 159 src: "/common/asserts/heart91.png", 160 }, 161 { 162 src: "/common/asserts/heart92.png", 163 }, 164 { 165 src: "/common/asserts/heart93.png", 166 }, 167 { 168 src: "/common/asserts/heart94.png", 169 }, 170 { 171 src: "/common/asserts/heart95.png", 172 }, 173 { 174 src: "/common/asserts/heart96.png", 175 }, 176 ], 177 }, 178 handleStart() { 179 this.$refs.animator.start(); 180 }, 181 handlePause() { 182 this.$refs.animator.pause(); 183 }, 184 handleResume() { 185 this.$refs.animator.resume(); 186 }, 187 handleStop() { 188 this.$refs.animator.stop(); 189 }, 190}; 191``` 192 193 194
