鸿蒙ArkUI实战：手把手教你实现高颜值骨架屏

一、前言

在鸿蒙开发中，骨架屏（Skeleton Screen）是提升用户体验的重要技术手段。本文将基于HarmonyOS ArkUI框架，通过20行核心代码实现一个支持流光动画的骨架屏组件，让你的应用在数据加载时展现专业级视觉效果。

---

二、效果演示

（动态示意图：灰色背景层上呈现横向流动的白色渐变光条，形成加载中的动态效果）

---

三、完整代码实现

@Entry
@Component
export struct IvSkeleton {
  // 动画初始位置（左侧边界外）
  @State translageX: string = '-100%'
  
  // 默认尺寸配置
  private widthValue: number = 100    // 骨架屏宽度
  private heightValue: number = 28    // 骨架屏高度

  build() {
    Stack() { // 层叠布局容器
      /* ---------- 背景层 ---------- */
      Text()
        .width(this.widthValue)
        .height(this.heightValue)
        .backgroundColor('rgba(0,0,0,0.1)') // 半透明深色背景
        
      /* ---------- 流光层 ---------- */
      Text()
        .width(this.widthValue)
        .height(this.heightValue)
        .translate({ x: this.translageX }) // 初始位置偏移
        .onAppear(() => {
          // 组件出现时触发动画
          this.translageX = '100%' // 移动到右侧边界外
        })
        .animation({
          duration: 1500,         // 动画时长1.5秒
          iterations: -1          // 无限循环
        })
        .linearGradient({
          angle: 90,              // 垂直渐变方向
          colors: [               // 三层渐变实现光条效果
            ['rgba(255,255,255,0)', 0],    // 起始透明
            ['rgba(255,255,255,1)', 0.5],  // 中间纯白
            ['rgba(255,255,255,0)', 1]     // 末尾透明
          ]
        })
    }
  }
}

---

四、技术实现详解

4.1 布局架构设计

双图层叠加方案：

1. 背景层 ：
   使用半透明灰色（rgba(0,0,0,0.1)）作为基础色块，模拟未加载内容的占位区域
2. 流光层 ：
   通过线性渐变创建光带效果，配合位移动画实现流动视觉

typescript

换行复制代码

1// 层叠布局示意图
2Stack() {
3  Text() // 背景层
4  Text() // 流光层（覆盖在背景层上方）
5}

4.2 动画引擎解析

核心动画三要素：

1. 状态驱动 ：

   通过@State装饰器管理translageX变量，实现动画位置的状态响应

2. 位移控制 ：
   translate({ x: this.translageX })实现横向位移，从-100%到100%完成从左到右的移动

3. 动画配置：

   .animation({
     duration: 1500,  // 动画周期1.5秒
     iterations: -1   // 无限循环（-1表示无限次）
   })

4.3 渐变光效实现

垂直渐变关键配置：

.linearGradient({
  angle: 90, // 创建垂直渐变效果
  colors: [
    [颜色值, 位置百分比],
    //...
  ]
})

参数说明表：

颜色值	位置	效果描述
rgba(255,255,255,0)	0%	顶部完全透明
rgba(255,255,255,1)	50%	中部纯白色高亮
rgba(255,255,255,0)	100%	底部恢复透明

---

五、应用场景示例

5.1 列表加载占位

Column() {
  IvSkeleton().width(200).height(20)
  IvSkeleton().width(180).height(20)
  IvSkeleton().width(160).height(20)
}

5.2 图文卡片占位

Row() {
  IvSkeleton().width(80).height(80)
  Column() {
    IvSkeleton().width(120).height(16)
    IvSkeleton().width(100).height(16)
  }
}

---

六、高级定制技巧

6.1 修改光效颜色

// 改为蓝色流光效果
.linearGradient({
  colors: [
    ['rgba(64,169,255,0)', 0],
    ['rgba(64,169,255,1)', 0.5],
    ['rgba(64,169,255,0)', 1]
  ]
})

6.2 调整动画速度

// 加快动画速度（800ms完成一次循环）
.animation({
  duration: 800,
  iterations: -1
})

6.3 创建圆形骨架

// 圆形骨架组件
@Builder
CircleSkeleton(size: number) {
  Circle()
    .size(size)
    .backgroundColor('rgba(0,0,0,0.1)')
}

---

七、最佳实践建议

1. 性能优化 ：

   在页面onDisappear时重置动画状态，避免后台资源消耗

2. 视觉平衡 ：

   保持光效宽度不超过背景的1/3，避免视觉过载

3. 组合使用 ：

   多种形状骨架组合使用，更接近真实内容布局

   ---

   交流群

• 建了个鸿蒙交流群，帮助希望从业的人员方便交流技术以及获取鸿蒙认证。需要的请添加林烁老师微信(Bert-0001)，拉你进群

  如果觉得本文有帮助，欢迎点赞收藏❤️
  更多鸿蒙开发技巧，欢迎关注我的掘金专栏👉《HarmonyOS开发秘籍》