鸿蒙上做一个loading加载动画
本篇文章介绍了如何实现一个简单的 loading 加载动画，并且在文末提供了一个 demo 工程供读者下载学习。
作为一个 openharmony 南向开发者，接触北向应用开发并不多。北向开发 arkui 老是改来改去，对笔者这样的入门选手来说学习成本其实非常大，希望后面可以慢慢稳定下来吧。
最近努力学习了一些，下面将学习经验分享如下：
使用 imageanimator 帧动画组件实现一个自定义 loading 加载动画
使用 progress 进度条组件实现 loading 加载动画。
笔者开发环境：(文末附有 demo arkui 应用源码，一定得是以下 ide 和 sdk 版本或者更高版本才能编译运行，这也是坑点之一！！！)
开发板：润和软件 dayu200 开发板
openharmony 版本：openharmony3.2 beta5
ide：deveco studio 3.1.0.200
sdk：api9（3.2.10.6）
效果演示：
①涉及到的知识点
imageanimator 帧动画组件：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
progress 进度条组件：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
customdialogcontroller 自定义弹窗组件：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
定时器 api：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-timer.md
row 组件，沿水平方向布局容器：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md openharmony 组件导读：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-components-summary.md
②使用 imageanimator 帧动画组件自定义 loading 动画开发步骤
代码如下：
├── ets│ ├── loading # loading动画图片帧│ └── pages # ets代码│ ├── index.ets│ ├── loadingcomponent_part1.ets│ ├── loadingcomponent_part2.ets #imageanimator帧动画组件实现自定义loading加载动画│ └── loadingcomponent_part3.ets #progress进度条组件实现的loading加载动画
（1）将自定义的 loading 动画的图片帧放在 ets 目录下
组成自定义的 loading 动画的图片帧，详情请见文末提供的 demo 工程。
在 entrysrcmainets 新建一个 loading 目录，将其放在该目录下：
（2）用帧动画组件将动画封装成一个自定义组件
imageanimator 帧动画组件：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md在 entrysrcmainetspages 下新建 .ets 文件：//loadingcomponent_part1.ets @componentexport default struct loadingcomponent_part1 { private imagewidth: number | resource = 0 private imageheight: number | resource = 0 build() { column() { imageanimator() .images([ { src: '/loading/loading01.png', duration: 200, //每一帧图片的播放时长，单位毫秒 }, { src: '/loading/loading02.png', duration: 200, }, { src: '/loading/loading03.png', duration: 200, }, { src: '/loading/loading04.png', duration: 200, }, { src: '/loading/loading05.png', duration: 200, }, { src: '/loading/loading06.png', duration: 200, }]) .width(this.imagewidth) .height(this.imageheight) .iterations(-1) // 设置播放顺序。false表示从第1张图片播放到最后1张图片；true表示从最后1张图片播放到第1张图片。 .fixedsize(true) //设置图片大小是否固定为组件大小。true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的width 、height 、top和left属性都要单独设置。 .reverse(true) //设置播放顺序。false表示从第1张图片播放到最后1张图片；true表示从最后1张图片播放到第1张图片。 .fillmode(fillmode.none) //设置动画开始前和结束后的状态，可选值参见fillmode说明 .state(animationstatus.running) //running表示动画处于播放状态 } }}
（3）在主页面实现自定义的 loading 动画
首先导入自定义的 loading 动画：
import loading1 from './loadingcomponent_part1';
使用 customdialogcontroller 自定义弹窗组件自定义一个弹窗用于在主页面实现 loading 动画。
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
代码如下：
struct index { //用来绘制loading动画的 // 要打开在点击事件中添加 this.loading1.open(); // 要关闭在点击事件中添加 this.loading1.close(); // 通过customdialogcontroller类显示自定义弹窗。 private loading1: customdialogcontroller = new customdialogcontroller({ builder: loadingprogress_part1(), alignment: dialogalignment.center, offset: ({ dx: 0, dy: 0 }), autocancel: false, customstyle: true });}//用来绘制loading动画的@customdialogstruct loadingprogress_part1{ controller: customdialogcontroller; build() { column() { loading1({ imagewidth: 80, imageheight: 80 }).margin({top:350}) } .width('100%') .height('100%') .alignitems(horizontalalign.center) .backgroundcolor(color.white) }}
使用定时器 api 控制 loading 动画：
button(this.message1) .margin({top:100}) .fontweight(fontweight.normal) .backgroundcolor(color.green) //设置按钮颜色 .onclick(() => { //开始绘制loading动画 this.loading1.open(); //使用一个settimeout定时器,settimeout中第一个参数使用 () => { 要执行的函数 } //this.ocrdialog.close();是关闭loading动画 settimeout( () => {this.loading1.close();} , 3000); })
实现效果：
③使用 progress 进度条组件实现 loading加载动画开发步骤
progress 进度条组件：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
部分代码如下：
struct index { @state i: number = 0 //abouttoappear 函数在创建自定义组件的新实例后，在执行其build函数之前执行。 abouttoappear(){ //定时器中的setinterval： 重复调用一个函数，在每次调用之间具有固定的时间延迟。 setinterval( () => { this.i = this.i + 10 } , 300); } build() {... progress({ value: this.i, type: progresstype.linear }) .width(200) .margin({top:30}) progress({ value: this.i, total: 150, type: progresstype.scalering }) .color(color.green).value(this.i).width(50) .margin({top:30}) .style({ strokewidth: 15, scalecount: 15, scalewidth: 5 })...}}
学技术 | 摄像头的工作原理
矩阵LED调光器可在RGBW LED中实现精确的色彩控制和图案制作
人工智能+大数据为什么受到了老年人的认可
矩阵式转换器AC直接方式的控制方法
云服务器是高效灵活的选择
鸿蒙上做一个loading加载动画
宏光MINI和Model3 究竟谁更能代表新能源汽车
Intel 7nm对标台积电 5nm,预计会在2021年量产
本源量子与复旦大学合作在分子晶体结构预测上获新进展
IBM推AI“化身”Sam，将用于回答海洋垃圾相关问题
用CD4017B制作多路脉冲分配器
单细胞+转录组测序揭示GABA信号调控神经发生
测试治具和工装夹具的区别是什么
无人驾驶的未来，究竟长什么样？
滞环比较器在电源中的应用
HJ-FR3协作机器人为什么备受高校和科研机构青睐？
运营商与互联网、大数据、物联网、人工智能的相互关系
NAS存储市场群雄逐鹿 普安科技首当其冲
IBM罗睿兰在“中国发展高层论坛”2020年会开幕式上致辞
哈苏获得DxO逆天102分的背后真相是？
作为一个 openharmony 南向开发者，接触北向应用开发并不多。北向开发 arkui 老是改来改去，对笔者这样的入门选手来说学习成本其实非常大，希望后面可以慢慢稳定下来吧。
最近努力学习了一些，下面将学习经验分享如下：
使用 imageanimator 帧动画组件实现一个自定义 loading 加载动画
使用 progress 进度条组件实现 loading 加载动画。
笔者开发环境：(文末附有 demo arkui 应用源码，一定得是以下 ide 和 sdk 版本或者更高版本才能编译运行，这也是坑点之一！！！)
开发板：润和软件 dayu200 开发板
openharmony 版本：openharmony3.2 beta5
ide：deveco studio 3.1.0.200
sdk：api9（3.2.10.6）
效果演示：
①涉及到的知识点
imageanimator 帧动画组件：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
progress 进度条组件：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
customdialogcontroller 自定义弹窗组件：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
定时器 api：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-timer.md
row 组件，沿水平方向布局容器：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md openharmony 组件导读：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-components-summary.md
②使用 imageanimator 帧动画组件自定义 loading 动画开发步骤
代码如下：
├── ets│ ├── loading # loading动画图片帧│ └── pages # ets代码│ ├── index.ets│ ├── loadingcomponent_part1.ets│ ├── loadingcomponent_part2.ets #imageanimator帧动画组件实现自定义loading加载动画│ └── loadingcomponent_part3.ets #progress进度条组件实现的loading加载动画
（1）将自定义的 loading 动画的图片帧放在 ets 目录下
组成自定义的 loading 动画的图片帧，详情请见文末提供的 demo 工程。
在 entrysrcmainets 新建一个 loading 目录，将其放在该目录下：
（2）用帧动画组件将动画封装成一个自定义组件
imageanimator 帧动画组件：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md在 entrysrcmainetspages 下新建 .ets 文件：//loadingcomponent_part1.ets @componentexport default struct loadingcomponent_part1 { private imagewidth: number | resource = 0 private imageheight: number | resource = 0 build() { column() { imageanimator() .images([ { src: '/loading/loading01.png', duration: 200, //每一帧图片的播放时长，单位毫秒 }, { src: '/loading/loading02.png', duration: 200, }, { src: '/loading/loading03.png', duration: 200, }, { src: '/loading/loading04.png', duration: 200, }, { src: '/loading/loading05.png', duration: 200, }, { src: '/loading/loading06.png', duration: 200, }]) .width(this.imagewidth) .height(this.imageheight) .iterations(-1) // 设置播放顺序。false表示从第1张图片播放到最后1张图片；true表示从最后1张图片播放到第1张图片。 .fixedsize(true) //设置图片大小是否固定为组件大小。true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的width 、height 、top和left属性都要单独设置。 .reverse(true) //设置播放顺序。false表示从第1张图片播放到最后1张图片；true表示从最后1张图片播放到第1张图片。 .fillmode(fillmode.none) //设置动画开始前和结束后的状态，可选值参见fillmode说明 .state(animationstatus.running) //running表示动画处于播放状态 } }}
（3）在主页面实现自定义的 loading 动画
首先导入自定义的 loading 动画：
import loading1 from './loadingcomponent_part1';
使用 customdialogcontroller 自定义弹窗组件自定义一个弹窗用于在主页面实现 loading 动画。
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
代码如下：
struct index { //用来绘制loading动画的 // 要打开在点击事件中添加 this.loading1.open(); // 要关闭在点击事件中添加 this.loading1.close(); // 通过customdialogcontroller类显示自定义弹窗。 private loading1: customdialogcontroller = new customdialogcontroller({ builder: loadingprogress_part1(), alignment: dialogalignment.center, offset: ({ dx: 0, dy: 0 }), autocancel: false, customstyle: true });}//用来绘制loading动画的@customdialogstruct loadingprogress_part1{ controller: customdialogcontroller; build() { column() { loading1({ imagewidth: 80, imageheight: 80 }).margin({top:350}) } .width('100%') .height('100%') .alignitems(horizontalalign.center) .backgroundcolor(color.white) }}
使用定时器 api 控制 loading 动画：
button(this.message1) .margin({top:100}) .fontweight(fontweight.normal) .backgroundcolor(color.green) //设置按钮颜色 .onclick(() => { //开始绘制loading动画 this.loading1.open(); //使用一个settimeout定时器,settimeout中第一个参数使用 () => { 要执行的函数 } //this.ocrdialog.close();是关闭loading动画 settimeout( () => {this.loading1.close();} , 3000); })
实现效果：
③使用 progress 进度条组件实现 loading加载动画开发步骤
progress 进度条组件：
https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
部分代码如下：
struct index { @state i: number = 0 //abouttoappear 函数在创建自定义组件的新实例后，在执行其build函数之前执行。 abouttoappear(){ //定时器中的setinterval： 重复调用一个函数，在每次调用之间具有固定的时间延迟。 setinterval( () => { this.i = this.i + 10 } , 300); } build() {... progress({ value: this.i, type: progresstype.linear }) .width(200) .margin({top:30}) progress({ value: this.i, total: 150, type: progresstype.scalering }) .color(color.green).value(this.i).width(50) .margin({top:30}) .style({ strokewidth: 15, scalecount: 15, scalewidth: 5 })...}}
学技术 | 摄像头的工作原理
矩阵LED调光器可在RGBW LED中实现精确的色彩控制和图案制作
人工智能+大数据为什么受到了老年人的认可
矩阵式转换器AC直接方式的控制方法
云服务器是高效灵活的选择
鸿蒙上做一个loading加载动画
宏光MINI和Model3 究竟谁更能代表新能源汽车
Intel 7nm对标台积电 5nm,预计会在2021年量产
本源量子与复旦大学合作在分子晶体结构预测上获新进展
IBM推AI“化身”Sam，将用于回答海洋垃圾相关问题
用CD4017B制作多路脉冲分配器
单细胞+转录组测序揭示GABA信号调控神经发生
测试治具和工装夹具的区别是什么
无人驾驶的未来，究竟长什么样？
滞环比较器在电源中的应用
HJ-FR3协作机器人为什么备受高校和科研机构青睐？
运营商与互联网、大数据、物联网、人工智能的相互关系
NAS存储市场群雄逐鹿 普安科技首当其冲
IBM罗睿兰在“中国发展高层论坛”2020年会开幕式上致辞
哈苏获得DxO逆天102分的背后真相是？