鸿蒙应用开发学习：改进小鱼动画实现按键一直按下时控制小鱼移动和限制小鱼移出屏幕

一、前言

近期我在学习鸿蒙应用开发，跟着B站UP主黑马程序员的视频教程做了一个小鱼动画应用，UP主提供的小鱼动画源代码仅仅实现了移动组件的功能，还存在一些问题，如默认进入页面是竖屏而页面适合横屏显示；真机测试发现手机的状态栏影响到了返回键对按键事件的响应；方向键不能响应一直按着的操作；还有小鱼会移出屏幕范围。

之前已经解决了强制横屏和隐藏手机状态栏，这次则是通过一番研究，实现了按键一直按下时控制小鱼移动和限制小鱼移出屏幕这两个功能。

​

二、实现方法

1. 一直按下方向键时控制小鱼移动

实现这一功能是在方向键下添加onTouch方法，对按键一直按下事件进行响应。在onTouch方法中还需要判断TouchType.Down事件和TouchType.Up事件。在TouchType.Down事件时，添加animateTo方法，实现按键时一直控制小鱼移动（需要通过setInterval方法设置定时任务让animateTo方法定期执行）。在TouchType.Up事件时，通过clearInterval清除定时任务，小鱼就不会一直移动了。以向右按键为例，改造后的代码如下：

Button('→').backgroundColor('#20101010')
            .onClick(() => {              
                animateTo(
                 { duration: 500 },
                 () => {
                   this.src = $r('app.media.fish')
                   this.fishX += this.speed
                 }
               )
            })
            .onTouch((event: TouchEvent) => {
              if (event.type === TouchType.Down) {
                this.taskId = setInterval(() => {
                  animateTo(
                    { duration: 500 },
                    () => {                      
                    this.src = $r('app.media.fish')
                    this.fishX += this.speed
                    }
                  )
                }, 200)
              }
              if (event.type === TouchType.Up) {
                clearInterval(this.taskId)
                this.taskId = -1
              }
            })

        }
        .height(240)
        .width(240)
        .justifyContent(FlexAlign.Center)
        .position({ x: 0, y: 120 })

2.限制小鱼移出屏幕

实现了上面的代码后，一直按下方向键，小鱼终于可以一直移动了，但往一个方向一直移动就会移出屏幕，为让小鱼不移出屏幕，还需要对按键操作事件进行判断，检查当前小鱼的位置，只有小鱼在限制的范围内才能执行animateTo方法移动小鱼。

按下向左方向键：对小鱼的X坐标（this.fishX）进行判断。屏幕左侧边界的X值为0，小鱼的大小为40（this.fishSize）。this.fishX是小鱼图片中心点的坐标，则当小鱼接触到屏幕左侧边界时，小鱼的中心点X坐标值为20。本软件中设置的小鱼的移动速度为20（this.speed），因此，我设置的判断条件是当this.fishX >= this.fishSize时，才能执行animateTo方法。当this.fishX == 40时，再移动一次this.fishX就变成了20，此时小鱼图片的左侧边缘正好接触到屏幕左边界。

按下向上方向键：对小鱼的Y坐标（this.fishY）进行判断。屏幕上边界Y值为0，小鱼大小为40。原理和按下向左方向机一样。我设置的判断条件是当this.fishY >= this.fishSize时，才能执行animateTo方法。

对于屏幕下方的边界和屏幕右侧的边界判断需要导入模块 import display from '@ohos.display' ，并在页面的onPageShow方法获取屏幕的尺寸信息。

