鸿蒙5.0开发进阶：JS组件-基础组件（image-animator）

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线
  
• 鸿蒙HarmonyOS NEXT开发技能最全学习路线指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部门项目附源码）
  

---

image-animator

图片帧动画播放器。
   说明
  该组件从从API version 4 开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
  子组件

不支持。
属性

名称类型默认值必填描述imagesArray<ImageFrame>-是 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片巨细和图片位置信息。目前支持以下图片格式：png、jpg和bmp。ImageFrame的具体说明请见表1。
说明：
1.使用时需要使用数据绑定的方式，如images = {{images}}，js中声明相应变量：images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]。
2.部门轻量级设备不支持原图片格式的解析。所以，在应用编译阶段，图片会被直接编译为可解析的位图（总字节数约：图片长x宽x4），并打包在应用安装包里，这会增加安装包的巨细。因此，在使用图片资源时，应尽量控制图片的分辨率，尺寸越大的图片对于空间的占用越显着。
iterationnumber | stringinfinite否设置帧动画播放次数。number表现固定次数，infinite摆列表现无限次数播放。reversebooleanfalse否设置播放顺序。false表现从第1张图片播放到最后1张图片； true表现从最后1张图片播放到第1张图片。fixedsizebooleantrue否设置图片巨细是否固定为组件巨细。 true表现图片巨细与组件巨细同等，此时设置图片的width 、height 、top 和left属性是无效的。false表现每一张图片的 width 、height 、top和left属性都要单独设置。durationstring-是设置单次播放时长。单位支持[s(秒)|ms(毫秒)]，默认单位为ms。 duration为0时，不播放图片。 值改变只会在下一次循环开始时见效。fillmode5+stringforwards否 指定帧动画实行竣事后的状态。可选项有：
- none：规复初始状态。
- forwards：保持帧动画竣事时的状态（在最后一个关键帧中界说）。
idstring-否组件的唯一标识。stylestring-否组件的样式声明。classstring-否组件的样式类，用于引用样式表。refstring-否用来指定指向子元素的引用信息，该引用将注册到父组件的$refs 属性对象上。 表1 ImageFrame说明
名称类型默认值必填描述src<uri>-是图片路径。width<length>0否图片宽度。height<length>0否图片高度。top<length>0否图片相对于组件左上角的纵向坐标。left<length>0否图片相对于组件左上角的横向坐标。 事件

名称参数描述stop-帧动画竣事时触发。click-点击动作触发该事件。longpress-长按动作触发该事件。swipe5+SwipeEvent组件上快速滑动后触发。 样式

名称类型默认值必填描述width<length> | <percentage>5+-否 设置组件自身的宽度。
未设置时组件宽度默认为0。
height<length> | <percentage>5+-否 设置组件自身的高度。
未设置时组件高度默认为0。
padding<length>0否 使用简写属性设置全部的内边距属性。
该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。
padding-[left|top|right|bottom]<length>0否设置左、上、右、下内边距属性。margin<length> | <percentage>5+0否 使用简写属性设置全部的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。
margin-[left|top|right|bottom]<length> | <percentage>5+0否设置左、上、右、下外边距属性。border-width<length>0否使用简写属性设置元素的全部边框宽度。border-color<color>black否使用简写属性设置元素的全部边框颜色。border-radius<length>-否border-radius属性是设置元素的外边框圆角半径。background-color<color>-否设置配景颜色。opacity5+number1否元素的透明度，取值范围为0到1，1表现为不透明，0表现为完全透明。displaystringflex否 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。
[left|top]<length> | <percentage>6+-否 left|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性界说了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性界说了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  方法

名称参数描述start-开始播放图片帧动画。再次调用，重新从第1帧开始播放。pause-暂停播放图片帧动画。stop-停止播放图片帧动画。resume-继续播放图片帧。getState- 获取播放状态。可能值有：
- playing：播放中
- paused：已暂停
- stopped：已停止。
  示例

1. <!-- xxx.hml -->
2. <div class="container">
3.   <image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" />
4.   <div class="btn-box">
5.     <input class="btn" type="button" value="start" @click="handleStart" />
6.     <input class="btn" type="button" value="stop" @click="handleStop" />
7.     <input class="btn" type="button" value="pause" @click="handlePause" />
8.     <input class="btn" type="button" value="resume" @click="handleResume" />
9.   </div>
10. </div>

复制代码

1. /* xxx.css */
2. .container {
3.   flex-direction: column;
4.   justify-content: center;
5.   align-items: center;
6.   left: 0px;
7.   top: 0px;
8.   width: 454px;
9.   height: 454px;
10. }
11. .animator {
12.   width: 70px;
13.   height: 70px;
14. }
15. .btn-box {
16.   width: 264px;
17.   height: 120px;
18.   flex-wrap: wrap;
19.   justify-content: space-around;
20.   align-items: center;
21. }
22. .btn {
23.   border-radius: 8px;
24.   width: 120px;
25.   margin-top: 8px;
26. }

复制代码

1. //xxx.js
2. export default {
3.   data: {
4.     frames: [
5.       {
6.         src: "/common/asserts/heart78.png",
7.       },
8.       {
9.         src: "/common/asserts/heart79.png",
10.       },
11.       {
12.         src: "/common/asserts/heart80.png",
13.       },
14.       {
15.         src: "/common/asserts/heart81.png",
16.       },
17.       {
18.         src: "/common/asserts/heart82.png",
19.       },
20.       {
21.         src: "/common/asserts/heart83.png",
22.       },
23.       {
24.         src: "/common/asserts/heart84.png",
25.       },
26.       {
27.         src: "/common/asserts/heart85.png",
28.       },
29.       {
30.         src: "/common/asserts/heart86.png",
31.       },
32.       {
33.         src: "/common/asserts/heart87.png",
34.       },
35.       {
36.         src: "/common/asserts/heart88.png",
37.       },
38.       {
39.         src: "/common/asserts/heart89.png",
40.       },
41.       {
42.         src: "/common/asserts/heart90.png",
43.       },
44.       {
45.         src: "/common/asserts/heart91.png",
46.       },
47.       {
48.         src: "/common/asserts/heart92.png",
49.       },
50.       {
51.         src: "/common/asserts/heart93.png",
52.       },
53.       {
54.         src: "/common/asserts/heart94.png",
55.       },
56.       {
57.         src: "/common/asserts/heart95.png",
58.       },
59.       {
60.         src: "/common/asserts/heart96.png",
61.       },
62.     ],
63.   },
64.   handleStart() {
65.     this.$refs.animator.start();
66.   },
67.   handlePause() {
68.     this.$refs.animator.pause();
69.   },
70.   handleResume() {
71.     this.$refs.animator.resume();
72.   },
73.   handleStop() {
74.     this.$refs.animator.stop();
75.   },
76. };

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。