封装骨架屏

前言：

如何封装单个组件带有闪光效果的骨架屏。

一、骨架屏是什么？

骨架屏是一种在页面加载过程中展示的临时界面。
它通常呈现出页面的大致轮廓结构，比如包含一些占位的方框、线条等，来模拟页面最终的布局样式。其主要作用是在页面内容尚未完全加载出来时，给用户一个直观的反馈，让用户能够感知到页面正在加载和即将呈现的大致内容，减少用户等待时的焦虑感。骨架屏可以提升用户体验，避免用户在面对空白页面时产生困惑或不耐烦的情绪。同时，它也可以增强页面加载过程中的视觉效果，营造出一种流畅的过渡感。不同的应用可能会根据自身的设计风格和需求来定制独特的骨架屏样式，以更好地与整体界面融合。

二、使用步骤

1.概括

    利用 linearGradient + translate + animation + onAppear 实现骨架的闪光效果

2.读入数据

代码如下（示例）：

@Component
export struct Architecture {
  breadth: number | string = 100
  altitude: number | string = 20
  @State translateValue: string = "-100%"
 
  build() {
    Stack() {
      Text()
        .backgroundColor('#f3f4f5')
        .height('100%')
        .width('100%')
 
      Text()
        .height('100%')
        .width('100%')
        .translate({ x: this.translateValue })
        .linearGradient({
          angle: 45,
          colors: [
            ['rgba(255,255,255,0)', 0],
            ['rgba(255,255,255,1)', 0.5],
            ['rgba(255,255,255,0)', 0]
          ]
        })
        .animation({duration:1500,iterations:-1})
        .onAppear(()=>{
          this.translateValue = '100%'
        })
 
    }
    .height(this.altitude)
    .width(this.breadth)
   }
}

————————————————

原文参考链接：blog.csdn.net/2301_822316…