onPageShow() {
    // 获取旋转的方向，具体可以查看对应文档
    let orientation = window.Orientation.LANDSCAPE;

    // 获取屏幕尺寸信息
    let promise = display.getAllDisplays()
    promise.then((data) => {
      console.info('设备屏幕信息：' + JSON.stringify(data));
      console.info('testTag', '屏幕宽度px：' + JSON.stringify(data[0].width));
      console.info('testTag', '屏幕高度px：' + JSON.stringify(data[0].height));
      this.screenWidth = px2vp(data[0].width)
      this.screenHeight = px2vp(data[0].height)
      console.info('testTag', '屏幕宽度vp：' + JSON.stringify(this.screenWidth));
      console.info('testTag', '屏幕高度vp：' + JSON.stringify(this.screenHeight));
    }).catch((err) => {
      console.error('错误信息：' + JSON.stringify(err));
    })
  }

按下向右方向机：对小鱼的X坐标（this.fishX）进行判断。屏幕右侧边界的X值为变量this.screenHeight， 则判定语句为 this.fishX <= this.screenHeight - this.fishSize 。只有符合该条件是才执行animateTo方法。

按下向下方向机：对小鱼的Y坐标（this.fishY）进行判断。屏幕右侧边界的Y值为变量this.screenWidth， 则判定语句为 this.fishY <= this.screenWidth - this.fishSize 。只有符合该条件是才执行animateTo方法。

这些判断语句都要添加到方向键的onClick方法和onTouch方法。

三、完整源代码

最后上这个文件的完整源代码：

import router from '@ohos.router';
import window from '@ohos.window'; // 用于强制设为横屏
import display from '@ohos.display'

@Entry
@Component
struct Aquarium1Page {
  onPageShow() {
    // 获取旋转的方向，具体可以查看对应文档
    let orientation = window.Orientation.LANDSCAPE;
    try {
      // 设置屏幕旋转
      globalThis.windowClass.setPreferredOrientation(orientation, (err) => {
        console.log('testTag', `onPageShow函数中setPreferredOrientation方法错误码为${err}`)
      });
    } catch (exception) {
      console.error('设置失败: ' + JSON.stringify(exception));
    }
    // 获取屏幕尺寸信息
    let promise = display.getAllDisplays()
    promise.then((data) => {
      console.info('设备屏幕信息：' + JSON.stringify(data));
      console.info('testTag', '屏幕宽度px：' + JSON.stringify(data[0].width));
      console.info('testTag', '屏幕高度px：' + JSON.stringify(data[0].height));
      this.screenWidth = px2vp(data[0].width)
      this.screenHeight = px2vp(data[0].height)
      console.info('testTag', '屏幕宽度vp：' + JSON.stringify(this.screenWidth));
      console.info('testTag', '屏幕高度vp：' + JSON.stringify(this.screenHeight));
    }).catch((err) => {
      console.error('错误信息：' + JSON.stringify(err));
    })
  }

  onPageHide() {
    // 获取旋转的方向，具体可以查看对应文档
    let orientation = window.Orientation.PORTRAIT;
    try {
      // 设置屏幕旋转
      globalThis.windowClass.setPreferredOrientation(orientation, (err) => {
        console.log('testTag', `onPageHide函数中setPreferredOrientation方法错误码为${err}`)
      });
    } catch (exception) {
      console.error('设置失败: ' + JSON.stringify(exception));
    }
  }

  // 小鱼的位置
  @State fishX: number = 200
  @State fishY: number = 180
  // 小鱼的大小
  fishSize: number = 40
  // 小鱼角度
  @State angle: number = 0
  // 小鱼图片
  @State src: Resource = $r('app.media.fish')
  // 是否开始游戏
  @State isBegin: boolean = false
  // 小鱼的速度
  speed: number = 20
  // 用于控制Interval的id
  taskId: number = -1
  // 屏幕尺寸
  screenWidth: number = px2vp(2000)
  screenHeight: number = px2vp(1080)

