当前位置：首页 > news >正文

鸿蒙（HarmonyOS）ArkTS 实战：animateTo属性动画骨架屏流光动画

news 2026/7/3 6:52:42

前言

在鸿蒙应用开发中，骨架屏（Skeleton Screen）是提升用户体验的核心组件之一。相比生硬的 loading 提示，流畅的骨架屏动画能有效降低用户等待感知，让页面加载过程更优雅。

本篇将带你使用ArkTS 原生动画能力，不依赖任何第三方库，实现行业主流的无限循环流光骨架屏效果，代码简洁、性能优异、可直接可用。

最终效果

实际运行效果要比gif显示的动画细腻

效果说明

灰色骨架区域静态占位
白色高光从左至右匀速扫过
无限循环、圆角不溢出、全页面适配
原生动画、极低性能损耗

核心原理

整个骨架屏动画分为两层结构：

下层：灰色静态骨架（固定不动）
上层：白色渐变流光层（水平移动）

动画流程

流光初始位置：-100%（完全隐藏在左侧外部）
执行动画：从左侧平移至右侧100%
一轮动画结束，通过动画事件回调复位状态
iterations: -1实现无限循环
clip(true)保证流光不超出圆角

完整代码实现

骨架屏 + 流光动画完整示例

@Entry @Component struct SkeletonListDemo{// 静态数据源：仅用于控制骨架屏条目数量@State skeletonCount:number[]=[1,2,3,4,5];@State translateX:string='-100%';// 流光X轴偏移量@State duration:number=1500;// 单轮动画速度(ms)@State timeId:number=-1aboutToAppear():void{// 页面渲染后自动启动流光动画this.startShineAnimation();}aboutToDisappear():void{if(this.timeId!==-1){clearTimeout(this.timeId)this.timeId=-1}}/** * 流光动画核心方法（无限循环） * 1. 延迟等待组件挂载 → 保证动画生效 * 2. 重置流光到起始位置 * 3. 执行无限循环平移动画 * 4. 事件回调同步状态 */startShineAnimation(){// 延迟100ms：等待组件渲染完成，否则动画会因组件未挂载而不生效this.timeId=setTimeout(()=>{this.translateX='-100%';// 设置动画起始位置（左侧外部）this.getUIContext()?.animateTo({duration:this.duration,iterations:-1,// -1 = 无限循环curve:Curve.Linear// 匀速动画},()=>{// 动画事件回调：每轮完成后复位到结束位置this.translateX='100%';});},100)}/** * 流光遮罩层 Builder * 作用：生成渐变高光层，通过translate实现扫光效果 */@LocalBuildershineOverlay(){Row().width('100%').height('100%').translate({x:this.translateX})// 控制水平位移.linearGradient({// 线性渐变：透明→半透→透明angle:90,colors:[['rgba(255,255,255,0)',0],['rgba(255,255,255,0.8)',0.5],['rgba(255,255,255,0)',1]]})}/** * 单个骨架屏条目 Builder * 下层：灰色占位布局 * 上层：叠加流光遮罩层 */@LocalBuilderskeletonItem(){Column({space:8}){// 模拟头像/图标区域Row().width(60).height(60).backgroundColor('#ECECEC').borderRadius(8)// 模拟标题文本Row().width('80%').height(20).backgroundColor('#ECECEC').borderRadius(4)// 模拟描述文本Row().width('70%').height(20).backgroundColor('#ECECEC').borderRadius(4)}.padding(10).backgroundColor('#F7F8FA').borderRadius(8).width('100%').alignItems(HorizontalAlign.Start).overlay(this.shineOverlay())// 叠加流光动画层.clip(true);// 必须开启：防止流光超出圆角范围}build(){Column({space:12}){// 循环渲染多条骨架屏ForEach(this.skeletonCount,(item:number)=>{this.skeletonItem()},(item:number)=>item.toString())}.padding(20).width('100%').height('100%').backgroundColor('#F1F3F5')}}