鸿蒙中骨架屏的实现和封装

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

1. 组件结构：

   • 使用 Stack 布局容器，确保两个 Text 组件重叠。
   • 第一个 Text 组件充当背景，设置固定的高度和宽度，并使用半透明的黑色背景色来模拟占位背景。

2. 闪电效果：

   • 第二个 Text 组件用于实现闪电效果。初始时，将其水平位置 (translateX) 设置为 -100%，即从视图的左侧开始。
   • 在 onAppear 回调中，将 translateX 更新为 100%，使得组件从左到右移动。

3. 动画：

   • 为第二个 Text 组件添加动画，持续时间为 1.5 秒，并设置为无限循环（iterations: -1）。
   • 通过 linearGradient 设置渐变效果，使得中间部分变亮，从而模拟闪电效果。
   • 渐变角度为 90 度，颜色从透明到白色再到透明，创建了一个闪光的视觉效果。

4. 状态管理：

   • 使用 @State 装饰器来管理闪电位置的状态 (translageX)。
   • 当组件加载时，onAppear 回调被触发，更新 translageX，从而启动动画效果。

@Entry
@Component
struct IvSkeleton {
  // 定义状态变量，表示闪电效果的位置
  @State translageX: string = '-100%'
  // 定义宽度和高度的初始值
  widthValue: number = 28
  heightValue: number = 100

  // 定义组件的构建方法
  build() {
    Stack() {  // 使用 Stack 布局容器
      // 背景效果
      Text()  // 创建一个 Text 组件
        .height(this.widthValue)  // 设置高度
        .width(this.heightValue)  // 设置宽度
        .backgroundColor('rgba(0,0,0,0.5)')  // 设置背景颜色为半透明黑色

      // 闪电效果
      Text()  // 创建另一个 Text 组件
        .height(this.widthValue)  // 设置高度
        .width(this.heightValue)  // 设置宽度
        .translate({ x: this.translageX })  // 设置初始位置，向左偏移 100%
        .onAppear(() => {  // 组件加载时触发的事件
          // 更新状态变量，将位置改为向右偏移 100%
          this.translageX = '100%'
        })
        .animation({  // 定义动画效果
          duration: 1500,  // 动画持续时间为 1.5 秒
          iterations: -1  // 无限循环动画
        })
        .linearGradient({  // 设置线性渐变效果
          angle: 90,  // 渐变角度为 90 度
          colors: [
            ['rgba(255,255,255,0)', 0],  // 渐变开始，透明
            ['rgba(255,255,255,1)', 0.5],  // 渐变中间，不透明
            ['rgba(255,255,255,0)', 1]  // 渐变结束，透明
          ]
        })
    }
  }
}

封装好后再别的页面想使用的时候直接导入即可

import { IvSkeleton } from '../common/components/IvSkeleton'