鸿蒙next LoadingProgress 实现网络动画加载

前言导读

各位同学大家好，大家在开发鸿蒙next应用的时候是不是经常遇到处理网络加载的情况 ，那么加载网络的时候是不是需要加上一个等待动画呢，这样会让用户觉得不会那么生硬 。今天老师就给大家带来一个网络加载动画案例，废话不多说我们正式开始。

为什么使用加载动画？

加载动画在应用体验中扮演着重要角色，通过动态提示用户进度状态，可以有效提升应用的响应性感知。特别是在网络环境不稳定或数据繁重的场景下，加载动画不仅能缓解等待时的焦虑，还能美化用户界面，增加应用的整体吸引力。

使用到的技术点

LoadingProgress 和自定义的 openCustomDialog 来实现,自定义弹窗 openCustomDialog 可以看之前的文章

鸿蒙next openCustomDialog 实现不依赖UI的自定义弹窗

效果图

具体实现

• 1 动画弹窗Ui 实现

这里我们使用 Column 包裹我们的 LoadingProgress组件和Text组件来实现我们的动画需要弹窗效果

import ExitDialogUtils from "./AnimationUtils";
import { common } from "@kit.AbilityKit";

 /**
  *
  * 创建人：xuqing
  * 创建时间：2025年9月3日14:33:43
  * 类说明: 动画弹窗
  *
  */
@Component
export struct AnimationDialogView{
  param:MyDialogParams=new MyDialogParams();

  build() {
    Column(){
      Column() {
        LoadingProgress()
          .color(Color.Blue)
          .layoutWeight(1)
        Text('正在加载').fontSize(15)
          .fontColor('#ffbcb4b4')
      }
    }.width(100)
    .height(100)
    .borderRadius(20)
  }
}

export class MyDialogParams {
  flag?:boolean;

}
@Builder
export function myDialogBuilder(params:MyDialogParams){
  AnimationDialogView({
    param:params
  })
}

• 2 动画弹窗显示隐藏工具类

import { ComponentContent, PromptAction, window } from "@kit.ArkUI";
import { myDialogBuilder, MyDialogParams } from "./AnimationDialogView";

class AnimationUtils{
  private static myDialog:ComponentContent<MyDialogParams> | null = null
  private static promptAction:PromptAction
  show(params:MyDialogParams){
    window.getLastWindow(getContext()).then((windowClass)=>{
      const uiContext = windowClass.getUIContext()
      AnimationUtils.myDialog= new ComponentContent(uiContext, wrapBuilder(myDialogBuilder),params);
      AnimationUtils.promptAction = uiContext.getPromptAction()
      AnimationUtils.promptAction.openCustomDialog(AnimationUtils.myDialog,
        {
          alignment:DialogAlignment.Center,// 显示具体位置
          isModal:false,
          autoCancel:false,  
          keyboardAvoidMode:KeyboardAvoidMode.NONE // 设置弹窗里面有输入框的情况调用键盘不会挤压布局
        }
      )
    })
  }
  hide(){
    AnimationUtils.promptAction.closeCustomDialog(AnimationUtils.myDialog);
  }
}
let  animationUtils=new AnimationUtils();
export default animationUtils as AnimationUtils;

• 3 动画弹窗管理器

import AnimationUtils from "./AnimationUtils";
import { MyDialogParams } from "./AnimationDialogView";
import { display } from '@kit.ArkUI';
let displayClass: display.Display | null = null;


/***
 *
 * 创建人：xuqing
 * 创建时间：2025年9月3日14:45:24
 * 类说明：弹窗管理器
 *
 */

export  class DialogManger {
  public static instance: DialogManger | null = null

  public static getInstance() {
    if (!DialogManger.instance) {
      DialogManger.instance = new DialogManger()
    }
    return DialogManger.instance
  }
  private _displayFlag: boolean = true;
  public setdisplayFlag(value: boolean):DialogManger{
    this._displayFlag = value;
    return this;

  }
  public getdisplayFlag(): boolean {
    return this._displayFlag;
  }
  // 设置方法为私有
  private constructor() {

  }

  /**
   *
   * 初始化
   * @returns
   */
  public  init():DialogManger{
    let  type:boolean=true;
    try {
      let width = 0
      let height = 0
      let displayClass = display.getDefaultDisplaySync();
      width = displayClass.width
      height = displayClass.height
      if(width<height){
        type=true;
      }else{
        type=false;
      }
    } catch (error) {
      console.error('Error while centering the window:', error);
      type=true;
    }
    this.setdisplayFlag(type)
    return this;
  }


  /***
   *
   * 弹窗显示
   */

  public animationDialogViewShow(){
    let params   = new MyDialogParams();
    params.flag=this.getdisplayFlag();
    AnimationUtils.show(params);
  }
  /**
   *
   * 弹窗隐藏
   */
  public  animationDialogViewHide(){
    AnimationUtils.hide();
  }
}

具体调用

• 显示动画弹窗

Button('点击显示动画').onClick(()=>{
  DialogManger.getInstance().init().animationDialogViewShow()
})

• 关闭动画弹窗

Button('点击关闭动画').onClick(()=>{
  DialogManger.getInstance().init().animationDialogViewHide()
})

最后总结

网上呢也有使用层叠布局 Stack结合 LoadingProgress 来实现 也是一个不错的方案，但是呢老师这里封装成一自定义的弹窗更好的去控制动画的显示和隐藏，还有我们也可以优化动画显示的时候做到防抖操作 限制短时间多次触发动画，这个需要同学们自己去优化了，文章篇幅有限我就不展开讲了，今天的文章就讲到这里有兴趣的同学可以继续研究 如果你觉得文章还不错麻烦给我三连 关注点赞和转发谢谢