【HarmonyOS NEXT】在 HarmonyOS NEXT 中实现优雅的加载动画

【HarmonyOS NEXT】在 HarmonyOS NEXT 中实现优雅的加载动画

在移动应用开发中,加载动画是提升用户体验的重要工具。在应用程序处理数据或加载页面时,为用户提供视觉反馈尤为关键。在这篇博客中,我们将探讨如何在 HarmonyOS NEXT 中使用 Stack 布局结合 LoadingProgress 组件来实现流畅的加载动画。

为什么使用加载动画?

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

HarmonyOS NEXT 技术栈

在 HarmonyOS NEXT 中,开发者可利用 Stack 布局和 LoadingProgress 组件轻松实现重叠效果,进而实现加载动画的需求。

具体实现

以下是如何实现加载动画的详细步骤。

定义加载状态

首先,我们需要定义一个状态变量以追踪加载状态。在页面未加载完成之前,我们需要显示加载动画,而一旦加载完成,我们便隐藏这个动画。

typescript 复制代码
@State loaded: boolean = false;

这里的 loaded 变量初始值为 false,表示页面尚未加载完成。

利用 Stack 布局

Stack 是一个常用的布局工具,它允许组件的重叠显示。在实现过程中,我们利用 Stack 布局将 Web 组件与 LoadingProgress 组件放置在一起,并根据加载状态切换显示状态。

typescript 复制代码
build() {
  Stack() {
    // Web组件用于展示网页内容
    Web({ 
      src: $rawfile("homePage/index.html"), 
      controller: this.controller.getWebViewController() 
    })
      .javaScriptAccess(true)
      .javaScriptProxy(this.controller.getJavaScriptProxy())
      .onAlert((event) => {
        return false;
      })
      .domStorageAccess(true)
      .zoomAccess(true)
      .fileAccess(true)
      .mixedMode(MixedMode.All)
      .height('100%')
      .width('100%')
      .onPageEnd((event) => {
        if (event) {
          this.loaded = true; // 页面加载完成
        }
      });

    // 显示加载动画
    if (!this.loaded) {
      LoadingProgress()
        .height(180)
        .color('#cd0401'); // 红色的加载指示器
    }
  }
}
关键逻辑详解
  1. Web 组件 :负责加载网页内容。我们通过 onPageEnd 事件监听页面加载状态,一旦加载完毕,将 loaded 设为 true

  2. LoadingProgress 组件 :在 loadedfalse 时显示。当页面结束加载,状态变为 true 后,LoadingProgress 就会消失不再渲染。

  3. Stack 布局 :这个布局允许我们将 WebLoadingProgress 组件堆叠。由于 LoadingProgress 在上方,当 loadedfalse 时,它会覆盖在 Web 组件之上。

相关推荐
Forever_Hopeful33 分钟前
华为 HarmonyOS NEXT 原生应用开发: 动画的基础使用(属性、显示、专场)动画
华为·harmonyos
青瓷看世界36 分钟前
华为HarmonyOS打造开放、合规的广告生态 - 开屏广告
华为·harmonyos·广告投放
青瓷看世界3 小时前
华为HarmonyOS借助AR引擎帮助应用实现虚拟与现实交互的能力3-获取设备位姿
华为·ar·harmonyos·虚拟现实
青瓷看世界5 小时前
华为HarmonyOS借助AR引擎帮助应用实现虚拟与现实交互的能力4-检测环境中的平面
平面·ar·harmonyos·虚拟现实
SoraLuna5 小时前
「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用
macos·ui·harmonyos
SoraLuna7 小时前
「Mac畅玩鸿蒙与硬件29」UI互动应用篇6 - 多选问卷小应用
macos·ui·harmonyos
青瓷看世界11 小时前
华为HarmonyOS打造开放、合规的广告生态 - 原生广告
华为·harmonyos·广告投放
lqj_本人15 小时前
Flutter&鸿蒙next中封装一个列表组件
flutter·华为·harmonyos
shujuwa6619 小时前
5个有效的华为(HUAWEI)手机数据恢复方法
windows·华为·智能手机·电脑·开源软件