【Harmony OS】【ARK UI】【Demo】加載動畫實作

 在HarmonyOS 中加載動畫實作是很常見的技術，今天分享怎麼實作加載動畫的功能，分為“準備階段”，“代碼實作”，“運作效果”三步進行實作。

1.準備階段

我們需要準備一張加載的圖檔（如下圖所示），把圖檔放在resource/base/media/目錄下（如圖所示），我們還需要學習“​​顯式動畫​​”，“​​元件内轉場​​”，“ ​​定時器​​”這個三篇資料

​

​

2. 代碼實作

2.1繪畫界面

一個張圖檔顯示加載，一個text顯示開啟動畫，一個text顯示關閉動畫，代碼和效果如下，

@Entry
@Component
struct LoadAnimation {
 

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Image($r("app.media.loading"))
        .objectFit(ImageFit.Contain)
        .height(40)
        .aspectRatio(1)
        .width(40)
        .margin({ bottom: 5 })
      Text("開始動畫").width("100%").height(100)
      .textAlign(TextAlign.Center).backgroundColor(Color.Red)
        .fontColor(Color.White).fontSize(20)
      .margin(10)
   

      Text("結束動畫").width("100%").height(100)
        .textAlign(TextAlign.Center).backgroundColor(Color.White)
        .fontColor(Color.Black).fontSize(20)
        .margin(10)
    }
    .width('100%')
    .height('100%')
  }
}      

​

2.2 給Image添加旋轉屬性，參考資料“​​元件内轉場​​”的rotate屬性，代碼如下

​

Image($r("app.media.loading"))
        .objectFit(ImageFit.Contain)
        .height(40)
        .aspectRatio(1)
        .width(40)
        .margin({ bottom: 5 })
        .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle })      

2.3實作開啟動畫

實作這個功能我們需要學習“​​顯式動畫​​”的animateTo的使用方法和“​​定時器​​”的setInterval功能實作

​

​

代碼如下

startRotate() {
    this.rotateTimeOut = setInterval(() => {
      this.rotateAngle = 0
      animateTo({ duration: 800 }, () => {
        this.rotateAngle = 360
      })
    }, 800)
  }      

2.4關閉動畫按鈕點選實作實作

我們清除定時器就可以了，代碼如下

this.rotateTimeOut)
  }      

3.運作效果

3.1全部代碼如下

@Entry
@Component
struct LoadAnimation {
  @State rotateAngle:number=0
  private rotateTimeOut: any //計時器
  startRotate() {
    this.rotateTimeOut = setInterval(() => {
      this.rotateAngle = 0
      animateTo({ duration: 800 }, () => {
        this.rotateAngle = 360
      })
    }, 800)
  }
  clearAnimation(){
    clearInterval(this.rotateTimeOut)
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Image($r("app.media.loading"))
        .objectFit(ImageFit.Contain)
        .height(40)
        .aspectRatio(1)
        .width(40)
        .margin({ bottom: 5 })
        .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle })
      Text("開始動畫").width("100%").height(100)
      .textAlign(TextAlign.Center).backgroundColor(Color.Red)
        .fontColor(Color.White).fontSize(20)
      .margin(10)
      .onClick(this.startRotate.bind(this))

      Text("結束動畫").width("100%").height(100)
        .textAlign(TextAlign.Center).backgroundColor(Color.White)
        .fontColor(Color.Black).fontSize(20)
        .margin(10)
        .onClick(this.clearAnimation.bind(this))
    }
    .width('100%')
    .height('100%')
  }
}      

3.2運作效果