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

2024-01-15 08:36
文章标签 实现 学习 应用 开发 控制 按键 动画 移动 限制 改进 屏幕 按下 移出 鸿蒙 小鱼

本文主要是介绍鸿蒙应用开发学习：改进小鱼动画实现按键一直按下时控制小鱼移动和限制小鱼移出屏幕，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、前言

近期我在学习鸿蒙应用开发，跟着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的idtaskId: 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博客

这篇关于鸿蒙应用开发学习：改进小鱼动画实现按键一直按下时控制小鱼移动和限制小鱼移出屏幕的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/608284。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya（不是本人，claude AI）在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容： 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用
阅读更多...
Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
学习hash总结

学习hash总结

2014/1/29/   最近刚开始学hash，名字很陌生，但是hash的思想却很熟悉，以前早就做过此类的题，但是不知道这就是hash思想而已，说白了hash就是一个映射，往往灵活利用数组的下标来实现算法，hash的作用：1、判重；2、统计次数；
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2