HarmonyOS 鸿蒙Next中触摸跟随粒子特效

HarmonyOS 鸿蒙Next中触摸跟随粒子特效 如何实现手指触摸时粒子跟随手指移动的效果？（问题来源项目案例整理:https://github.com/heqiyuan35-creator/BaitKnows.git）

3 回复

结合 onTouch 事件和 Particle 组件的 emitter.position 属性：

@State touchX: number = 0;
@State touchY: number = 0;
@State isEmitting: boolean = false;

Stack() {
  // 粒子层
  if (this.isEmitting) {
    Particle({
      particles: [{
        emitter: {
          particle: { type: ParticleType.IMAGE, config: { src: $r('app.media.spark') } },
          position: [this.touchX, this.touchY],  // 跟随触摸位置
          emitRate: 20
        }
      }]
    })
    .hitTestBehavior(HitTestMode.None)  // 不拦截触摸事件
  }
}
.onTouch((event: TouchEvent) => {
  if (event.type === TouchType.Down || event.type === TouchType.Move) {
    this.touchX = event.touches[0].x;
    this.touchY = event.touches[0].y;
    this.isEmitting = true;
  } else if (event.type === TouchType.Up) {
    this.isEmitting = false;
  }
})

更多关于HarmonyOS 鸿蒙Next中触摸跟随粒子特效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，触摸跟随粒子特效主要通过ArkUI的Canvas组件结合粒子系统实现。开发者使用ParticleSystem类创建粒子，通过TouchEvent监听触摸位置，实时更新粒子坐标。粒子属性如大小、颜色、生命周期在ParticleOptions中配置。利用requestAnimationFrame进行动画循环，实现粒子随触摸移动的视觉效果。

在HarmonyOS Next中实现触摸跟随粒子特效，核心在于监听触摸事件并动态更新粒子系统的位置。以下是关键步骤和代码思路：

1. 粒子系统定义

使用Particle组件或自定义绘制组件（如Canvas）创建粒子。每个粒子应有位置、速度、颜色等属性。

class Particle {
  x: number;
  y: number;
  vx: number;
  vy: number;
  color: string;
}

2. 触摸事件监听

在UI组件（如Column）上通过onTouch事件获取触摸点坐标：

Column()
  .onTouch((event: TouchEvent) => {
    if (event.type === TouchType.Move) {
      // event.touches[0].x 和 event.touches[0].y 为当前触摸点坐标
      this.updateParticles(event.touches[0]);
    }
  })

3. 粒子位置更新

将粒子目标位置设为触摸点，并通过插值实现平滑跟随：

updateParticles(touch: TouchObject) {
  this.particles.forEach(particle => {
    // 计算粒子指向触摸点的方向向量
    let dx = touch.x - particle.x;
    let dy = touch.y - particle.y;
    // 添加缓动效果
    particle.vx += dx * 0.05;
    particle.vy += dy * 0.05;
    // 更新位置
    particle.x += particle.vx;
    particle.y += particle.vy;
  });
}

4. 粒子渲染

使用Canvas的RenderingContext2D进行逐帧绘制：

Canvas(this.context)
  .onReady(() => {
    // 绘制循环
    setInterval(() => {
      this.context.clearRect(0, 0, width, height);
      this.particles.forEach(particle => {
        this.context.fillStyle = particle.color;
        this.context.fillRect(particle.x, particle.y, 4, 4);
      });
      this.context.draw();
    }, 16);
  })

5. 性能优化

  • 限制粒子数量（如50-100个）
  • 使用@State管理粒子数据触发UI更新
  • 离开屏幕的粒子重置到触摸点

注意事项

  • HarmonyOS Next的Canvas API与Web标准基本一致
  • 触摸事件需在Column、Row等容器组件上监听
  • 粒子更新逻辑应放在异步任务中避免阻塞UI线程

通过以上步骤，即可实现粒子跟随手指移动的交互效果。可根据项目需求调整粒子样式（如圆形、图像）、运动算法（如引力模拟）和触发条件。

回到顶部