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

news2024/10/6 0:28:59

仿照黑马的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)
  }
}


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

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

相关文章

Springboot实现登录注册

功能&#xff1a;1、实现用户的登录 2、实现用户的注册以及重名的判断 LoginControl&#xff1a; package com.example.demo.controls;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; imp…

2024 年政府和技术预测

新的一年即将来临&#xff0c;这意味着专家、技术专家和专栏作家应该尝试预测 2024 年政府和技术即将出现的一些最大趋势。今年可能使这些预测变得更加困难的是事实上&#xff0c;许多技术正在以惊人的速度向前发展。在某些情况下&#xff0c;过去需要多年才能慢慢发生的变化现…

乘势而上开新年!2024深圳深圳户外家具及休闲用品展览会三月开幕

中国户外家具市场在九十年代末开始崭露头角&#xff0c;随着国家经济的腾飞&#xff0c;尤其是房地产行业的迅猛发展&#xff0c;加上现代商业模式的建立和完善&#xff0c;产品和需求都以惊人的速度在发展。无论是国际知名品牌&#xff0c;还是国内的专业户外家具生产企业&…

java设计模式学习之【模板方法模式】

文章目录 引言模板方法模式简介定义与用途实现方式 使用场景优势与劣势在Spring框架中的应用游戏设计示例代码地址 引言 设想你正在准备一顿晚餐&#xff0c;无论你想做意大利面、披萨还是沙拉&#xff0c;制作过程中都有一些共同的步骤&#xff1a;准备原料、加工食物、摆盘。…

你知道继电保护测试仪的价格是多少吗?

继电保护测试仪是电气设备检测中经常使用的检测仪器。它能准确、快速地检测到每个继电保护装置的一些潜在故障和问题&#xff0c;帮助电力检测工人锁定问题点&#xff0c;使继电保护装置能够正常工作&#xff0c;保护电力需求。继电保护测试仪贵吗&#xff1f;哪些因素影响价格…

Hive讲课笔记:内部表与外部表

文章目录 一、导言二、内部表1.1 什么是内部表1.1.1 内部表的定义1.1.2 内部表的关键特性 1.2 创建与操作内部表1.2.1 创建并查看数据库1.2.2 在park数据库里创建student表1.2.3 在student表插入一条记录1.2.4 通过HDFS WebUI查看数据库与表 三、外部表2.1 什么是外部表2.2 创建…

优思学院|做了3年QC感到前路茫茫,我应该如何规划职业路径?

网友提问&#xff1a; 做了3年QC感到前路茫茫我应该如何规划职业路径&#xff1f; 在当今这个快速发展和竞争激烈的时代&#xff0c;许多质量控制&#xff08;QC&#xff09;领域的专业人士&#xff0c;如你所述&#xff0c;可能会感到职业发展上的迷茫。 作为一名拥有三年QC经…

JavaWeb——JQuery

文章目录 JQuery 是什么?jQuery 的原理示意图JQuery 基本开发步骤jQuery 对象和 DOM 对象将dom对象转为JQuery对象jQuery 对象转成 DOM 对象jQuery 选择器基本选择器基础过滤选择器JQuery 是什么? 基本介绍 jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理…

elasticsearch系列七:聚合查询

概述 今天咱们来看下es中的聚合查询&#xff0c;在es中聚合查询分为三大类bucket、metrics、pipeline&#xff0c;每一大类下又有十几种小类&#xff0c;咱们各举例集中&#xff0c;有兴许的同学可以参考官网&#xff1a;https://www.elastic.co/guide/en/elasticsearch/refere…

ClickHouse基础知识(五):ClickHouse的SQL 操作

基本上来说传统关系型数据库&#xff08;以 MySQL 为例&#xff09;的 SQL 语句&#xff0c;ClickHouse 基本都支持&#xff0c; 这里不会从头讲解 SQL 语法只介绍 ClickHouse 与标准 SQL&#xff08;MySQL&#xff09;不一致的地方。 1. Insert 基本与标准 SQL&#xff08;My…

