轻松上手-骨架屏后动画显示 原创

作者：狼哥
团队：坚果派
团队介绍：坚果派由坚果等人创建，团队拥有12个华为HDE带领热爱HarmonyOS/OpenHarmony的开发者，以及若干其他领域的三十余位万粉博主运营。专注于分享HarmonyOS/OpenHarmony、ArkUI-X、元服务、仓颉。团队成员聚集在北京，上海，南京，深圳，广州，宁夏等地，目前已开发鸿蒙原生应用，三方库60+，欢迎交流。
1.
2.
3.

├──entry/src/main/ets                        // 代码区
│  ├──components
│  │  └──TextAreaBuilder.ets				 // 骨架屏占位组件 
│  ├──entryability
│  │  └──EntryAbility.ets 
│  ├──pages
│  │  └──Index.ets                           // 首页
│  └──view
│     ├──GridSkeleton.ets              		 // Grid骨架图
│     ├──GridView.ets                 		 // Grid布局图
│     ├──ListSkeleton.ets                 	 // List骨架图
│     └──ListView.ets                  		 // List布局图
│     ├──SwiperSkeleton.ets                  // Swiper骨架图
│     └──SwiperView.ets                 	 // Swiper布局图
└──entry/src/main/resources                  // 应用资源目录
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

@Builder
export function textArea(
  width: number | Resource | string = '100%',
  height: number | Resource | string = '100%',
  borderRadius: Length | BorderRadiuses | LocalizedBorderRadiuses = 0,
  padding: Length | Padding | LocalizedPadding = 0,
  margin: Length | Padding | LocalizedPadding = 0) {
  Row()
    .width(width)
    .height(height)
    .backgroundColor('#FFF2F3F4')
    .borderRadius(borderRadius)
    .padding(padding)
    .margin(margin)
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

@Entry
@Component
struct Index {
    build() {
    Column({ space: 20 }) {
      SwiperView()
      GridView()
      ListView()
    }
    .height('100%')
    .width('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

import { textArea } from '../components/TextAreaBuilder'
@Component
export struct SwiperSkeleton {
  build() {
    textArea('90%', px2vp(460), 16, 0, {top: 11})
  }
}
1.
2.
3.
4.
5.
6.
7.

  @State isLoadingSwiperData: boolean = true;
  aboutToAppear(): void {
    // 模拟异步回调
    setTimeout(() => {
      animateTo({ duration: 1000 }, () => {
        this.isLoadingSwiperData = false;
      })
    }, 4000)
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.

  Swiper() {
    ForEach(this.bannerList, (item: BannerClass) => {
      if (this.isLoadingSwiperData) {
        SwiperSkeleton()
      } else {
        Image($r(item.imageSrc))
          .objectFit(ImageFit.Contain)
          .width('100%')
          .borderRadius(16)
          .transition({ type: TransitionType.Insert, translate: { x: 700, y: 0 } })
      }
    }, (item: BannerClass) => item.id.toString())
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

import { textArea } from '../components/TextAreaBuilder'
@Component
export struct GridSkeleton {
  build() {
    Column({space: 15}) {
      textArea('100%', '60%', { topLeft: 16, topRight: 16 })
      Column({space: 15}) {
        textArea('60%', '15%')
        textArea('90%', '25%')
      }
      .width('100%')
      .alignItems(HorizontalAlign.Start)
      .padding({left: 15})
    }
    .height('100%')
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

  @State isLoadingGridData: boolean = true;
  aboutToAppear(): void {
    // 模拟异步回调
    setTimeout(() => {
      animateTo({ duration: 3000 }, () => {
        this.isLoadingGridData = false;
      })
    }, 6000)
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.

  Grid() {
    ForEach(this.enablementList, (item: ArticleClass) => {
      GridItem() {
        if (this.isLoadingGridData) {
          GridSkeleton()
        } else {
          EnablementItem({ enablementItem: item })
            .transition({ type: TransitionType.Insert, translate: { x: -700, y: 0 } })
        }

      }
      .width(160)
    }, (item: ArticleClass) => item.id.toString())
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

import { textArea } from '../components/TextAreaBuilder'
@Component
export struct ListSkeleton {
  build() {
    Row({space: 10}) {
      Column({space: 10}) {
        textArea('60%', '20%')
        textArea('90%', '70%')
      }
      .width('70%')
      .alignItems(HorizontalAlign.Start)
      textArea('30%', '100%', 16)
    }
    .height(88)
    .margin({ bottom: 10 })
    .justifyContent(FlexAlign.SpaceBetween)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

  @State isLoadingListData: boolean = true;
  aboutToAppear(): void {
    // 模拟异步回调
    setTimeout(() => {
      animateTo({ duration: 3000 }, () => {
        this.isLoadingListData = false;
      })
    }, 8000)
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.

List({ space: 12 }) {
    ForEach(this.tutorialList, (item: ArticleClass) => {
      ListItem() {
        if (this.isLoadingListData) {
          ListSkeleton()
        } else {
          TutorialItem({ tutorialItem: item })
            .transition({ type: TransitionType.Insert, translate: { x: 0, y: 500 } })
        }
      }
    }, (item: ArticleClass) => item.id.toString())
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.