鸿蒙动画属性动画，帧动画

1、属性动画

1.1、闭包参数

@Entry
@Component
struct AnimationToCase {
  @State message: string = '测试';

  @State hei:number=100
  @State widtht:number=200

  build() {
    Column({space:20}) {
      Button(this.message)
        .width(this.widtht)
        .height(this.hei)

      Button('开启动画')
        .onClick(()=>{
          // iterations:-1,表示永远不停
          animateTo({ duration:1000 ,iterations:4,playMode:PlayMode.Alternate}
            ,()=>{
            // 属性变换后的值，需要放此处
            this.widtht=100
            this.hei=50
          })

      })
    }
    .height('100%')
    .width('100%')
  }
}

或者

@Entry
@Component
struct AnimationToCase {
  @State message: string = '测试';

  @State hei:number=100
  @State widtht:number=200

  build() {
    Column({space:20}) {
      Button(this.message)
        .width(this.widtht)
        .height(this.hei)
        .animation({ duration:1000 ,iterations:4,playMode:PlayMode.Alternate})

      Button('开启动画')
        .onClick(()=>{
          // iterations:-1,表示永远不停
          // animateTo(()=>{
            // 属性变换后的值，需要放此处
            this.widtht=100
            this.hei=50
      })
    }
    .height('100%')
    .width('100%')
  }
}

放大缩小

@Entry
@Component
struct AnimationToCase {
  @State message: string = '测试';

  @State hei:number=100
  @State widtht:number=200
  @State sca:number=1

  build() {
    Column({space:20}) {
      Button(this.message)
        // .width(this.widtht)
        // .height(this.hei)
        .scale({
          x:this.sca,
          y:this.sca
        })

        .animation({ duration:1000 ,iterations:4,playMode:PlayMode.Alternate})

      Button('开启动画')
        .onClick(()=>{
          // iterations:-1,表示永远不停
          // animateTo(()=>{
            // 属性变换后的值，需要放此处
            // this.widtht=100
            // this.hei=50
          this.sca=2  
      })
    }
    .height('100%')
    .width('100%')
  }
}

2、图片帧动画ImageAnimator

  @State state: AnimationStatus = AnimationStatus.Initial
build() {
    Column({ space: 20 }) {

      ImageAnimator()
        .images([
          { src: '/assets/ic_wechat_true.svg' },
          { src: '/assets/ic_wechat_true.svg' },
          { src: '/assets/ic_wechat_true.svg' },
          { src: '/assets/ic_wechat_true.svg' }
        ])
        .duration(200)
        .iterations(-1)//一直动画
        .state(this.state)
        .width(200)
        .height(100)
}}