属性动画中.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')
})
}