ArkUI-16-属性动画和显示动画

增加一个新页面

代码：

import router from '@ohos.router';

@Entry
@Component
struct AnimationPage {


  @State fishX:number=200
  @State fishY:number=180
  //小鱼角度
  @State angle:number=0
  //小鱼图片
  @State src:Resource=$r('app.media.fish1')

  //是否开始游戏
  @State isBegin:boolean=false
  build() {
    Row() {
      Column() {

        Button('返回')
          .position({x:0,y:0})
          .backgroundColor('#20101010')
          .onClick(()=>{
            router.back()
          })
        if(!this.isBegin){
          //开始按钮
          Button('开始游戏')
            .onClick(()=>{
              //点击后显示小鱼
              this.isBegin=true
            })
        }else{
          //小鱼图片
          Image(this.src)
            .position({x:this.fishX - 100,y:this.fishY-100})
            .rotate({angle:this.angle,centerX:'50%',centerY:'50%'})
            .width(40)
            .height(40)
            // .animation({duration:500})
          //操作按钮
          Row(){
            Button('←').backgroundColor('#20101010')
              .onClick(()=>{
                animateTo(
                  {duration:500},
                  ()=>{
                    this.fishX -=20
                    this.src = $r('app.media.fish')
                  }
                )
              })
            Column({space:40}){
              Button('↑').backgroundColor('#20101010')
                .onClick(()=>{
                  this.fishY -=20
                })
              Button('↓').backgroundColor('#20101010')
                .onClick(()=>{
                  this.fishY +=20
                })
            }
            Button('→').backgroundColor('#20101010')
              .onClick(()=>{

                animateTo(
                  {duration:500},
                  ()=>{
                    this.fishX +=20
                    this.src = $r('app.media.fish1')
                  }
                )
              })

          }
          .height(240)
          .width(240)

        }
      }
      .width('100%')
    }.backgroundColor('#335555b3')
    .height('100%')
  }
}