社区首页 >专栏 >鸿蒙开发：loading动画的几种实现方式

鸿蒙开发：loading动画的几种实现方式

原创

程序员一鸣

发布于 2025-06-15 08:38:43

1600

文章被收录于专栏：HarmonyOS点石成金HarmonyOS点石成金

前言

本文基于Api13

这两天在优化一些功能，发现之前网路库中的oading动画是通过帧动画实现的，而刷新库中的动画却是直接使用的GIF，而到了另一个项目中则又是通过属性动画的方式实现的，索性就针对这几种实现方式简单总结一下，希望可以帮助到有需要的朋友。

首先，我们要知道一点，想要实现一个动态的图片，不仅仅是以上的几种方式，使用lottie也可以实现，所以在实际的开发中，应当根据自身需求需要，选择一种合适的即可。

GIF的实现方式

GIF无疑是实现动态图片的最简单的方式，只需要一个GIF图片便可以搞定，这种方式也是最省心省力的。

只需要把loading的GIF图给Image组件设置即可：

Column() {
        Image($r("app.media.loading"))
          .width(40)
          .height(40)
        Text("加载中…")
          .margin({ top: 20 })
      }
      .width(130)
      .height(130)
      .backgroundColor(Color.White)
      .borderRadius(10)
      .justifyContent(FlexAlign.Center)

效果如下：

如果你需要控制GIF的播放速度以及暂停，继续播放等动作，可以结合官方推荐的开源库ohos-gif-drawable来实现。

帧动画

帧动画，可以使用ohos.animator来实现，但是我们也可以使用帧动画组件ImageAnimator来实现，它可以实现逐帧播放图片的能力，仅配置需要播放的图片列表就可以轻松完成一个图片的动画效果。

要想实现帧动画的无限次播放，需要设置iterations属性为-1，在组件挂载显示后进行运行帧动画，在组件卸载消失时停止掉针动画。

定义数据

 @State state: AnimationStatus = AnimationStatus.Initial
  private images: Array<ImageFrameInfo> = [
    { src: $r("app.media.loading001") },
    { src: $r("app.media.loading002") },
    { src: $r("app.media.loading003") },
    { src: $r("app.media.loading004") },
    { src: $r("app.media.loading005") },
    { src: $r("app.media.loading006") },
    { src: $r("app.media.loading007") },
    { src: $r("app.media.loading008") },
    { src: $r("app.media.loading009") },
    { src: $r("app.media.loading010") },
    { src: $r("app.media.loading011") },
    { src: $r("app.media.loading012") }
  ]

代码实现

Column() {
        ImageAnimator()
          .images(this.images)
          .state(this.state)
          .fixedSize(true)
          .fillMode(FillMode.None)
          .iterations(-1)
          .width(40)
          .height(40)
        Text("加载中…")
          .margin({ top: 20 })
          .fontColor(Color.White)
      }
      .width(130)
      .height(130)
      .backgroundColor("#80000000")
      .borderRadius(10)
      .justifyContent(FlexAlign.Center)
      .onAppear(() => {
        this.state = AnimationStatus.Running
      })
      .onDisAppear(() => {
        this.state = AnimationStatus.Stopped
      })

运行之后，效果如下：

属性动画

使用属性动画就比较简单了，只需要一张静态的图片便可以搞定，让图片360度无限次旋转即可，需要注意的是，改变旋转角度的属性，应定义在组件加载完成之后，相关代码如下：

@Entry
@Component
struct Index {
  @State rotateValue: number = 0

  build() {
    Column() {

      Column() {
        Image($r('app.media.loading001'))
          .rotate({ angle: this.rotateValue })
          .width(40)
          .height(40)
          .rotate({
            angle: this.rotateValue
          })
          .animation({
            duration: 1000,
            iterations: -1,
            playMode: PlayMode.Normal,
            curve: Curve.Linear
          })

        Text("加载中…")
          .margin({ top: 20 })
          .fontColor(Color.White)
      }
      .width(130)
      .height(130)
      .backgroundColor("#80000000")
      .borderRadius(10)
      .justifyContent(FlexAlign.Center)
      .onAppear(() => {
        this.rotateValue = 360
      })

    }.width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)

  }

}

以上的代码和上面的效果差不多，但是需要控制播放的速度，可以通过animation中的duration来控制。

显式动画

以上的效果，我们也可以使用animateTo显示动画来实现，基本参数和属性动画类似，实现方式如下：

@Entry
@Component
struct Index {
  @State rotateValue: number = 0

  build() {
    Column() {

      Column() {
        Image($r('app.media.loading001'))
          .rotate({ angle: this.rotateValue })
          .width(40)
          .height(40)
        Text("加载中…")
          .margin({ top: 20 })
          .fontColor(Color.White)
      }
      .width(130)
      .height(130)
      .backgroundColor("#80000000")
      .borderRadius(10)
      .justifyContent(FlexAlign.Center)

    }.width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)

  }

  onDidBuild(): void {
    animateTo({
      duration: 1000,
      iterations: -1,
      playMode: PlayMode.Normal,
      curve: Curve.Linear
    }, () => {
      this.rotateValue = 360
    })
  }
}