HarmonyOS loading动画加载较慢，用户能明显看到loading动画先不动，后来才正常转起来

自定义一个loading，发现动画启动比较慢，用户能明显感觉到loading动画先没动，后来才正常转动，请问这个有好的解决方案吗？

代码如下：

@Component  
export struct LoadingView {  
  
  // 图片旋转角度  
  @Prop  
  @Watch("onLoadingChanged")  
  loading: boolean = false  
  
  // 图片旋转角度  
  @State angel: number = 0  
  
  onLoadingChanged() {  
    if (this.loading) {  
      this.angel = 0  
      this.startLoadingDialogRotate(360)  
    }  
  }  
  
  build() {  
    Image($r("app.media.ic_loading_circle"))  
      .width(30)  
      .height(30)  
      .rotate({  
        centerX: "50%",  
        centerY: "50%",  
        angle: this.angel,  
      })  
      .draggable(false)  
      .visibility(this.loading ? Visibility.Visible : Visibility.None)  
  }  
  
  private startLoadingDialogRotate(animationValue: number) {  
    animateTo({ onFinish: () => {  
      if (this.loading) {  
        this.startLoadingDialogRotate(animationValue + 360)  
      }  
    } }, () => {  
      this.angel = animationValue  
    })  
  }  
  
  aboutToAppear() {  
    // 弹窗显示时，重置角度，否则动画展示有问题  
    this.onLoadingChanged()  
  }  
}

HarmonyOS

FengTianYa

2024-10-28 10:34:43

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

应要求封装成组件

1、组件使用

import LoadingView from './LoadingView';  
  
@Entry  
@Component  
struct Index {  
  
  @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%')  
  }  
}

2、loading组件封装

@Component  
export default struct LoadingView {  
  @Prop loading: boolean = false  
  // 图片旋转角度  
  @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  
        })  
      })  
  }  
}

2024-10-28 15:11:39

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS loading动画加载较慢，用户能明显看到loading动画先不动，后来才正常转起来

订阅鸿蒙技术特刊，精选内容抢先看