请问仿写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 = 120
  private centerY: number = 120

  // 大、小圆半径
  private maxRadius: number = 100
  private 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 = -1

  build() {
    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.centerX
          this.positionY = this.centerY
          console.log('TouchType.Up 2', this.positionX, this.positionY)

        })
        break;
      case TouchType.Down:
      // 由于位置改变实在move中改变,只能改一次,需要设置一个定时任务,一直修改坐标
        this.taskId = setInterval(() => {
          // 修改小鱼坐标
          this.fishX += this.speed * this.cos
          this.fishY += this.speed * this.sin
        }, 40)
        break;
      case TouchType.Move:

        break;
      default:
        break;
    }

    //    1、获取手指初始化坐标
    let x = event.touches[0].x
    let y = event.touches[0].y
    //    2、计算手指与中心点的坐标差值
    let vx = x - this.centerX
    let vy = y - this.centerY
    //    3、计算手指与中心点连线和x轴正半轴轴的夹角
    let angle = Math.atan2(vy, vx)
    //    4、计算手指与中心点的距离
    let distance = this.getDistance(vx, vy)
    //    5、计算摇杆小球的坐标

    // 获取cos sin
    this.cos = Math.cos(angle)
    this.sin = Math.sin(angle)
    // 动画
    animateTo(
      { curve: curves.responsiveSpringMotion() }
      , () => {
      // 摇杆位置
      this.positionX = this.centerX + distance * this.cos
      this.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)
  }
}


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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue data变量不能以“_”开头,否则会产生很多怪异问题

1、 比如给子组件赋值&#xff0c;子组件无法得到这个值&#xff08;也不是一直无法得到&#xff0c;设置后this.$forceUpdate() 居然可以得到&#xff09;&#xff0c; 更无法watch到 <zizujian :config"_config1"> </zizujian>this._config1 { ...…

XCTF-MISC1 文件内容遮挡

pdf 题目描述 题目分析 附件下载下来&#xff0c;是一张图片的pdf文件 调整图片透明度发现flag flag{security_through_obscurity}

Qt编写的exe程序上添加程序信息

1、qtcreator编写 在pro文件中添加如下信息 # 版本信息 VERSION 4.0.2.666# 图标 RC_ICONS Images/MyApp.ico# 公司名称 QMAKE_TARGET_COMPANY "Digia"# 产品名称 QMAKE_TARGET_PRODUCT "Qt Creator"# 文件说明 QMAKE_TARGET_DESCRIPTION "Qt …

基于Java网上点餐系统设计与实现

博主介绍&#xff1a; ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅 &#x1f447;&#x1f3fb; 不然下次找不到 Java项目精品实…

工业4G 物联网网关——机房动环监控系统应用方案介绍

机房动环监控系统是什么&#xff1f;机房动环监控系统的全称为机房动力环境监控系统&#xff0c;是一套安装在机房内的监控系统&#xff0c;可以对分散在机房各处的独立动力设备、环境和安防进行实时监测&#xff0c;统计和分析处理相关数据&#xff0c;第一时间侦测到故障发生…

实时获取小红书笔记详情的API使用与解析

一、背景介绍 小红书是一个以分享消费经验、生活方式为主的社交平台&#xff0c;拥有大量的用户和内容。为了更好地了解用户在小红书上的行为和内容&#xff0c;许多开发者选择使用小红书开放平台提供的API接口。本文将介绍如何通过小红书笔记详情API实现实时数据获取&#xf…

Openslide安装

文章目录 安装open-slide python下载openslide二进制文件解压到Anaconda的library目录下配置环境变量在py文件中添加以下语句即可 官网链接 安装open-slide python 表面上这样就可以导入了但事实上会遇到 Couldn’t locate OpendSlide DLL的问题&#xff0c;openslide必须独立安…

svg学习

概念 svg 可缩放矢量图形 svg 使用xml格式定义图像 svg 形状 矩形 <rect> <?xml version"1.0" standalone"no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&q…

conda环境下Could not build wheels for dlib解决方法

1 问题描述 在安装模型运行的conda环境时&#xff0c;出现如下问题&#xff1a; Building wheels for collected packages: basicsr, face-alignment, dlib, ffmpy, filterpy, futureBuilding wheel for basicsr (setup.py) ... doneCreated wheel for basicsr: filenamebasi…

mysql树查询和时间段查询

本文目录 文章目录 案例1&#xff1a;MySQL树形结构查询案例2&#xff1a;MySQL查询一段时间内的所有日期 摘要 案例1&#xff1a;MySQL树形结构查询 在页面开发过程中&#xff0c;如图一所示的树形控件很常见&#xff0c;而大多数情况下&#xff0c;树形控件中需要显示的数据…

