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

HarmonyOS开发5.0【骨架屏】 app界面制作

article 2025/1/23 9:54:08

实现原理

1.定义组件和状态变量：

使用 @Entry 和 @Component 装饰器定义了一个名为 IvSkeleton 的组件。

定义了一个状态变量 translageX，初始值为 -100%，用于控制闪电效果的位置。

定义了两个数值变量 widthValue 和 heightValue，分别设置为 100，用于定义组件的宽度和高度。

2.构建组件：

在 build() 方法中，使用 Stack() 创建一个堆叠布局容器。

在堆叠容器中，首先创建一个背景效果：

使用 Text() 组件创建一个文本元素。

设置文本的高度和宽度分别为 heightValue 和 widthValue。

设置背景颜色为半透明黑色 (rgba(0,0,0,0.1)).

3.闪电效果：

再次使用 Text() 创建一个文本元素，用于实现闪电效果。

设置文本的高度和宽度分别为 heightValue 和 widthValue。

使用 .translate() 方法将闪电效果的位置设置为 translageX。

在组件加载后 (onAppear())，将 translageX 的值从 -100% 改变为 100%，从而移动闪电效果的位置。

4.添加动画效果：

设置动画持续时间为 1500 毫秒（1.5 秒）。

设置迭代次数为 -1，表示无限循环。

使用 .linearGradient() 方法创建一个线性渐变效果，实现闪电效果：

设置角度为 90 度。

设置颜色从透明到白色再到透明的渐变。

通过以上步骤，实现了以下功能：

初始状态下，闪电效果位于屏幕左侧（-100%）。

组件加载后，闪电效果移动到屏幕右侧（100%）。

闪电效果会无限循环地在屏幕上移动，形成闪烁的效果。

这种实现方式可以用来创建动态的视觉效果，例如闪电或光标效果。

实现代码

@Entry
@Component
struct IvSkeleton {
  @State translageX: string = '-100%' // 定义闪电效果的位置
  widthValue: number = 100
  heightValue: number = 100

  build() {
    Stack() {
      // 背景效果
      Text()
        .height(this.heightValue)
        .width(this.widthValue)
        .backgroundColor('rgba(0,0,0,0.1)')

      // 闪电效果
      Text()
        .height(this.heightValue)
        .width(this.widthValue)
        .translate({ x: this.translageX })// 控制闪电位置
        .onAppear(() => {
          // 当组件加载后，触发此函数，将translate的x轴位置改变到100%
          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]
          ]
        })
    }
  }
}