HarmonyOS 5.0.0 或以上：实现页面加载动画骨架屏 Skeleton 动效

最新推荐文章于 2025-09-01 23:51:35 发布

前端付豪3号

最新推荐文章于 2025-09-01 23:51:35 发布

阅读量502

点赞数 4

CC 4.0 BY-SA版权

分类专栏：鸿蒙 x AI 产品实战文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/2501_92052054/article/details/148181495

一、功能简介

本篇将实现一个页面加载时展示的骨架屏动画（Skeleton Loading），用于模拟内容结构布局，提升加载等待时的视觉体验，适用于资讯流、商品卡片、评论列表等“数据异步加载”场景。

二、核心能力点

能力	技术点
骨架结构渲染	使用占位 `Blank()` 和渐变色背景
动画效果	线性渐变移动（Skeleton shimmer）
加载状态控制	使用 @State 模拟异步加载过程

三、页面结构

entry/src/main/ets/pages/SkeletonDemo.ets

四、ArkTS 实战代码（SkeletonDemo.ets）

@Entry
@Component
struct SkeletonDemo {
  @State isLoading: boolean = true
  @State shimmerX: number = -150

  aboutToAppear() {
    setInterval(() => {
      this.shimmerX = this.shimmerX >= 300 ? -150 : this.shimmerX + 8
    }, 30)

    setTimeout(() => {
      this.isLoading = false
    }, 3000)
  }

  buildSkeletonItem(): void {
    Row() {
      B