做一个自己的免费网站吗,上海闵行网站建设公司,婚纱摄影类网站,龙岩网络推广公司一、前言
近期我在学习鸿蒙应用开发#xff0c;跟着B站UP主黑马程序员的视频教程做了一个小鱼动画应用#xff0c;UP主提供的小鱼动画源代码仅仅实现了移动组件的功能#xff0c;还存在一些问题#xff0c;如默认进入页面是竖屏而页面适合横屏显示#xff1b;真机测试发现…一、前言
近期我在学习鸿蒙应用开发跟着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小鱼的大小为40this.fishSize。this.fishX是小鱼图片中心点的坐标则当小鱼接触到屏幕左侧边界时小鱼的中心点X坐标值为20。本软件中设置的小鱼的移动速度为20this.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.displayEntry
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 200State 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博客
