鼠标事件与物理引擎：搅拌咖啡的交互设计

鼠标事件与物理引擎的结合，为前端交互设计带来了更多可能性。搅拌咖啡的交互效果，通过物理引擎模拟液体流动，结合鼠标拖拽事件，可以创造出逼真的动态体验。这种技术不仅提升了用户体验，也为网页游戏、数据可视化等场景提供了新的思路。

鼠标事件的基础与应用

鼠标事件是前端开发中最常用的交互方式之一。mousedown、mousemove和mouseup三个事件组合，可以实现拖拽操作的基本逻辑。在搅拌咖啡的交互中，这些事件用于捕捉用户的操作意图。

let isDragging = false;
const coffeeCup = document.getElementById('coffee-cup');

coffeeCup.addEventListener('mousedown', (e) => {
  isDragging = true;
  // 记录初始位置
  startX = e.clientX;
  startY = e.clientY;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  // 计算移动距离
  const deltaX = e.clientX - startX;
  const deltaY = e.clientY - startY;
  // 更新搅拌器位置
  updateStirrerPosition(deltaX, deltaY);
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

触摸设备上的实现需要考虑touchstart、touchmove和touchend事件，确保移动端兼容性。事件对象的clientX和clientY属性提供了指针的坐标信息，这是计算搅拌方向和速度的基础。

物理引擎的选择与集成

物理引擎模拟了现实世界中的物理规律。对于液体模拟，Matter.js和Cannon.js都是不错的选择。Matter.js更轻量，适合2D场景；Cannon.js支持3D，但复杂度更高。

// 使用Matter.js创建引擎
const engine = Matter.Engine.create();
const world = engine.world;

// 创建液体粒子
function createLiquidParticles() {
  const particles = [];
  for (let i = 0; i < 100; i++) {
    const particle = Matter.Bodies.circle(
      Math.random() * 300 + 50,
      Math.random() * 200 + 50,
      5,
      { restitution: 0.8 }
    );
    particles.push(particle);
  }
  Matter.Composite.add(world, particles);
  return particles;
}

引擎需要持续更新才能产生动态效果。通过requestAnimationFrame实现动画循环：

function animate() {
  Matter.Engine.update(engine);
  renderParticles();
  requestAnimationFrame(animate);
}
animate();

搅拌效果的实现原理

搅拌动作产生的力场会影响液体粒子。根据鼠标移动的速度和方向，计算出一个作用力施加在粒子上的力。

let prevX, prevY;

function updateStirrerPosition(x, y) {
  // 计算速度
  const velocityX = x - prevX;
  const velocityY = y - prevY;
  prevX = x;
  prevY = y;

  // 对每个粒子施加力
  liquidParticles.forEach(particle => {
    const distance = Math.sqrt(
      Math.pow(particle.position.x - x, 2) + 
      Math.pow(particle.position.y - y, 2)
    );
    if (distance < 100) {
      const force = {
        x: velocityX * 0.1 / distance,
        y: velocityY * 0.1 / distance
      };
      Matter.Body.applyForce(particle, particle.position, force);
    }
  });
}

力的衰减也很重要。距离搅拌中心越远的粒子，受到的影响越小。这种非均匀的力场分布，才能产生自然的漩涡效果。

视觉渲染与性能优化

Canvas或WebGL适合渲染大量粒子。Canvas API简单，WebGL性能更好。下面是Canvas渲染示例：

const canvas = document.getElementById('coffee-canvas');
const ctx = canvas.getContext('2d');

function renderParticles() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制咖啡杯
  ctx.fillStyle = '#6F4E37';
  ctx.beginPath();
  ctx.arc(200, 200, 150, 0, Math.PI * 2);
  ctx.fill();

  // 绘制粒子
  ctx.fillStyle = '#4B3621';
  liquidParticles.forEach(particle => {
    ctx.beginPath();
    ctx.arc(
      particle.position.x,
      particle.position.y,
      particle.circleRadius,
      0,
      Math.PI * 2
    );
    ctx.fill();
  });
}

性能优化策略包括：

1. 限制粒子数量（50-200个之间）
2. 使用requestAnimationFrame的节流版本
3. 对远离视口的粒子停止物理计算
4. 使用Web Workers处理复杂的物理运算

交互细节的打磨

真实的搅拌体验需要关注这些细节：

• 搅拌器形状影响流体模式
• 咖啡粘度参数调整
• 惯性效果（停止搅拌后液体继续运动）
• 杯壁碰撞的反弹系数

// 调整物理参数
Matter.Body.setVelocity(particle, {
  x: particle.velocity.x * 0.98, // 摩擦力
  y: particle.velocity.y * 0.98
});

// 杯壁碰撞
Matter.Events.on(engine, 'collisionStart', event => {
  event.pairs.forEach(pair => {
    if (isWall(pair.bodyA) || isWall(pair.bodyB)) {
      // 播放碰撞音效
      playSound('collision');
    }
  });
});

声音反馈能增强沉浸感。不同的搅拌速度可以触发不同音高的液体流动声。

扩展应用场景

这种技术可以延伸到其他场景：

• 鸡尾酒调制模拟器
• 颜料混合实验
• 流体数据可视化
• 科学教育工具

在数据可视化中，可以用粒子代表数据点，搅拌动作触发数据过滤或重组。例如：

// 数据粒子特殊行为
function updateDataParticles() {
  particles.forEach(particle => {
    if (particle.data.value > threshold) {
      // 高值粒子对力场反应更强
      Matter.Body.applyForce(particle, particle.position, {
        x: force.x * 2,
        y: force.y * 2
      });
    }
  });
}

响应式设计需要考虑不同屏幕尺寸下的参数调整。移动端触摸事件可能需要更大的触发区域和更明显的视觉反馈。