HarmanyOS-ArkUI-属性动画和显式动画

属性动画?

属性动画中.animation最好放在最后一个属性，因为在.animation后的属性发生变化就没有动画。

?.animation参数

显式动画

?显式动画监测的属性

代码演示

显式动画

@State fishX:number = 200
@State fishY:number = 180

@State src:Resource = $r('app.media.fish')

//小鱼图片
          Image(this.src)
            .position({x:this.fishX - 20,y:this.fishY - 20})
            .rotate({angle:this.angle,centerX:'50%',centerY:'50%'})
            .width(40)
            .height(40)

Button('→').backgroundColor('#20101010')
              .onClick(()=>{
                animateTo(
                  {duration:500},
                  ()=>{
                    this.fishX -= 20
                    this.src=$r('app.media.fish')
                  })
              })

属性动画

//小鱼图片
          Image(this.src)
            .position({x:this.fishX - 20,y:this.fishY - 20})
            .rotate({angle:this.angle,centerX:'50%',centerY:'50%'})
            .width(40)
            .height(40)
          .animation({duration:500})

//操作按钮
          Row(){
            Button('←').backgroundColor('#20101010')
            .onClick(()=>{
              this.fishX -= 20
              this.src=$r('app.media.fish1')
            })
            Column({space:40}){
              Button('↑').backgroundColor('#20101010')
                .onClick(()=>{
                  this.fishY -= 20
                })
              Button('↓').backgroundColor('#20101010')
                .onClick(()=>{
                  this.fishY += 20
                })
            }
            Button('→').backgroundColor('#20101010')
              .onClick(()=>{
                this.fishX += 20
                this.src=$r('app.media.fish')
              })
          }

?总结

显式动画灵活性更高，使用更多一些。当只对一个组件某些时刻使用动画采用显式动画方式。