一、前言
在鸿蒙开发中，骨架屏（Skeleton Screen）是提升用户体验的重要技术手段。本文将基于HarmonyOS ArkUI框架，通过20行核心代码实现一个支持流光动画的骨架屏组件，让你的应用在数据加载时展现专业级视觉效果。
二、效果演示
（动态示意图：灰色背景层上呈现横向流动的白色渐变光条，形成加载中的动态效果）
三、完整代码实现
typescript
@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 布局架构设计
双图层叠加方案：
- 背景层 ：
使用半透明灰色（rgba(0,0,0,0.1)）作为基础色块，模拟未加载内容的占位区域 - 流光层 ：
通过线性渐变创建光带效果，配合位移动画实现流动视觉
typescript
换行复制代码
scss
1// 层叠布局示意图
2Stack() {
3 Text() // 背景层
4 Text() // 流光层（覆盖在背景层上方）
5}4.2 动画引擎解析
核心动画三要素：
-
状态驱动 ：
通过
@State装饰器管理translageX变量，实现动画位置的状态响应 -
位移控制 ：
translate({ x: this.translageX })实现横向位移，从-100%到100%完成从左到右的移动 -
动画配置：
typescript.animation({ duration: 1500, // 动画周期1.5秒 iterations: -1 // 无限循环（-1表示无限次） })
4.3 渐变光效实现
垂直渐变关键配置：
typescript
.linearGradient({
angle: 90, // 创建垂直渐变效果
colors: [
[颜色值, 位置百分比],
//...
]
})参数说明表：
| 颜色值 | 位置 | 效果描述 |
|---|---|---|
| rgba(255,255,255,0) | 0% | 顶部完全透明 |
| rgba(255,255,255,1) | 50% | 中部纯白色高亮 |
| rgba(255,255,255,0) | 100% | 底部恢复透明 |
五、应用场景示例
5.1 列表加载占位
typescript
Column() {
IvSkeleton().width(200).height(20)
IvSkeleton().width(180).height(20)
IvSkeleton().width(160).height(20)
}5.2 图文卡片占位
typescript
Row() {
IvSkeleton().width(80).height(80)
Column() {
IvSkeleton().width(120).height(16)
IvSkeleton().width(100).height(16)
}
}六、高级定制技巧
6.1 修改光效颜色
typescript
// 改为蓝色流光效果
.linearGradient({
colors: [
['rgba(64,169,255,0)', 0],
['rgba(64,169,255,1)', 0.5],
['rgba(64,169,255,0)', 1]
]
})6.2 调整动画速度
typescript
// 加快动画速度（800ms完成一次循环）
.animation({
duration: 800,
iterations: -1
})6.3 创建圆形骨架
typescript
// 圆形骨架组件
@Builder
CircleSkeleton(size: number) {
Circle()
.size(size)
.backgroundColor('rgba(0,0,0,0.1)')
}七、最佳实践建议
-
性能优化 ：
在页面
onDisappear时重置动画状态，避免后台资源消耗 -
视觉平衡 ：
保持光效宽度不超过背景的1/3，避免视觉过载
-
组合使用 ：
多种形状骨架组合使用，更接近真实内容布局
交流群
-
建了个鸿蒙交流群，帮助希望从业的人员方便交流技术以及获取鸿蒙认证。需要的请添加林烁老师微信(Bert-0001)，拉你进群
如果觉得本文有帮助，欢迎点赞收藏❤️
更多鸿蒙开发技巧，欢迎关注我的掘金专栏👉《HarmonyOS开发秘籍》