├── ets
│   ├── loading      # loading動(dòng)畫(huà)圖片幀
│   └── pages        # ets代碼
│       ├── Index.ets
│       ├── loadingComponent_part1.ets
│       ├── loadingComponent_part2.ets #ImageAnimator幀動(dòng)畫(huà)組件實(shí)現(xiàn)自定義loading加載動(dòng)畫(huà)
│       └── loadingComponent_part3.ets #Progress進(jìn)度條組件實(shí)現(xiàn)的loading加載動(dòng)畫(huà)

//loadingComponent_part1.ets
 @Component

export default struct loadingComponent_part1 {
  private imageWidth: number | Resource = 0
  private imageHeight: number | Resource = 0

  build() {
    Column() {
      ImageAnimator()
        .images([
          {
            src: '/loading/loading01.png',
            duration: 200, //每一幀圖片的播放時(shí)長(zhǎng)，單位毫秒
          },
          {
            src: '/loading/loading02.png',
            duration: 200,
          },
          {
            src: '/loading/loading03.png',
            duration: 200,
          },
          {
            src: '/loading/loading04.png',
            duration: 200,
          },
          {
            src: '/loading/loading05.png',
            duration: 200,
          },
          {
            src: '/loading/loading06.png',
            duration: 200,
          }])
        .width(this.imageWidth)
        .height(this.imageHeight)
        .iterations(-1)  
          //  設(shè)置播放順序。false表示從第1張圖片播放到最后1張圖片； true表示從最后1張圖片播放到第1張圖片。
        
        .fixedSize(true) 
          //設(shè)置圖片大小是否固定為組件大小。 true表示圖片大小與組件大小一致，此時(shí)設(shè)置圖片的width 、height 、top 和left屬性是無(wú)效的。false表示每一張圖片的width 、height 、top和left屬性都要單獨(dú)設(shè)置。
        
        .reverse(true) 
          //設(shè)置播放順序。false表示從第1張圖片播放到最后1張圖片； true表示從最后1張圖片播放到第1張圖片。
        
        .fillMode(FillMode.None)
          //設(shè)置動(dòng)畫(huà)開(kāi)始前和結(jié)束后的狀態(tài)，可選值參見(jiàn)FillMode說(shuō)明
        
        .state(AnimationStatus.Running)  
          //Running表示動(dòng)畫(huà)處于播放狀態(tài)
    }
  }
}

import loading1 from './loadingComponent_part1';

struct Index {
  //用來(lái)繪制loading動(dòng)畫(huà)的
  // 要打開(kāi)在點(diǎn)擊事件中添加 this.loading1.open();
  // 要關(guān)閉在點(diǎn)擊事件中添加 this.loading1.close();
  // 通過(guò)CustomDialogController類(lèi)顯示自定義彈窗。
  private loading1: CustomDialogController = new CustomDialogController({
    builder: loadingProgress_part1(),
    alignment: DialogAlignment.Center,
    offset: ({ dx: 0, dy: 0 }),
    autoCancel: false,
    customStyle: true
  });
}

//用來(lái)繪制loading動(dòng)畫(huà)的
@CustomDialog
struct loadingProgress_part1{
  controller: CustomDialogController;

  build() {
    Column() {
      loading1({ imageWidth: 80,
        imageHeight: 80 }).margin({top:350})

    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .backgroundColor(Color.White)
  }

}

Button(this.message1)
          .margin({top:100})
          .fontWeight(FontWeight.Normal)
          .backgroundColor(Color.Green) //設(shè)置按鈕顏色
          .onClick(() => {

            //開(kāi)始繪制loading動(dòng)畫(huà)
            this.loading1.open();
            //使用一個(gè)setTimeout定時(shí)器,setTimeout中第一個(gè)參數(shù)使用 () => { 要執(zhí)行的函數(shù) }
            //this.ocrDialog.close();是關(guān)閉loading動(dòng)畫(huà)
            setTimeout( () => {this.loading1.close();} , 3000);

          })

struct Index {
  @State i: number = 0

  //aboutToAppear 函數(shù)在創(chuàng)建自定義組件的新實(shí)例后，在執(zhí)行其build函數(shù)之前執(zhí)行。
  aboutToAppear(){
    //定時(shí)器中的setInterval： 重復(fù)調(diào)用一個(gè)函數(shù)，在每次調(diào)用之間具有固定的時(shí)間延遲。
    setInterval( () => {  this.i = this.i + 10  } , 300);
  }

  build() {
...

        Progress({ value: this.i, type: ProgressType.Linear })
          .width(200)
          .margin({top:30})

        Progress({ value: this.i, total: 150, type: ProgressType.ScaleRing })
          .color(Color.Green).value(this.i).width(50)
          .margin({top:30})
          .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 })
...
}

}