HarmonyOS Development: Several Implementation Ways of loading Animation

Foreword

this article is based on Api13

in the past two days, I have been optimizing some functions. I found that the oading animation in the network library was realized through frame animation, while the animation in the refresh Library was directly used GIF, and in another project, it was realized through attribute animation. I simply summarized these implementation methods, hoping to help friends in need.

First of all, we need to know one thing, want to achieve a dynamic picture, not just the above several ways, use lottie can also be implemented, so in actual development, you should choose a suitable one according to your own needs.

Implementation of GIF

GIF is undoubtedly the simplest way to realize dynamic pictures. It can be done with only one GIF picture. This way is also the most worry-free and labor-saving.

Just set the GIF of loading to the Image component:

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)

the effect is as follows:

if you need to control the GIF playback speed and pause, continue to play and other actions, you can combine the official recommend of the open source library ohos-gif-drawable to achieve.

Frame Animation

frame animation, you can use ohos.animator, but we can also use the frame animation component ImageAnimator to implement, it can realize the ability to play Pictures frame by frame, and only configure the list of pictures to be played can easily complete the animation effect of a picture.

In order to realize the infinite playback of frame animation, you need to set the iterations attribute to -1, run the frame animation after the component is mounted and displayed, and stop the Pin Drop animation when the component is unloaded and disappears.

Defining Data

 @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") }
  ]

code implementation

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
      })

after running, the effect is as follows:

property Animation

it is relatively simple to use attribute animation. It only needs a static picture to make the picture rotate 360 degrees indefinitely. It should be noted that the attribute of changing the rotation angle should be defined after the component is loaded. The relevant code is as follows:

@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)

  }

}

the above code is similar to the above, but the playback speed needs to be controlled, which can be controlled by the duration in animation.

Explicit animation

for the above effect, we can also use animateTo display animation to achieve, the basic parameters and property animation is similar, the implementation is as follows:

@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
    })
  }
}

related Summary

basically, there is nothing difficult. They are all very simple animation implementations. Although it is a loading animation, it can also be applied to other places that need animation.

This article tags: HarmonyOS/ArkUI