0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

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

OpenHarmony开发经验 来源: OpenHarmony开发经验 作者: OpenHarmony开发经验 2023-04-20 11:29 次阅读
  • 本篇文章介绍了如何实现一个简单的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 Beta5
  • IDE:DevEco Studio 3.1.0.200
  • SDK:API9(3.2.10.6)

效果演示

动画2.gif

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工程

    image.png

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

    image.png

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

//loadingComponent_part1.ets
 @Component

export 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表示图片大小与组件大小一致,此时设置图片的widthheighttopleft属性是无效的。false表示每一张图片的widthheighttopleft属性都要单独设置。
        
        .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';
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动画的
@CustomDialog
struct 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);

          })
  • 实现效果

    动画2.gif

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

}
  • 实现效果

    动画2.gif

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 开发板
    +关注

    关注

    25

    文章

    4933

    浏览量

    97157
  • OpenHarmony
    +关注

    关注

    25

    文章

    3657

    浏览量

    16128
收藏 人收藏

    评论

    相关推荐

    基于ArkTS语言的OpenHarmony APP应用开发:HelloOpenharmony

    1、程序简介该程序是基于OpenHarmony标准系统编写的UI应用类:HelloOpenHarmony。本案例是基于API9接口开发。本案例已在OpenHarmony凌蒙派-RK35
    的头像 发表于 09-15 08:09 299次阅读
    基于ArkTS语言的<b class='flag-5'>OpenHarmony</b> APP应用<b class='flag-5'>开发</b>:Hello<b class='flag-5'>Openharmony</b>

    【迅为RK3568开发板】OpenHarmony学习开发系列教程(第1期 向基础篇

    P5P4_OpenHarmony支持设备类型3:47 P6p5_南向开发开发的区别1:49 P7P6_OpenHarmony应用
    发表于 08-16 15:27

    鸿蒙OpenHarmony南向/向快速开发教程-迅为RK3568开发

    4.1学习之旅了吗?快来加入我们,起探索鸿蒙4.1系统的无限魅力吧! 【北京迅为】OpenHarmony学习开发系列教程(第1期 向基础篇
    发表于 07-23 10:44

    10万奖金池!CCF开源创新大赛-OpenHarmony应用开发大赛,等你来战!

    生态建设的高质量发展。深开鸿发布“OpenHarmony应用开发-开源项目贡献赛”赛道,旨在通过开发开源鸿蒙向应用、扩展开源鸿蒙
    的头像 发表于 07-17 08:33 646次阅读
    10万奖金池!CCF开源创新大赛-<b class='flag-5'>OpenHarmony</b>应用<b class='flag-5'>开发</b>大赛,等你来战!

    OpenHarmony之开机优化

    OpenHarmony已经支持了Bootchart工具,我们可以直接使用Bootchart工具,Bootchart工具介绍如下: 概述 Bootchart是用于系统启动过程性能分析的开源软件工具
    发表于 07-01 16:39

    HarmonyOS开发案例:【购物车app】

    OpenHarmony ArkUI框架提供了丰富的动画组件和接口,开发者可以根据实际场景和开发需求,选用丰富的动画组件和接口来实现不同的
    的头像 发表于 05-14 18:19 994次阅读
    HarmonyOS<b class='flag-5'>开发</b>案例:【购物车app】

    HarmonyOS开发案例:【转场动画

    在本教程中,我们将会通过简单的样例,学习如何基于ArkTS的声明式开发范式开发转场动画。其中包含页面间转场、组件内转场以及共享元素转场。
    的头像 发表于 05-06 15:42 977次阅读
    HarmonyOS<b class='flag-5'>开发</b>案例:【转场<b class='flag-5'>动画</b>】

    OpenHarmony实战开发-如何实现动画

    请求动画帧 请求动画帧时通过requestAnimationFrame函数逐帧回调,在调用该函数时传入回调函数。 runframe在调用requestAnimationFrame时
    发表于 05-06 14:11

    OpenHarmony实战开发-如何实现组件动画

    ArkUI为组件提供了通用的属性动画和转场动画能力的同时,还为些组件提供了默认的动画效果。例如,List的滑动动效,Button的点击动效,是组件自带的默认
    的头像 发表于 04-28 15:49 553次阅读
    <b class='flag-5'>OpenHarmony</b>实战<b class='flag-5'>开发</b>-如何实现组件<b class='flag-5'>动画</b>。

    OpenHarmony南向开发实例:【游戏手柄】

    基于TS扩展的声明式开发范式编程语言,以及OpenHarmony的分布式能力实现的手柄游戏。
    的头像 发表于 04-17 10:21 695次阅读
    <b class='flag-5'>OpenHarmony</b>南向<b class='flag-5'>开发</b>实例:【游戏手柄】

    鸿蒙开发案例:【图像加载缓存库ImageKnife】

    专门为OpenHarmony打造的款图像加载缓存库,致力于更高效、更轻便、更简单。
    的头像 发表于 03-23 16:48 795次阅读
    鸿蒙<b class='flag-5'>开发</b>案例:【图像<b class='flag-5'>加载</b>缓存库ImageKnife】

    modusToolbox在加载离线库时,总是在loading device_db时提示错误的原因?

    我的modusToolbox在加载离线库时,总是在loading device_db时提示错误。信息如下: Finished download of file \'file:///D
    发表于 02-02 08:07

    鸿蒙开发之发动画

    动画的原理是在一个时间段内,多次改变UI外观,由于人眼会产生视觉暂留,所以最终看到的就是“连续”的动画。UI的
    的头像 发表于 02-01 15:25 604次阅读
    鸿蒙<b class='flag-5'>开发</b>之发<b class='flag-5'>动画</b>篇

    openharmony开发应用

    随着智能设备的普及和多样化,开发者们对于更加灵活、高效的操作系统需求与日俱增。在这个背景下,华为推出了OpenHarmony全场景智能终端操作系统和生态平台。本文将详细探讨
    的头像 发表于 12-19 09:42 633次阅读

    OpenHarmony向-让更广泛的应用开发者更容易参与

    开发板的厂商没有留其他BUG,才可能装进去的。 这样对广泛的OH向应开发者或者团队,是非常不友好的。 在某个开发板上
    发表于 12-06 14:32