[OpenHarmony北向应用开发] 做一个 loading加载动画 原创 精华

├── ets
│   ├── loading      # loading动画图片帧
│   └── pages        # ets代码
│       ├── Index.ets
│       ├── loadingComponent_part1.ets
│       ├── loadingComponent_part2.ets #ImageAnimator帧动画组件实现自定义loading加载动画
│       └── loadingComponent_part3.ets #Progress进度条组件实现的loading加载动画
1.
2.
3.
4.
5.
6.
7.

//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, //每一帧图片的播放时长，单位毫秒
          },
          {
            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)  
          //	设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。
        
        .fixedSize(true) 
          //设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的width 、height 、top和left属性都要单独设置。
        
        .reverse(true) 
          //设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。
        
        .fillMode(FillMode.None)
          //设置动画开始前和结束后的状态，可选值参见FillMode说明
        
        .state(AnimationStatus.Running)  
          //Running表示动画处于播放状态
    }
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.

import loading1 from './loadingComponent_part1';
1.

struct Index {
  //用来绘制loading动画的
  // 要打开在点击事件中添加 this.loading1.open();
  // 要关闭在点击事件中添加 this.loading1.close();
  // 通过CustomDialogController类显示自定义弹窗。
  private loading1: CustomDialogController = new CustomDialogController({
    builder: loadingProgress_part1(),
    alignment: DialogAlignment.Center,
    offset: ({ dx: 0, dy: 0 }),
    autoCancel: false,
    customStyle: true
  });
}

//用来绘制loading动画的
@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)
  }

}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

        Button(this.message1)
          .margin({top:100})
          .fontWeight(FontWeight.Normal)
          .backgroundColor(Color.Green) //设置按钮颜色
          .onClick(() => {

            //开始绘制loading动画
            this.loading1.open();
            //使用一个setTimeout定时器,setTimeout中第一个参数使用 () => { 要执行的函数 }
            //this.ocrDialog.close();是关闭loading动画
            setTimeout( () => {this.loading1.close();} , 3000);

          })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

struct Index {
  @State i: number = 0

  //aboutToAppear	函数在创建自定义组件的新实例后，在执行其build函数之前执行。
  aboutToAppear(){
    //定时器中的setInterval： 重复调用一个函数，在每次调用之间具有固定的时间延迟。
    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 })
...
}

}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.