[OpenHarmony北向应用开发] 做一个 loading加载动画 - 行业资讯 -

当前位置:首页  >  行业资讯  > 正文

[OpenHarmony北向应用开发] 做一个 loading加载动画

[OpenHarmony北向应用开发] 做一个 loading加载动画
2023-04-20 18:55:52 来源:OpenHarmony开发经验

本篇文章介绍了如何实现一个简单的loading加载动画,并且在提供了一个demo工程供读者下载学习。


(资料图)

loading加载动画demo下载地址: https://gitee.com/from-north-to-north/open-armony-north/tree/master/loading_animation

作为一个OpenHarmony南向开发者,接触北向应用开发并不多。北向开发ArkUI老是改来改去,对笔者这样的入门选手来说学习成本其实非常大,希望后面可以慢慢稳定下来吧。最近努力学习了一些,下面将学习经验分享如下:

通过本文您将了解:

1、使用ImageAnimator帧动画组件实现一个自定义loading加载动画。

2、使用 Progress 进度条组件实现 loading加载动画。

笔者开发环境:(demo ArkUI应用源码,一定得是以下IDE和SDK版本或者更高版本才能编译运行,这也是坑点之一!!!)

开发板:润和软件DAYU200开发板OpenHarmony版本:OpenHarmony3.2 Beta5IDE:DevEco Studio 3.1.0.200SDK:API9(3.2.10.6)

效果演示

1. 涉及到的知识点 (先大概了解一下,知道要用到这些东西就行)

创建自定义组件

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/arkts-create-custom-components.md

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/arkts-page-custom-components-lifecycle.md

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

2、使用ImageAnimator帧动画组件自定义loading动画开发步骤:

├── ets│   ├── loading      # loading动画图片帧│   └── pages        # ets代码│       ├── Index.ets│       ├── loadingComponent_part1.ets│       ├── loadingComponent_part2.ets #ImageAnimator帧动画组件实现自定义loading加载动画│       └── loadingComponent_part3.ets #Progress进度条组件实现的loading加载动画

2.1 将自定义的loading动画的图片帧放在ets目录下

组成自定义的loading动画的图片帧,详情请见文末提供的demo工程

在entry\\src\\main\\ets新建一个loading目录,将其放在该目录下

2.2 用帧动画组件将动画封装成一个自定义组件

ImageAnimator帧动画组件在entry\\src\\main\\ets\\pages下新建.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表示动画处于播放状态    }  }}

2.3 在主页面实现自定义的loading动画(完整代码见文末demo工程)

首先导入自定义的loading动画
import loading1 from "./loadingComponent_part1";
使用CustomDialogController自定义弹窗组件自定义一个弹窗用于在主页面实现loading动画
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);          })

实现效果

3、使用 Progress 进度条组件实现 loading加载动画开发步骤:

Progress进度条组件

(完整代码见文末demo工程)

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 })...}}

实现效果

审核编辑 黄宇

标签:

(责任编辑:news01)
全球动态:4月18日基金净值:华泰柏瑞多策略混合A最新净值1.8976,跌0.68%

全球动态:4月18日基金净值:华泰柏瑞多策略混合A最新净值1.8976,跌0.68%

4月18日,华泰柏瑞多策略混合A最新单位净值为1 8976元,累计净值为2 3138元,较前一交易日下跌0 68%...
04-19 07:28:22
天天热讯:黑龙江省有哪些市有疫情_黑龙江省有哪些市

天天热讯:黑龙江省有哪些市有疫情_黑龙江省有哪些市

1、黑龙江省,系由境内最大河流黑龙江而得名,位于祖国的最东北部,面积45万平方千米。2、人口3577万,...
04-19 07:22:05
环球讯息:中国航信股份有限公司_中国航信eterm官网

环球讯息:中国航信股份有限公司_中国航信eterm官网

1、ETERM指令(一)登录1 进入系统>$$OPENTIPC32 输入工作号>SI:工作号
04-19 06:42:36
OPPO Find X6 Pro影像解析:手机影像“全主摄”时代来临 | 速途网

OPPO Find X6 Pro影像解析:手机影像“全主摄”时代来临 | 速途网

