以下带来鸿蒙应用开发之ArkUI（eTS）三个小球动画加载的效果的文章，将附上可用的代码。

前言

主要是给3个按钮设置animation()动画，设置不同的动画duration时间和不同的延时delay时间，并设置无限循环播放和PlayMode.AlternateReverse正反方向的播放模式。

可用的代码

@Entry

@Component

struct Index {

  @State size: number = 20

  private aboutToAppear(): void  {

    setTimeout(() => {

      this.size =10

    }, 1000)

  }

  build() {

    Column() {

        Row({space:2}) {

            Button()

              .width(this.size)

              .height(this.size)

              .backgroundColor(0xff0000)

              .margin({left:(20-this.size)/2,right:(20-this.size)/2})

              .animation({

                duration: 400, // 动画时长

                curve: Curve.EaseOut, // 动画曲线

                delay: 0, // 动画延迟

                iterations: -1, // 播放次数

                playMode: PlayMode.AlternateReverse // 动画模式

              })

            Button()

              .width(this.size)

              .height(this.size)

              .backgroundColor(0xff00ff)

              .margin({left:(20-this.size)/2,right:(20-this.size)/2})

              .animation({

                duration: 400, // 动画时长

                curve: Curve.EaseOut, // 动画曲线

                delay: 200, // 动画延迟

                iterations: -1, // 播放次数

                playMode: PlayMode.AlternateReverse // 动画模式

              })

            Button()

              .width(this.size)

              .height(this.size)

              .backgroundColor(0x00ffff)

              .margin({left:(20-this.size)/2,right:(20-this.size)/2})

              .animation({

                duration: 400, // 动画时长

                curve: Curve.EaseOut, // 动画曲线

                delay: 400, // 动画延迟

                iterations: -1, // 播放次数

                playMode: PlayMode.AlternateReverse // 动画模式

              })

        }.height(20).width(64).margin({top:50})

    }.width('100%')

  }

}