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

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

为什么使用加载动画？

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

HarmonyOS NEXT 技术栈

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

具体实现

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

定义加载状态

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

@State loaded: boolean = false;

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

利用 Stack 布局

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

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'); // 红色的加载指示器}}
}

在这里插入图片描述

关键逻辑详解

Web 组件：负责加载网页内容。我们通过 onPageEnd 事件监听页面加载状态，一旦加载完毕，将 loaded 设为 true。
LoadingProgress 组件：在 loaded 为 false 时显示。当页面结束加载，状态变为 true 后，LoadingProgress 就会消失不再渲染。
Stack 布局：这个布局允许我们将 Web 和 LoadingProgress 组件堆叠。由于 LoadingProgress 在上方，当 loaded 为 false 时，它会覆盖在 Web 组件之上。