请问仿写arkts摇杆功能,为什么我的代码,TouchType.Up 时候摇杆动画不能还原呢?请求大佬指点一下

仿照黑马的arkts 写个摇杆功能,但是为什么我的代码,TouchType.Up 时候摇杆动画不能还原,
请求大佬指点一下
在这里插入图片描述

import router from '@ohos.router'
import curves from '@ohos.curves'@Entry
@Component
struct ItemPage7 {// 小鱼坐标@State fishX: number = 200@State fishY: number = 180// 小鱼角度@State angle: number = 0// 小鱼图片@State src: Resource = $r('app.media.fish')// 是否开始游戏@State IsBegin: boolean = false// 遥感中心区域坐标private centerX: number = 120private centerY: number = 120// 大、小圆半径private maxRadius: number = 100private radius: number = 20// 摇杆小球初始位置@State positionX: number = 120@State positionY: number = 120// 角度正弦和余弦@State sin: number = 0@State cos: number = 0// 小鱼移动速度@State speed: number = 0// 任务id@State taskId: number = -1build() {Row() {Stack() {Button('返回').position({ x: 0, y: 0 }).backgroundColor('#20101010').onClick(() => {router.back()})if (!this.IsBegin) {Button('开始游戏').onClick(() => {console.log('this.IsBegin', this.IsBegin)animateTo({ duration: 500 }, () => {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(60).height(40).transition({type: TransitionType.Insert,opacity: 0,translate: { x: -250 }})Row() {Circle({ width: this.maxRadius * 2, height: this.maxRadius * 2 }).fill('#20101010').position({x: this.centerX - this.maxRadius, y: this.centerY - this.maxRadius})Circle({ width: this.radius * 2, height: this.radius * 2 }).fill('#403A3A3A').position({x: this.positionX - this.radius, y: this.positionY - this.radius})}.width(240).height(240).justifyContent(FlexAlign.Center).position({ x: 0, y: 120 }).onTouch(this.handleTouchEvent.bind(this))}}.width('100%').height('100%')}.width('100%').height('100%')}// 处理手指移动事件handleTouchEvent(event: TouchEvent) {// 触摸事件类型处理switch (event.type) {case TouchType.Up:// 还原小鱼速度this.speed = 0// 取消定时任务clearInterval(this.taskId)// 手指松开还原摇杆坐标位置animateTo({ curve: curves.springMotion() }, () => {console.log('TouchType.Up 1', this.positionX, this.positionY)this.positionX = this.centerXthis.positionY = this.centerYconsole.log('TouchType.Up 2', this.positionX, this.positionY)})break;case TouchType.Down:// 由于位置改变实在move中改变,只能改一次,需要设置一个定时任务,一直修改坐标this.taskId = setInterval(() => {// 修改小鱼坐标this.fishX += this.speed * this.costhis.fishY += this.speed * this.sin}, 40)break;case TouchType.Move:break;default:break;}//    1、获取手指初始化坐标let x = event.touches[0].xlet y = event.touches[0].y//    2、计算手指与中心点的坐标差值let vx = x - this.centerXlet vy = y - this.centerY//    3、计算手指与中心点连线和x轴正半轴轴的夹角let angle = Math.atan2(vy, vx)//    4、计算手指与中心点的距离let distance = this.getDistance(vx, vy)//    5、计算摇杆小球的坐标// 获取cos sinthis.cos = Math.cos(angle)this.sin = Math.sin(angle)// 动画animateTo({ curve: curves.responsiveSpringMotion() }, () => {// 摇杆位置this.positionX = this.centerX + distance * this.costhis.positionY = this.centerY + distance * this.sin// 设置移动速度this.speed = 5// 修改小鱼角度// 绝对值小于90度,就用向右的小鱼  否则用向左的小鱼if (Math.abs(angle * 2) < Math.PI) {this.src = $r('app.media.fish')} else {this.src = $r('app.media.fishl')// 更换图片之后,角度需要取相反angle = angle < 0 ? angle + Math.PI : angle - Math.PI}this.angle = angle * 180 / Math.PI //弧度变角度})}getDistance(x: number, y: number) {let d = Math.sqrt(x * x + y * y)return Math.min(d, this.maxRadius)}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2661509.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

java代码审计 - OutputStream.write() 期间持续发生 XSS 攻击

** java - OutputStream.write() 期间持续发生 XSS 攻击 ** 1 漏洞概述 我一直在研究有关持久 XSS 攻击的安全问题 将未经验证的数据发送到网络浏览器&#xff0c;这可能会导致浏览器执行恶意代码。 代码采用 Java 语言。 void output(OutputStream out){out.write(byteDa…

中小型企业为什么需要CRM系统?CRM系统功能解析

巴菲特曾说&#xff1a;“设计出的工具越多&#xff0c;使用工具的人就得越聪明。“”如果您是中小企业主&#xff0c;想要企业更好地发展&#xff0c;您都可以考虑使用CRM管理系统。它可以帮助中小企业有效地管理客户&#xff0c;提高业务效率&#xff0c;实现快、稳、准的发展…

Miniconda 3 | 出发,探索Python

介绍 Miniconda 是 Anaconda 的精简版本&#xff0c;是一个轻量级的 Python 包管理工具和环境管理工具。 优势和功能主要包括&#xff1a; 轻量级和快速安装&#xff1a; Miniconda 相比 Anaconda 更小巧&#xff0c;只包含最基本的工具和包管理功能。安装速度更快&#xff0c…

基于图神经网络的动态物化视图管理

本期 Paper Reading 主要介绍了发布于 2023 年 ICDE 的论文《Dynamic Materialized View Management using Graph Neural Network》&#xff0c;该文研究了动态物化视图管理问题&#xff0c;提出了一个基于 GNN 的模型。在真实的数据集上的实验结果表明&#xff0c;取得了更高的…

进行VMware日志管理

随着公司转向虚拟化其 IT 空间&#xff0c;虚拟环境日志监控正在占据日志管理的很大一部分,除了确保网络安全外&#xff0c;虚拟机日志监控还有助于管理虚拟化工具&#xff0c;这是最复杂的任务之一。 对虚拟环境日志的监控分析 当今公司中最受欢迎的虚拟平台之一是 VMware。…

爬虫学习(1)--requests模块的使用

前言 什么是爬虫 爬虫是一种自动化工具&#xff0c;用于从互联网或其他计算机网络上获取数据。它可以模拟人的行为&#xff0c;自动访问网页&#xff0c;提取感兴趣的数据&#xff0c;并将其存储到本地计算机或数据库中。爬虫通常用于搜索引擎、数据分析、信息聚合等领域&…

gin框架使用系列之三——获取表单数据

系列目录 《gin框架使用系列之一——快速启动和url分组》《gin框架使用系列之二——uri占位符和占位符变量的获取》 一、获取get参数 get请求的参数是直接加在url后面的&#xff0c;在gin中获取get请求的参数主要用Query()和DefaultQuery()两个方法&#xff0c;示例代码如下…

「Verilog学习笔记」超前进位加法器

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 超前进位加法器的实质是&#xff1a;对于输出的每一位Si 其实都可以用Si Ai ^ Bi ^ Cin来表示 我们需要做的只是判断加法结果的最高位该取几 例如本题中 输入的两个数A和B…

7.6分割回文串(LC131-M)

算法&#xff1a; 有很多分割结果&#xff0c;按照for循环去做肯定做不来 这个时候就要想到回溯&#xff01;那就要画树&#xff01; 画树 分割的画树过程其实和组合很像。 例如对于字符串aab&#xff1a; 组合问题&#xff1a;选取一个a之后&#xff0c;在ab中再去选取第…

IDEA 2022.2 安装教程

1.下载2020.3版本IDEA 链接&#xff1a;https://pan.baidu.com/s/1IFK8VRjT7vM2VM75ToveGQ?pwd176m 提取码&#xff1a;176m 2.安装 下载完成后&#xff0c;双击exe安装包&#xff0c;出现IDEA安装欢迎首页&#xff1a; 3.将 ja - netfiltet 文件复制到idea安装目录附件 …

docker学习笔记04-可视化界面Portainer

1.Portainer简介 Portainer 是一款开源的容器管理工具&#xff0c;旨在帮助用户更轻松地管理 Docker 环境。无论您是 Docker 新手还是经验丰富的开发人员&#xff0c;Portainer 都提供了直观的用户界面&#xff0c;使您能够方便地创建、部署和监控容器。 安装 Portainer 非常…

Docker本地部署开源浏览器Firefox并远程访问进行测试

文章目录 1. 部署Firefox2. 本地访问Firefox3. Linux安装Cpolar4. 配置Firefox公网地址5. 远程访问Firefox6. 固定Firefox公网地址7. 固定地址访问Firefox Firefox是一款免费开源的网页浏览器&#xff0c;由Mozilla基金会开发和维护。它是第一个成功挑战微软Internet Explorer浏…

Windows不同的域名由不同的DNS服务器解析

gpedit.msc(组策略)-计算机配置-Windows设置-域名解析策略 本次改动在注册表中体现的位置。 计算机\HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Dnscache\Parameters\DnsPolicyConfig\{666881c9-5525-434b-a62a-2ed5c61d53e5} 计算机\HKEY_LOCAL_MACHINE\SYSTEM\Cur…

FileZilla的使用主动模式与被动模式

&#x1f3ac; 艳艳耶✌️&#xff1a;个人主页 &#x1f525; 个人专栏 &#xff1a;《产品经理如何画泳道图&流程图》 ⛺️ 越努力 &#xff0c;越幸运 目录 一、FileZilla简介 1、FileZilla是什么&#xff1f; 2、FileZilla的应用场景 二、FileZilla的安装 1、下…

YoloV8改进策略:基于自研的图注意力机制改进| 独家改进方法|图卷积和注意力融合模块

摘要 SE注意力机制是一种通过显式建模卷积特征的信道之间相互依赖性的方法,旨在提高网络产生的表示的质量。SE注意力机制包括两个步骤:Squeeze和Excitation。在Squeeze步骤中,通过全局平均池化操作将输入特征图压缩成一个向量,然后通过一个全连接层将其映射到一个较小的向…

设计模式(4)--对象行为(8)--状态

1. 意图 允许一个对象在其内部状态改变时改变它的行为。 2. 三种角色 上下文环境(Context)、抽象状态(State)、具体状态(Concrete State) 3. 优点 3.1 将与特定状态相关的行为局部化&#xff0c;并且将不同状态的行为分割开来。 3.2 使得状态转换显式化。 3.3 State对象可被共…

060:vue中markdown编辑器mavon-editor的应用示例

第060个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

别再盲目运营私域电商小程序了!这五大实操策略让你轻松实现盈利!

私域电商的崛起&#xff0c;已经成为了电商行业的新潮流。在这个趋势中&#xff0c;私域电商小程序以其独特的优势&#xff0c;成为了实现从运营到盈利的关键环节。那么&#xff0c;如何利用私域电商小程序快速达到盈利目标呢&#xff1f;接下来&#xff0c;我们将为您揭秘私域…

天津医科大学临床医学院专升本药学专业有机化学考试大纲

天津医科大学临床医学院高职升本科专业课考试大纲药学专业《有机化学》科目考试大纲 一、考试基本要求 本考试大纲主要要求考生对《有机化学》基本概念有较深入的了解&#xff0c;能够系统地掌握各类化合物的命名、结构特点及立体异构、主要性质、反应、来源和合成制备方法等…

3D游戏角色建模纹理贴图处理

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 在本文中&#xff0c;我们将介绍 3D 纹理的基础知识&#xff0c;并讨…