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

一、前言

近期我在学习鸿蒙应用开发，跟着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.mzph.cn/news/629905.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【SpringBoot篇】添加富文本编辑器操作

【SpringBoot篇】添加富文本编辑器操作

文章目录 &#x1f354;使用步骤⭐首先我们需要安装富文本编辑器⭐在<script>中引入富文本编辑器⭐富文本图片上传接口⭐初始化富文本编辑器⭐调用 初始化富文本编辑器的方法&#x1f388;新增&#x1f388;编辑&#x1f388;保存 ⭐添加按钮⭐实现viewEditor函数&#x…
阅读更多...
视觉检测系统：工厂生产零部件的智能检测

视觉检测系统：工厂生产零部件的智能检测

在工厂的生产加工过程中&#xff0c;工业视觉检测系统被广泛应用&#xff0c;并且起着重要的作用。它能够对不同的零部件进行多功能的视觉检测&#xff0c;包括尺寸和外观的缺陷。随着制造业市场竞争越来越激烈&#xff0c;对产品质检效率的要求不断提高&#xff0c;传统的人工…
阅读更多...
docker试用metabase

docker试用metabase

安装 docker run -d -p 3000:3000 --name metabase metabase/metabase 初始化 填写相关信息&#xff0c;不要选中文&#xff0c;翻译太生硬了&#xff0c;很多配置项例如聚合这样的词语看不懂&#xff0c;还不如换回英文。 数据查看 在数据源中选择 show editor 可以进行数据…
阅读更多...
【不用找素材】ECS 游戏Demo制作教程（2） 1.16

【不用找素材】ECS 游戏Demo制作教程（2） 1.16

一、知识点补充 1.工程内部 上一篇最后一步运行时&#xff0c;突然发现 变成52:1了&#xff0c;难道每次baking都是随机的&#xff1f; 破案了&#xff0c;52是index索引&#xff0c;1是version版本号 如果您在场景视图中看不到实体&#xff0c;但仍然可以在游戏视图中看到…
阅读更多...
FPGA高端项目：12G-SDI 视频编解码，提供工程源码和技术支持

FPGA高端项目：12G-SDI 视频编解码，提供工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的 GT 高速接口解决方案我目前已有的SDI编解码方案 3、详细设计方案设计框图UltraScale GTH 的SDI模式应用UltraScale GTH 基本结构参考时钟的选择和分配UltraScale GTH 发送和接收处理流程UltraScale GTH 发送接口UltraScale G…
阅读更多...
数据结构与算法：归并排序

数据结构与算法：归并排序

数据结构与算法&#xff1a;归并排序 归并思想递归法非递归 归并思想 在讲解归并排序前&#xff0c;我们先看到一个问题&#xff1a; 对于这样两个有序的数组&#xff0c;如何将它们合并为一个有序的数组&#xff1f; 在此我们处理这个问题的思路就是&#xff1a;开辟一个新的…
阅读更多...
ATA-1222A宽带放大器在二极管测试中的应用有哪些

ATA-1222A宽带放大器在二极管测试中的应用有哪些

宽带放大器是一种用于放大高频信号的电子设备&#xff0c;它在二极管测试中有多种应用。下面安泰电子将介绍宽带放大器在二极管测试中的几种常见应用。 宽带放大器可以用于二极管参数测试。二极管是一种常见的半导体器件&#xff0c;有正向电压-电流特性和反向电压-电流特性。为…
阅读更多...
【2.5操作系统】数据传输控制方式

【2.5操作系统】数据传输控制方式

目录 1.输入输出技术2.IO设备管理软件 1.输入输出技术 cpu控制&#xff08;主存/外设&#xff09;进行数据交互的过程。 中断处理操作过程&#xff1a; 例题一: 解析&#xff1a; 第一问&#xff1a;选D。中断需要cpu发送中断指令。 例题二&#xff1a; 解析&#xff1a; 第…
阅读更多...
css-实现溢出内容转换为...格式

css-实现溢出内容转换为...格式

代码&#xff1a;overflow: hidden; text-overflow: ellipsis; overflow: hidden;//当容器中的内容超出容器的尺寸时&#xff0c;将隐藏超出部分而不显示滚动条。 display: -webkit-box;//使用WebKit引擎的浏览器&#xff08;如Chrome和Safari&#xff09;中&#xff0c;将容器…
阅读更多...
AI数字人短视频变现项目：打造短视频运营变现新模式

AI数字人短视频变现项目：打造短视频运营变现新模式

随着社交媒体和短视频平台的兴起&#xff0c;越来越多的人开始关注如何将短视频变现。在这个时代&#xff0c;创新和科技成为了推动变现模式发展的关键。AI数字人作为一种全新的创新形式&#xff0c;正在迅速进入人们的视野。本文将介绍AI数字人短视频变现项目&#xff0c;以及…
阅读更多...
Mysql 安装通过mysql installer安装+配置环境+连接可视化工具

Mysql 安装通过mysql installer安装+配置环境+连接可视化工具

