HarmonyOS 鸿蒙Next如何对动画中移动的组件做点击事件？

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何对动画中移动的组件做点击事件？

对圆做一个线性动画（左右或上下移动），点击移动中的圆并做出反应。发现只有点击圆刚出现的位置时才有反应，其它移动路线上点击时没有反应。希望所有移动过程中只要点击到圆，都能做出反应。

Harmonyos Next教程
6 回复

了解到粒子动画 animatorTo等都是隐身动画，当前只能感知导致终态位置的点击事件。

按照上述需求，应该是类似于彩蛋雨、红包一类的效果。可以尝试使用帧动画来实现。帧动画在动画过程中即可实时响应。

// 创建动画的初始参数
let options: AnimatorOptions = {
  duration: 1500,
  easing: "friction",
  delay: 0,
  fill: "forwards",
  direction: "normal",
  iterations: 2,
  // 动画onFrame 插值首帧值                                    
  begin: 200.0,
  // 动画onFrame 插值尾帧值                                    
  end: 400.0
};
let result: AnimatorResult = this.getUIContext().createAnimator(options);
// 设置接收到帧时回调，动画播放过程中每帧会调用onFrame回调
result.onFrame = (value: number) => {
  console.log("current value is :" + value);
}

以上是初步分析结论，如有疑问可以展开回复，看到后会继续协助定位阻碍点。

如果比较紧急，也可以一块发起工单，两边同步处理，入口：在线提单

更多关于HarmonyOS 鸿蒙Next如何对动画中移动的组件做点击事件？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


感谢大神回复，知道属性动画和显式动画都不能达到我想要的效果，本人学浅，粒子动画看不大懂，求代码修改。

@Component export struct SportPao { @Prop y_num: number = 0 @Prop speed: number = 0 @Link randomNumber: number build() { Row() { //创建一个泡泡，里面携带一个数字文本 Pao({ txt: this.message }) .translate({ y: this.y_num }) //创建一个属性动画 .animation({ tempo:this.speed, iterations: -1, playMode: PlayMode.Reverse }) //在父容器中点击改变y_num值，使动画生效。 .onClick(() => { this.y_num = 200 //希望在父容器中点击泡泡时能随机改变txt的值，发现只能在 //泡泡起始位置点击有效，其它时候点击不反应。 this.randomNumber = Math.floor(Math.random() * 100) }) } } }

帧动画应该是满足场景的，可以先自行学习一下，我这边得等有空的时候再看下怎么修改。

好的，谢谢！

感谢大神回复，知道属性动画和显式动画都不能达到我想要的效果，本人学浅，粒子动画看不大懂，求代码修改。[@Component](/user/Component)

export struct SportPao {

[@Prop](/user/Prop) y_num: number = 0

[@Prop](/user/Prop) speed: number = 0

[@Link](/user/Link) randomNumber: number

 build() {

    Row() {

     //创建一个泡泡，里面携带一个数字文本

     Pao({ txt: this.message })

       .translate({ y: this.y_num })

       //创建一个属性动画

       .animation({

          tempo:this.speed,

          iterations: -1,

          playMode: PlayMode.Reverse

        })

       //在父容器中点击改变y_num值，使动画生效。

         .onClick(() => {

          this.y_num = 200

        //希望在父容器中点击泡泡时能随机改变txt的值，发现只能在

        //泡泡起始位置点击有效，其它时候点击不反应。

          this.randomNumber = Math.floor(Math.random() * 100)

       })

    }

  }

}

在HarmonyOS鸿蒙Next系统中，对动画中移动的组件做点击事件处理，可以通过以下方式实现：

  1. 组件绑定事件监听：首先，为动画中的组件绑定点击事件监听器。在组件的定义中，可以使用onTouchEventListener或onClickListener来绑定事件处理函数。

  2. 事件处理逻辑：在事件处理函数中，编写点击事件的逻辑。注意，由于组件在动画中移动，需要确保事件监听器能够实时捕捉到组件的位置，从而正确响应点击。

  3. 动画与事件处理同步：确保动画的播放与事件处理的逻辑同步。可以通过动画的帧回调或时间回调来更新事件处理逻辑，以匹配组件的当前位置。

  4. 触摸事件判断：在触摸事件发生时，判断触摸点是否在动画组件的当前位置范围内。如果是，则触发点击事件；否则，忽略该触摸事件。

  5. 组件层级管理：确保动画组件在UI层级中的位置正确，以便点击事件能够正确传递到该组件。

综上所述，通过绑定事件监听器、编写事件处理逻辑、同步动画与事件处理、判断触摸事件以及管理组件层级，可以在HarmonyOS鸿蒙Next系统中实现对动画中移动组件的点击事件处理。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部