鸿蒙Harmony小案例：进入页面加载动画效果

 效果展示

解决办法

        转圈动画封装成组件，页面加载时展示出来就行。使用变量 isShow 判断是否加载完成，

来判断组件的显示。

Progress({
        type: ProgressType.Ring, // 环形无刻度样式，环形圆环逐渐显示至完全填充效果。
        total: 100,   // 指定进度总长。设置小于等于0的数值时置为100。默认值：100
        value: this.value  // 设置为变量
      }) 

Progress

进度条组件，用于显示内容加载或操作处理等进度。

 改变value的值，进度条发生改变。

代码实现

      1.  组件HmLoading.ets

@Preview
@Component
export  struct HmLoading {
  @State
   value : number = 0
    timer:number = -1

  // 1.进入这个页面的时候aboutToAppear
  aboutToAppear(): void {
    // 2. 定时器 会返回一个定时器的标识  ，拿到标志才能关闭
    this.timer =  setInterval(()=>{
      this.value ++
      if (this.value === 100) {
        this.value = 0
      }
    }, 10)

  }
  // 3. 离开页面，页面挂掉的时候
  aboutToDisappear(): void {
    // 关闭定时器
    clearInterval(this.timer)
  }
  build() {
    Row(){
      Progress({
        type: ProgressType.Ring,
        total: 100,
        value: this.value
      })
    }

  }
}

          2.  LoadingCase.ets

import { HmLoading } from './components/HmLoading';

@Entry
@Component
struct LoadingCase {
  @State isShow:boolean = true;

  aboutToAppear(): void {
    // 延时执行 只有一次
    setTimeout(()=>{
      this.isShow = false
    }, 3*1000)
  }

  build() {
    Row() {
      Column(){
        if (this.isShow){
          HmLoading()
        }else {
          // 1. 进入aboutToApper/ 离开aboutToDisappear 页面的周期
          // 2. 定时任务 setInterval  clearInterval(id)
          // 3. 延时任务 setTimeout   clearTimeout(id)
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

总结

         该案例通过实现页面加载动画效果，对封装自定义组件，定时任务，progress组件， 页面进入和销毁函数的使用有了更深的了解。