实现原理
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]
]
})
}
}
}
