天天看點

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

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

1.準備階段

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

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

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

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%')
  }
}      
【Harmony OS】【ARK UI】【Demo】加載動畫實作
【Harmony OS】【ARK UI】【Demo】加載動畫實作

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

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

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 })      
【Harmony OS】【ARK UI】【Demo】加載動畫實作

2.3實作開啟動畫

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

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

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

代碼如下

startRotate() {
    this.rotateTimeOut = setInterval(() => {
      this.rotateAngle = 0
      animateTo({ duration: 800 }, () => {
        this.rotateAngle = 360
      })
    }, 800)
  }      
【Harmony OS】【ARK UI】【Demo】加載動畫實作

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

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

this.rotateTimeOut)
  }      
【Harmony OS】【ARK UI】【Demo】加載動畫實作

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%')
  }
}      
【Harmony OS】【ARK UI】【Demo】加載動畫實作

3.2運作效果