本文由速途网(sootoo123)原创作者 乔志斌在智能手机时代,得益于便携性与互联网属性,让其成为人们记...
04-19 06:21:56
总价值超亿元 300只中国牧羊犬齐亮相新民

总价值超亿元 300只中国牧羊犬齐亮相新民

4月16日,中牧风向标“木火通明杯”全国首届中国牧羊犬春季博览会于新民市举行,此次博览会汇集了国内30...
04-19 05:58:52
ST金大2022年净利6867.34万同比扭亏为盈 处置子公司股权收益增加

ST金大2022年净利6867.34万同比扭亏为盈 处置子公司股权收益增加

ST金大2022年净利6867 34万同比扭亏为盈处置子公司股权收益增加2023 4 1823:22:50挖贝网于彤挖贝网4月18日,ST金大(8
04-19 05:50:19
真实赛车驾驶模拟器好玩吗 真实赛车驾驶模拟器玩法简介

真实赛车驾驶模拟器好玩吗 真实赛车驾驶模拟器玩法简介

期待已久的手游真实赛车驾驶模拟器即将登陆九游,这款手机游戏吸引了大批玩家的关注,想下载这款游戏,...
04-19 05:06:41
信息:in order to do的意思_in order to是什么意思

信息:in order to do的意思_in order to是什么意思

1、“为了”,做目的状语,可放在句首或句中。2、Inordertogetgoodmarks,hestudiedveryhard =Hestud
04-19 04:42:19
家庭教师人物介绍大全 家庭教师人物介绍 当前速递

家庭教师人物介绍大全 家庭教师人物介绍 当前速递

今天来聊聊关于家庭教师人物介绍大全,家庭教师人物介绍的文章,现在就为大家来简单介绍下家庭教师人物...
04-19 04:01:32
亨迪药业(301211):4月18日北向资金增持12.92万股_当前短讯

亨迪药业(301211):4月18日北向资金增持12.92万股_当前短讯

4月18日北向资金增持12 92万股亨迪药业。近5个交易日中,获北向资金增持的有3天,累计净增持32 78万股...
04-19 03:51:33
市场监管总局批准建立太赫兹辐射功率基准装置

市场监管总局批准建立太赫兹辐射功率基准装置

市场监管总局近日批准建立太赫兹辐射功率基准装置,填补了我国太赫兹辐射功率量值传递与溯源能力空白,...
04-19 03:17:20
当前头条:“数字之城”杭州背后的“税力量”

当前头条:“数字之城”杭州背后的“税力量”

在位于杭州余杭的之江实验室展厅内,随处可见高科技成果展示和互动体验场景,科技感、未来感扑面而来。...
04-19 03:11:04
春日“悦”读好时光,杨浦这里飘来浓浓书香~

春日“悦”读好时光,杨浦这里飘来浓浓书香~

4月23日是第28个“世界读书日”。为了让孩子们在阅读中丰富知识、开阔视野,养成良好的阅读习惯,4月14...
04-19 02:42:31
广州国际投资年会签约项目443个,国际资本看好在华投资

广州国际投资年会签约项目443个,国际资本看好在华投资

在此背景下,邝子平表示,作为专注于科技创新的投资机构,启明创投认为中国的创新创业依然充满着源源不...
04-19 02:24:47
16岁非裔少年按错门铃遭枪击 美国数百人抗议游行 环球微速讯

16岁非裔少年按错门铃遭枪击 美国数百人抗议游行 环球微速讯

中新网4月18日电综合外媒报道,按门铃不是犯罪黑人的命也是命……日前,美国密西西比州堪萨斯城一名非裔...
04-19 01:58:44
19个项目将亮相北影节项目创投入围终审路演|全球今亮点

19个项目将亮相北影节项目创投入围终审路演|全球今亮点

4月25日,10个创投项目、6个制作中项目、3个北京国际体育电影周体育项目将亮相第十三届北京国际电影节项...
04-19 01:33:42
当前热门:医药工业销售持续保持增长 立方制药年报一季报双增长

当前热门:医药工业销售持续保持增长 立方制药年报一季报双增长

4月18日,立方制药同时披露2022年年报和2023年一季报。年报显示,2022年立方制药实现营业收入25 79亿元...
04-19 00:58:49
天天观点:2023深圳中考体育最新消息(持续更新)

天天观点:2023深圳中考体育最新消息(持续更新)

最新消息深圳2023年中考体育考试于4月18日开考,今年中考体育考试在全市共设11个考区、18个考点。考试时...
04-19 00:54:19
京津冀联合发文:关于加强新市民金融服务支持京津冀协同发展的通知|报道

京津冀联合发文:关于加强新市民金融服务支持京津冀协同发展的通知|报道

天津、河北各银保监分局,北京、天津、河北各中资银行、各信托公司、各金融租赁公司、各消费金融公司、...
04-19 00:21:50
财政部将在三方面着力 推动巩固中国经济回升势头

财政部将在三方面着力 推动巩固中国经济回升势头

央视网消息:财政政策是国家宏观调控的重要手段,在促进经济增长、推动高质量发展等方面具有重要作用。...
04-18 23:42:24
东方证券给予富信科技买入评级 高端TEC国内先行者 业绩短期承压_每日热门

东方证券给予富信科技买入评级 高端TEC国内先行者 业绩短期承压_每日热门

东方证券04月18日发布研报称,给予富信科技(688662 SH,最新价:42 93元)买入评级。评级理由主要包...
04-18 23:29:04
模拟经营游戏《宠物旅馆》Steam正式发售 支持中文

模拟经营游戏《宠物旅馆》Steam正式发售 支持中文

欢迎来到《宠物旅馆》,在这里你将拥有一处能开启你梦想中的商业计划
04-18 23:19:56
【地评线】“春风”送岗,兜牢民生底线-环球讯息

【地评线】“春风”送岗,兜牢民生底线-环球讯息

1月份以来,人力资源和社会保障部会同工业和信息化部等10部门联合开展春风行动暨就业援助月活动,截至3...
04-18 22:50:42
解码经济一季报丨一季度社零消费增长5.8% 二季度消费回暖或更快

解码经济一季报丨一季度社零消费增长5.8% 二季度消费回暖或更快

4月18日,国家统计局发布一季度国民经济数据。一季度,社会消费品零售总额114922亿元,同比增长5 8%,...
04-18 22:45:16
热消息:解快递企业之忧 青岛市召开补充工伤保险工作推进会

热消息:解快递企业之忧 青岛市召开补充工伤保险工作推进会

4月18日,青岛市人力资源社会保障局联合市邮政管理局召开了我市补充工伤保险工作推进会暨市人社局优化营...
04-18 22:24:17
人教版七年级语文上册电子课本完整版 人教版七年级语文上册电子课本

人教版七年级语文上册电子课本完整版 人教版七年级语文上册电子课本

今天来聊聊关于人教版七年级语文上册电子课本完整版,人教版七年级语文上册电子课本的文章,现在就为大...
04-18 21:18:58
环球热头条丨同在一个屋檐下作文_同在一个屋檐下作文范文

环球热头条丨同在一个屋檐下作文_同在一个屋檐下作文范文

欢迎观看本篇文章,小勉来为大家解答以上问题。同在一个屋檐下作文,同在一个屋檐下作文范文很多人还不...
04-18 21:18:40
12月的垃圾邮件呼叫减少了11%_每日讯息

12月的垃圾邮件呼叫减少了11%_每日讯息

随着假期如火如荼,并且omicron变体迅速传播,减少垃圾邮件呼叫的条件已经成熟。根据RoboKiller的说法,...
04-18 20:48:34
财政部详解一季度财政收入由负转正:非税收入保持较快增长|当前要闻

财政部详解一季度财政收入由负转正:非税收入保持较快增长|当前要闻

预计二季度财政收入保持较快增长,下半年增速回落
04-18 20:45:31
请注意!未经许可在线传播他人教育产品构成侵权_全球视点

请注意!未经许可在线传播他人教育产品构成侵权_全球视点

光明网北京4月18日电(记者孙满桃)向他人提供电子书资源是否构成侵权?今日上午,北京互联网对外发布数...
04-18 19:53:13

为您推荐

精彩推送