HcSkeleton 组件骨架屏组件， imageAnimator帧动画显示数据加载效果

HcSkeleton 组件

目标：封装一个有动画的骨架组件，可以填充任意内容

实现步骤：

• 提供一个灰色块 HcSkeletonItem 组件，可以设置宽度
• 提供一个容器 HcSkeleton 组件， 可以装载灰色块，有透明度动画效果

1）灰色块组件

@Component
export struct HcSkeletonItem {
  @Prop
  widthValue: Length = '100%'

  build() {
    Text()
      .height(16)
      .width(this.widthValue)
      .borderRadius(2)
      .backgroundColor($r('app.color.common_gray_bg'))
  }
}

2）容器动画组件

@Component
export struct HcSkeleton {
  @State opacityValue: number = 1

  @Builder
  defaultBuilder() {
  }

  @BuilderParam
  default: () => void = this.defaultBuilder

  build() {
    Row({ space: 15 }) {
      this.default()
    }
    .opacity(this.opacityValue)
    .animation({
      duration: 600,
      playMode: PlayMode.Alternate,
      iterations: -1,
      curve: Curve.EaseInOut
    })
    .onAppear(() => {
      this.opacityValue = 0.5
    })
  }
}

3）测试使用

HcSkeleton() {
  Column({ space: 16 }){
    HcSkeletonItem({ widthValue: 100 })
    HcSkeletonItem({ widthValue: '50%' })
    HcSkeletonItem()
  }
  .padding(16)
}

创建imageAnimator帧动画组件Loading

帧动画，一张一张播放图片，给他一个图片数组即可

@Component
export struct Loading {
  // 宽度可以由外部传入
  loadingWidth: number = 80

  build() {
    ImageAnimator()

// 图片数组
      .images([
        { src: $r('app.media.loading_01') },
        { src: $r('app.media.loading_02') },
        { src: $r('app.media.loading_03') },
        { src: $r('app.media.loading_04') }
      ])
      .state(AnimationStatus.Running)
      .duration(199)
      .iterations(-1)
      .width(this.loadingWidth)
      .aspectRatio(3)
  }
}