注意&#xff1a;不适合纯小白&#xff0c;小白建议移步别的大佬MySQL详细安装教程 目录 注意&#xff1a;不适合纯小白&#xff0c;小白建议移步别的大佬MySQL详细安装教程 前言 准备工作 一、Mysql下载 二、MySQL installer 安装以及系统环境配置 三、检验MySQL 四、可…
阅读更多...
抖店商家怎么维护好与达人关系？2024新版维护达人思路方法

抖店商家怎么维护好与达人关系？2024新版维护达人思路方法

我是王路飞。 当你找到达人给你带货&#xff0c;且积累了一些达人资源之后&#xff0c;就需要维护好与达人的关系了。 毕竟找达人带货玩法的好处&#xff0c;就是长期稳定&#xff0c;他能给你带来持续的收益。 那么抖店商家应该如何维护好与达人的关系呢&#xff1f; 这篇…
阅读更多...
【Python笔记】pip intall -e命令：让你的工程直接使用开源包的源码，可断点调试，修改源码！

【Python笔记】pip intall -e命令：让你的工程直接使用开源包的源码，可断点调试，修改源码！

最近学习MetaGPT&#xff0c;用到了 pip install -e . 安装命令&#xff0c;这个安装命令是从源代码安装包。 从源代码安装包有几个好处&#xff1a; 包内的代码是可见的&#xff0c;是白盒&#xff0c;不是黑盒&#xff0c;可以直接在项目中看源码断点调试可以直接断到源码里…
阅读更多...
HCIA——10实验：跨路由转发。静态路由、负载均衡、缺省路由、手工汇总、环回接口。空接口与路由黑洞、浮动静态。

HCIA——10实验：跨路由转发。静态路由、负载均衡、缺省路由、手工汇总、环回接口。空接口与路由黑洞、浮动静态。

学习目标&#xff1a; 跨路由转发、负载均衡、环回接口、手工汇总、缺省路由、空接口与路由黑洞、浮动静态 学习内容&#xff1a; 跨路由转发静态路由、负载均衡、缺省路由、手工汇总。环回接口空接口与路由黑洞、浮动静态 目录 学习目标&#xff1a; 学习内容&#xff1a…
阅读更多...
无/自监督去噪(1)——一个变迁：N2N→N2V→HQ-SSL

无/自监督去噪(1)——一个变迁：N2N→N2V→HQ-SSL

目录 1. 前沿2. N2N3. N2V——盲点网络&#xff08;BSNs&#xff0c;Blind Spot Networks&#xff09;开创者3.1. N2V实际是如何训练的&#xff1f; 4. HQ-SSL——认为N2V效率不够高4.1. HQ-SSL的理论架构4.1.1. 对卷积的改进4.1.2. 对下采样的改进4.1.3. 比N2V好在哪&#xff…
阅读更多...
电影《潜行》中说的蜜罐是什么（网络安全知识）

电影《潜行》中说的蜜罐是什么（网络安全知识）

近期刘德华、彭于晏主演的电影《潜行》在网上掀起了轩然大波&#xff0c;电影中有提到网络蜜罐&#xff0c;这引起了很多观众的疑问&#xff0c;蜜罐到底是什么&#xff1f; 从字面意思上来看&#xff0c;蜜罐就是为黑客设下的诱饵。这是一种具有牺牲性质的计算机系统&#xff…
阅读更多...
即将推出的 OpenWrt One/AP-24.XY：OpenWrt 和 Banana Pi 合作路由器板

即将推出的 OpenWrt One/AP-24.XY：OpenWrt 和 Banana Pi 合作路由器板

OpenWrt开发人员正在与Banana Pi合作开发OpenWrt One/AP-24.XY路由器板。OpenWrt 是一个轻量级嵌入式 Linux 操作系统&#xff0c;支持近 1,800 个路由器和其他设备。然而&#xff0c;这将是第一块由 OpenWrt 直接开发的路由器板。 该主板将基于 MediaTek MT7981B (Filogic 82…
阅读更多...
Linux下的shell命令执行set -ex 错误

Linux下的shell命令执行set -ex 错误

shell脚本&#xff1a; #!/bin/bashset -exexport GOPATH/go ...(略)执行命令报错&#xff1a; $ ./build.sh : invalid option 2: set: - set: usage: set [-abefhkmnptuvxBCHP] [-o option-name] [--] [arg ...] ./build.sh: line 3: $\r: command not found ./build.sh: l…
阅读更多...
.NET国产化改造探索（三）、银河麒麟安装.NET 8环境

.NET国产化改造探索（三）、银河麒麟安装.NET 8环境

随着时代的发展以及近年来信创工作和…废话就不多说了&#xff0c;这个系列就是为.NET遇到国产化需求的一个闭坑系列。接下来&#xff0c;看操作。 上一篇介绍了如何在银河麒麟操作系统上安装人大金仓数据库&#xff0c;这篇文章详细介绍下在银河麒麟操作系统上安装.NET8环境。…
阅读更多...
JS-var 、let 、 const使用介绍

JS-var 、let 、 const使用介绍

变量声明介绍 在我们日常开发用&#xff0c;变量声明有三个 var、 let 和 const&#xff0c;我们应该用那个呢&#xff1f; 首先var 先排除&#xff0c;老派写法&#xff0c;问题很多&#xff0c;可以淘汰掉…let or const ?建议&#xff1a; const 优先&#xff0c;尽量使…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023