  build() {
    Row() {
      Stack() {
        Button('返回')
          .position({ x: 20, y: 20 })
          .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(this.fishSize)
            .height(this.fishSize)
              //.animation({duration: 500, curve: Curve.Smooth})
            .transition({
              type: TransitionType.Insert,
              opacity: 0,
              translate: { x: -250 }
            })
        }
        // 操作按钮
        Row() {
          // 向左移动，小鱼身体不能超出屏幕范围
          Button('←').backgroundColor('#20101010')
            .onClick(() => {
              if (this.fishX >= this.fishSize) {
                animateTo(
                  { duration: 500 },
                  () => {
                    this.src = $r('app.media.fish_rev')
                    this.fishX -= this.speed
                  }
                )
              }
            })
            .onTouch((event: TouchEvent) => {
              if (event.type === TouchType.Down) {
                this.taskId = setInterval(() => {
                  animateTo(
                    { duration: 500 },
                    () => {
                      if (this.fishX >= this.fishSize) {
                        this.src = $r('app.media.fish_rev')
                        this.fishX -= this.speed
                      }
                    }
                  )
                }, 200)
              }
              if (event.type === TouchType.Up) {
                clearInterval(this.taskId)
                this.taskId = -1
              }
            })

          Column({ space: 40 }) {
            // 向上和向下移动，小鱼的身体均不能超出屏幕范围
            Button('↑').backgroundColor('#20101010')
              .onClick(() => {
                if (this.fishY >= this.fishSize) {
                  animateTo(
                    { duration: 500 },
                    () => {
                      this.fishY -= this.speed
                    }
                  )
                }
              })
              .onTouch((event: TouchEvent) => {
                if (event.type === TouchType.Down) {
                  this.taskId = setInterval(() => {
                    animateTo(
                      { duration: 500 },
                      () => {
                        if (this.fishY >= this.fishSize) {
                          this.fishY -= this.speed
                        }
                      }
                    )
                  }, 200)
                }
                if (event.type === TouchType.Up) {
                  console.log("testTag", `停止向上，当前fishY为：${this.fishY}`)
                  clearInterval(this.taskId)
                  this.taskId = -1
                }
              })
            Button('↓').backgroundColor('#20101010')
              .onClick(() => {
                if (this.fishY <= this.screenWidth - this.fishSize) {
                  animateTo(
                    { duration: 500 },
                    () => {
                      this.fishY += this.speed
                    }
                  )
                }
              })
              .onTouch((event: TouchEvent) => {
                if (event.type === TouchType.Down) {
                  this.taskId = setInterval(() => {
                    animateTo(
                      { duration: 500 },
                      () => {
                        if (this.fishY <= this.screenWidth - this.fishSize) {
                          this.fishY += this.speed
                        }
                      }
                    )
                  }, 200)
                }
                if (event.type === TouchType.Up) {
                  console.log("testTag", `停止向下，当前fishY为：${this.fishY}`)
                  clearInterval(this.taskId)
                  this.taskId = -1
                }
              })
          }

          Button('→').backgroundColor('#20101010')
            .onClick(() => {
              if (this.fishX <= this.screenHeight - this.fishSize) {
                animateTo(
                  { duration: 500 },
                  () => {
                    this.src = $r('app.media.fish')
                    this.fishX += this.speed
                  }
                )
              }
            })
            .onTouch((event: TouchEvent) => {
              if (event.type === TouchType.Down) {
                this.taskId = setInterval(() => {
                  animateTo(
                    { duration: 500 },
                    () => {
                      if (this.fishX <= this.screenHeight - this.fishSize) {
                        this.src = $r('app.media.fish')
                        this.fishX += this.speed
                      }
                    }
                  )
                }, 200)
              }
              if (event.type === TouchType.Up) {
                clearInterval(this.taskId)
                this.taskId = -1
              }
            })

        }
        .height(240)
        .width(240)
        .justifyContent(FlexAlign.Center)
        .position({ x: 0, y: 120 })
      }
      .height('100%').width('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundImage($r('app.media.underwater_cartoon'))
    .backgroundImageSize({ height: '100%', width: '100%' })

  }
}

四、B站视频链接：

鸿蒙应用开发学习：改进小鱼动画实现按键一直按下时控制小鱼移动和限制小鱼移出屏幕-CSDN博客