HarmonyOS 鸿蒙Next：加载图片一致旋转实现等待动画效果，代码设置后不执行动画
HarmonyOS 鸿蒙Next：加载图片一致旋转实现等待动画效果，代码设置后不执行动画
我想让加载图片一致旋转，实现一个等待动画的效果，但是我设置代码后，不执行动画
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
[@State](/user/State) loading: boolean = false;
build() {
Column({space: 20}){
LoadingView({loading: this.loading})
Row({space: 20}){
Button('开始').onClick(() =>{
this.loading = true;
})
Button('结束').onClick(() =>{
this.loading = false;
})
}
}
.width('100%')
.height('100%')
}
}
[@Component](/user/Component)
export default struct LoadingView {
[@Prop](/user/Prop) loading: boolean = false
// 图片旋转角度
[@State](/user/State) angel: number = 0
build() {
Image($r(""app.media.app_icon""))
.width(30)
.height(30)
.rotate({
centerX: ""50%"",
centerY: ""50%"",
angle: this.angel,
})
.draggable(false)
.visibility(this.loading ? Visibility.Visible : Visibility.None)
.onAppear(() =>{
animateTo({
curve: Curve.Linear,
playMode: PlayMode.Normal,
iterations: -1, // 设置-1表示动画无限循环
onFinish: () => {
}
}, () => {
this.angel = 360
})
})
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
[@State](/user/State) loading: boolean = false;
build() {
Column({space: 20}) {
LoadingView({loading: this.loading})
Row({space: 20}) {
Button('开始').onClick(() => {
this.loading = true;
})
Button('结束').onClick(() => {
this.loading = false;
})
}
}
.width('100%')
.height('100%')
}
}
[@Component](/user/Component)
export default struct LoadingView {
[@Prop](/user/Prop) loading: boolean = false
[@State](/user/State) angel: number = 0 // 图片旋转角度
build() {
Image($r("app.media.app_icon"))
.width(30)
.height(30)
.rotate({
centerX: "50%",
centerY: "50%",
angle: this.angel,
})
.draggable(false)
.visibility(this.loading ? Visibility.Visible : Visibility.None)
.onAppear(() => {
if (this.loading) {
// 只有在加载时启动动画
this.startRotation()
}
})
.onChange(() => {
if (this.loading) {
this.startRotation()
}
})
}
// 启动旋转动画的方法
startRotation() {
// 使用动画更新角度，确保角度是从 0 开始增加的
animateTo({
curve: Curve.Linear,
playMode: PlayMode.Normal,
iterations: -1, // 设置无限循环
onFinish: () => {
// 动画完成后的回调
}
}, () => {
// 每次动画更新时增加 1 度
this.angel += 1
})
}
}
试一下
在HarmonyOS鸿蒙Next系统中，若你遇到加载图片时设置的旋转动画不执行的问题，这通常可能是由于动画配置或触发机制有误。以下是一些可能的检查点：
-
确认动画资源正确加载：确保你的旋转动画资源（如XML定义的动画文件）已被正确引用并加载到代码中。
-
动画属性设置：检查动画的属性设置，如
duration（持续时间）、interpolator（插值器）等，确保它们符合你的预期效果。 -
触发机制：确认动画是在正确的时机被触发。通常，这涉及到监听图片加载的完成事件，并在事件触发时启动动画。
-
UI线程执行：确保动画的启动是在UI线程上执行的，因为动画的更新通常需要在主线程上进行。
-
日志调试：通过打印日志来跟踪动画的加载和触发过程，检查是否有异常抛出或状态未更新。
如果以上检查点均无误，但问题依旧存在，可能是系统或框架的特定问题。此时，建议查看HarmonyOS的官方文档或更新日志，确认是否有相关已知问题或修复。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html
