【鸿蒙实战开发】HarmonyOS动画效果实现

页面分类动画

显示动画

function animateTo(value: AnimateParam, event: () => void): void;

代码如下：（实现属性变化引发的动画）

@Entry
@Component
struct Animate_Page1 {
  @State boxWidth: number = 100;
  @State boxHeight: number = 100;
  @State flag: boolean = true;

  build() {
    Stack({ alignContent: Alignment.BottomEnd }) {
      Column() {
        Row() {

        }
        .width(this.boxWidth)
        .height(this.boxHeight)
        .backgroundColor(Color.Red)
      }
      .height('100%')
      .width('100%')
      .justifyContent(FlexAlign.Center)

      Button("动画")
        .width(50)
        .height(50)
        .margin(20)
        .onClick(() => {
          animateTo({
            duration: 1000 //动画时间
          }, () => {
            if (this.flag) {
              this.boxWidth = 240;
              this.boxHeight = 240;
            } else {
              this.boxWidth = 100;
              this.boxHeight = 100;
            }
            this.flag = !this.flag;
          })
        })
    }
    .width('100%')
  }
}

常见属性

●duration：动画执行时间

●iterations：动画播放次数，-1表示无限次播放

●curve：播放曲线

●playMode：动画播放模式

●delay：动画延迟播放时间

属性动画

使用animation属性去定义动画的属性，需要注意的点是，如果在animation方法后定义的属性，在改变时将不会触发动画。

@Entry
@Component
struct Animate_Page2 {
  @State boxWidth: number = 100;
  @State boxHeight: number = 100;
  @State flag: boolean = true;

  build() {
    Stack({ alignContent: Alignment.BottomEnd }) {
      Column() {
        Row() {

        }
        .width(this.boxWidth)
        .height(this.boxHeight)
        .backgroundColor(Color.Red)
        .