前言在鸿蒙应用开发中骨架屏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:number1500;// 单轮动画速度(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.timeIdsetTimeout((){this.translateX-100%;// 设置动画起始位置左侧外部this.getUIContext()?.animateTo({duration:this.duration,iterations:-1,// -1 无限循环curve:Curve.Linear// 匀速动画},(){// 动画事件回调每轮完成后复位到结束位置this.translateX100%;});},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)}}关键知识点解析1.translate位移作用translateX: -100%组件完全移动到左侧外部translateX: 100%组件完全移动到右侧外部配合渐变实现“流光扫过”视觉效果2. 动画为什么要加setTimeoutaboutToAppear生命周期中组件尚未完成渲染延迟 100ms 确保组件挂载成功动画才能正常执行3. 动画事件回调重要性无限循环动画没有“结束回调”必须在每轮完成后手动复位位置否则动画会直接卡住、无法循环4.clip(true)为什么必加圆角组件默认不会裁切内部溢出内容开启后流光只会在骨架区域内显示边缘更精致扩展与优化调整动画速度修改duration值数值越大动画越慢调整流光亮度修改渐变中的0.8透明度自定义骨架形状修改skeletonItem布局适配你的页面列表/卡片/头像通用一套代码适配所有场景总结这套鸿蒙骨架屏流光方案纯原生、轻量、高性能、易扩展。无需第三方依赖代码结构清晰便于维护动画流畅不卡顿
鸿蒙（HarmonyOS）ArkTS 实战：animateTo属性动画骨架屏流光动画
前言在鸿蒙应用开发中骨架屏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:number1500;// 单轮动画速度(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.timeIdsetTimeout((){this.translateX-100%;// 设置动画起始位置左侧外部this.getUIContext()?.animateTo({duration:this.duration,iterations:-1,// -1 无限循环curve:Curve.Linear// 匀速动画},(){// 动画事件回调每轮完成后复位到结束位置this.translateX100%;});},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)}}关键知识点解析1.translate位移作用translateX: -100%组件完全移动到左侧外部translateX: 100%组件完全移动到右侧外部配合渐变实现“流光扫过”视觉效果2. 动画为什么要加setTimeoutaboutToAppear生命周期中组件尚未完成渲染延迟 100ms 确保组件挂载成功动画才能正常执行3. 动画事件回调重要性无限循环动画没有“结束回调”必须在每轮完成后手动复位位置否则动画会直接卡住、无法循环4.clip(true)为什么必加圆角组件默认不会裁切内部溢出内容开启后流光只会在骨架区域内显示边缘更精致扩展与优化调整动画速度修改duration值数值越大动画越慢调整流光亮度修改渐变中的0.8透明度自定义骨架形状修改skeletonItem布局适配你的页面列表/卡片/头像通用一套代码适配所有场景总结这套鸿蒙骨架屏流光方案纯原生、轻量、高性能、易扩展。无需第三方依赖代码结构清晰便于维护动画流畅不卡顿
