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

news/2025/1/15 1:06:23/

实现原理

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 = 100heightValue: number = 100build() {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]]})}}
}