【Vue2+3入门到实战】(13)插槽<slot>详细示例及自定义组件的创建与使用代码示例 详解

目录 一、学习目标1.插槽2.综合案例&#xff1a;商品列表 一、插槽-默认插槽1.作用2.需求3.问题4.插槽的基本语法5.代码示例6.总结 二、插槽-后备内容&#xff08;默认值&#xff09;1.问题2.插槽的后备内容3.语法4.效果5.代码示例 三、插槽-具名插槽1.需求2.具名插槽语法3.v-s…

BDD - Python Behave 配置文件 behave.ini

BDD - Python Behave 配置文件 behave.ini 引言behave.ini配置参数的类型配置项 behave.ini 应用feature 文件step 文件创建 behave.ini执行 Behave查看配置默认值 behave -v 引言 前面文章 《BDD - Python Behave Runner Script》就是为了每次执行 Behave 时不用手动敲一长串…

node 项目中 __dirname / __filename 是什么,为什么有时候不能用?

__dirname 是 Node.js 中的一个特殊变量&#xff0c;表示当前执行脚本所在的目录的绝对路径。 __filename 同理&#xff0c;是 Node.js 中的一个特殊变量&#xff0c;表示当前执行脚本的绝对路径&#xff0c;包括文件名。 在 Node.js 中&#xff0c;__dirname / __filename是…

C语言 linux文件操作(二)

文章目录 一、获取文件长度二、追加写入三、覆盖写入四、文件创建函数creat 一、获取文件长度 通过lseek函数&#xff0c;除了操作定位文件指针&#xff0c;还可以获取到文件大小&#xff0c;注意这里是文件大小&#xff0c;单位是字节。例如在file1文件中事先写入"你好世…

Vue - v-for 指令详解

1. 渲染列表 首先&#xff0c;让我们看看如何使用 v-for 渲染一个简单的列表。在 Vue.js 中&#xff0c;我们可以使用 v-for 来遍历数组&#xff0c;并根据数组中的每个元素渲染相应的内容。 <template><div><!-- 使用 v-for 渲染列表 --><ul><li…

计算机与人工智能:共创智能时代的新篇章

计算机与人工智能&#xff1a;共创智能时代的新篇章 在这个科技日新月异的时代&#xff0c;计算机与人工智能&#xff08;AI&#xff09;的结合正以前所未有的速度改变着世界。它们在各自的领域内飞速发展&#xff0c;而当这两者相遇时&#xff0c;它们产生了巨大的能量&#x…

ClickHouse基础知识(六):ClickHouse的副本配置

副本的目的主要是保障数据的高可用性&#xff0c;即使一台 ClickHouse 节点宕机&#xff0c;那么也可以 从其他服务器获得相同的数据。 1. 副本写入流程 2. 配置步骤 ➢ 启动 zookeeper 集群 ➢ 在hadoop101的/etc/clickhouse-server/config.d目录下创建一个名为metrika.xml…

can通信的验收码和屏蔽码怎么计算

方法一&#xff1a;直接用canTest软件并按下图计算&#xff08;借助工具&#xff0c;比较方便&#xff09; 方法二&#xff1a;明白规则

探索Apache Commons Imaging处理图像

第1章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff0c;咱们今天来聊聊图像处理。在这个数字化日益增长的时代&#xff0c;图像处理已经成为了一个不可或缺的技能。不论是社交媒体上的照片编辑&#xff0c;还是专业领域的图像分析&#xff0c;图像处理无处不在。而作为…

RAD Studio 12 安装激活说明及常见问题

目录 RAD Studio 安装说明 RAD Studio 最新的修补程序更新 RAD Studio 产品相关信息 Embarcadero 产品在线注册步骤 单机版授权产品注册注意事项 Embarcadero 产品离线注册步骤 Embarcadero 产品安装次数查询 Embarcadero 序号注册次数限制 EDN账号 - 查询授权序号、下…