【温故而知新】vue运用之探讨下单页面应用(SPA)与多页面应用(MPA)

一、概念 1.单页面应用SPA(Single page application) Vue单页面应用是一种采用Vue.js框架开发的Web应用程序,它仅有一个HTML文件,通过前端路由实现页面的切换和渲染。与传统的多页面应用相比,Vue单页面应用在用户体验和开发效率方面有着明显的优势。 在Vue单页面应用中…

【微服务核心】MyBatis Plus

MyBatis Plus 文章目录 MyBatis Plus1. 简介2. 入门使用3. 核心功能3.1 CRUD 接口3.1.1 Mapper CRUD 接口3.1.2 Service CRUD 接口 3.2 条件构造器3.3 分页插件3.4 Mybatis-Plus 注解 4. 拓展4.1 逻辑删除4.2 MybatisX快速开发插件 5. 插件5.1 [分页插件](#page)5.2 乐观锁插件…

从0到1快速入门ETLCloud

一、ETLCloud的介绍 ETL是将业务系统的数据经过抽取&#xff08;Extract&#xff09;、清洗转换&#xff08;Transform&#xff09;之后加载&#xff08;Load&#xff09;到数据仓库的过程&#xff0c;目的是将企业中的分散、凌乱、标准不统一的数据整合到一起&#xff0c;为企…

[AI编程]AI辅助编程助手-亚马逊AI 编程助手 Amazon CodeWhisperer

亚马逊AI 编程助手 Amazon CodeWhisperer 是一种基于人工智能技术的编程辅助工具&#xff0c;旨在帮助开发人员更高效地编写代码。它可以提供实时的代码建议、自动补全和错误检查&#xff0c;帮助优化代码质量和提高编程效率。 Amazon CodeWhisperer 使用了自然语言处理和机器…

Redis管道

问题引出 Redis是一种基于客户端-服务端模型以及请求/响应协议的TCP服务。一个请求会遵循以下步骤&#xff1a; 1 客户端向服务端发送命令分四步(发送命令→命令排队→命令执行→返回结果)&#xff0c;并监听Socket返回&#xff0c;通常以阻塞模式等待服务端响应。 2 服务端…

Ubuntu20.04 上启用 VCAN 用作本地调试

目录 一、启用本机的 VCAN​ 编辑 1.1 加载本机的 vcan 1.2 添加本机的 vcan0 1.3 查看添加的 vcan0 1.4 开启本机的 vcan0 1.5 关闭本机的 vcan0 1.6 删除本机的 vcan0 二、测试本机的 VCAN 2.1 CAN 发送数据 代码 2.2 CAN 接收数据 代码 2.3 CMakeLists.…

PgSQL技术内幕 - ereport ERROR跳转机制

PgSQL技术内幕 - ereport ERROR跳转机制 使用客户端执行SQL的时候经常遇到报ERROR错误&#xff0c;然后SQL语句就退出了。当然&#xff0c;事务也会回滚掉。本文我们看下它是如何做到退出SQL语句并回滚事务的。 1、以insert一个numeric类型值为例 表一个字段为numeric(10,2)类型…

电脑报错“kernelbase.dll”文件缺失,软件游戏无法启动的解决方法

很多小伙伴留言说&#xff0c;每次自己要游戏或软件的时候&#xff0c;电脑就会弹出报错框&#xff0c;不知道应该怎么办&#xff1f; 其实&#xff0c;Windows报错提示已经说明了&#xff0c;程序找不到名为“kernelbase.dll”的文件&#xff0c;需要重新安装修复这个问题。 …

ssm基于JavaEE的智能实时疫情监管服务平台的设计与实现+jsp论文

摘 要 社会发展日新月异&#xff0c;用计算机应用实现数据管理功能已经算是很完善的了&#xff0c;但是随着移动互联网的到来&#xff0c;处理信息不再受制于地理位置的限制&#xff0c;处理信息及时高效&#xff0c;备受人们的喜爱。本次开发一套智能实时疫情监管服务平台有管…

C#中的Attribute详解(上)

C#中的Attribute详解&#xff08;上&#xff09; 一、Attribute是什么二、Attribute的作用三、Attribute与注释的区别四、系统Attribute范例1、如果不使用Attribute&#xff0c;为了区分这四类静态方法&#xff0c;我们只能通过注释来说明&#xff0c;但这样做会给系统带来很多…