鸿蒙开发【小鱼案例】实操

小鱼案例详细实操

如下图所示，利用动画组件在点击箭头按钮时，让小鱼能够动起来。

一、在项目下新建一个页面

如图所示：

二、导入我们所需要的相应的图片，并且规范命

三、页面初始化准备

3.1采用Row行式布局，嵌套一个stack布局，同时设置背景图片的属性

导入背景图片，设置背景图片的高和宽度

代码示例：

build() {
  Row() {
    Stack(){

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

  .backgroundImage($r('app.media.sea'))
  .backgroundImageSize({height: '105%', width: '100%'})

}

四、绘制页面

4.1设置状态变量isBegin 来显示游戏是否开始

设置一个isBegin 的默认值为False布尔变量

代码如下：

//是否开始游戏
@State isBegin:boolean =false

4.2设置小鱼坐标，角度以及小鱼图片

并且写一个小鱼图片地址的变量来处理转向的另一张图，再写小鱼的坐标变量

代码如下：

struct AnimationPage {
  //小鱼坐标
  @State fishX:number = 200
  @State fishY:number =180
  //小鱼角度
  @State angle:number = 0
  //小鱼图片
  @State src :Resource = $r("app.media.fish")
  //是否开始游戏
  @State isBegin:boolean =false

4.3 利用if判断进而展示开始游戏按钮

然后游戏开始，就会显示小鱼图片以及操作按钮

代码如下：

if (!this.isBegin){
  Button('开始游戏')
    .onClick(()=>{
      //显示动画
      animateTo({duration:1000 },
        () =>{ //回调函数
          this.isBegin =true
        })
    })
}else{
  //小鱼图片
  Image(this.src)
    .position({x:this.fishX -20,y:this.fishY -20})
    .rotate({angle:this.angle,centerX:'50%',centerY:'50%'})
    .width(40)
    .height(40)
  
   })

运行结果：

4.4 添加一个返回按钮

这里需要用到页面路由router，所有需要导包，利用back实现返回

源码：

import router from '@ohos.router'

代码如下：

// 返回按钮
Button('返回')
  .position({x:0,y:0})
  .backgroundColor('#20101010')
  .onClick(()=>{
    //返回上一页
    router.back()
  })

由于这里只有一个页面，点击返回按钮并没有明显效果

运行结果：

4.5 设置按钮操作

同样的利用Row容器布局，在分别添加左箭头，右箭头，利用Column容器添加上箭头，以及下箭头按钮

代码如下：

//操作按钮
Row(){
  Button('←').backgroundColor('#20101010')

//利用Column容器添加上箭头，以及下箭头按钮
    Column({space:40}){
  Button('⬆').backgroundColor('#20101010')
       
  Button('⬇').backgroundColor('#20101010')
   Button('→').backgroundColor('#20101010')
 

4.6 分别给箭头添加点击事件，改变其坐标

4.6.1左箭头的点击事件

要让鱼向左，那就用水平移动，向左变小，向右变大

代码如下：

.onClick(()=>{
      this.fishX -=20
  })

4.6.2右箭头点击事件

要让鱼向右，那就用水平移动，向左变小，向右变大

代码如下：

.onClick(()=>{
  this.fishX +=20

4.6.3上箭头点击事件

要让鱼向上，那就用垂直移动，向上变小，向下变大

代码如下：

.onClick(()=>{
  this.fishY -=20

4.6.3下箭头点击事件

要让鱼向下，那就用垂直移动，向上变小，向下变大

代码如下：

.onClick(()=>{
  this.fishX +=20

4.6.4 整体代码：

//操作按钮
Row(){
  Button('←').backgroundColor('#20101010')
    //显示动画
    //设置点击事件改变坐标,点击向做移动20
    .onClick(()=>{
              this.fishX -=20
      })
  Column({space:40}){
    Button('⬆').backgroundColor('#20101010')
      .onClick(()=>{
        this.fishY -=20
      })
    Button('⬇').backgroundColor('#20101010')
      .onClick(()=>{
        this.fishY +=20
      })
  }
  Button('→').backgroundColor('#20101010')
    .onClick(()=>{
      this.fishX +=20
    })
}
.height(240)
.width(240)
.justifyContent(FlexAlign.Center)
.position({x:0,y:120})

4.7 添加动画

4.7.1 小鱼的显示动画

在小鱼图片属性下使用animation添加动画播放时长500ms，然后对左箭头的方向设置镜像图片。右箭头设置正常图片

代码如下：

//显示动画
//设置点击事件改变坐标,点击向做移动20
.onClick(()=>{
  animateTo({duration:500 },
    () =>{ //回调函数
      this.fishX -=20
      this.src=$r("app.media.fishrev")
  })

})

右箭头下的小鱼图片

Button('→').backgroundColor('#20101010')
  .onClick(()=>{
    this.fishX +=20
    this.src=$r('app.media.fish')
  })

4.7.2 小鱼的转场动画

用transition给小鱼图片加转场动画，设置type的入场类型：TransitionType.Insert和不透明度opacity：0。然后使用translate来修改坐标，然后用animateTo来添加开始。

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,curve:Curve.Smooth})
   //加入出场动画
 .transition({
   type:TransitionType.Insert,
   opacity:0 ,//入场，一开始是透明的，慢慢变得不透明
   translate:{x:-250}

 })

五、源代码展示：

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.fish")
  //是否开始游戏
  @State isBegin:boolean =false
  build() {
    Row() {
      Stack(){
        // 返回按钮
        Button('返回')
          .position({x:0,y:0})
          .backgroundColor('#20101010')
          .onClick(()=>{
            //返回上一页
            router.back()
          })

        if (!this.isBegin){
          Button('开始游戏')
            .onClick(()=>{
              //显示动画
              animateTo({duration:1000 },
                () =>{ //回调函数
                  //
                  this.isBegin =true
                })
            })
        }else{
          //小鱼图片
          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,curve:Curve.Smooth})
             //加入出场动画
           .transition({
             type:TransitionType.Insert,
             opacity:0 ,//入场，一开始是透明的，慢慢变得不透明
             translate:{x:-250}

           })

              //先加属性动画
            // .animation({duration:500})
          //操作按钮
          Row(){
            Button('←').backgroundColor('#20101010')
              //显示动画
              //设置点击事件改变坐标,点击向做移动20
              .onClick(()=>{
                animateTo({duration:500 },
                  () =>{ //回调函数
                    this.fishX -=20
                    this.src=$r("app.media.fishrev")
                })

              })
            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')
              })
          }
          .height(240)
          .width(240)
          .justifyContent(FlexAlign.Center)
          .position({x:0,y:120})
        }
      }
    .height('100%')
    .width('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundImage($r('app.media.sea'))
    .backgroundImageSize({height: '105%', width: '100%'})
  }
}

嘿嘿 就让我i们继续学习，继续加油吧！