p5.js鼠标点击线条底部端点平滑移动动画问题求助

嘿，我明白你现在遇到的问题了——你想让线条底部端点平滑地逐帧移动到画布左下角，但现在的align方法用了while循环，会在鼠标按下的瞬间就把所有移动完成，自然看不到动画效果。

问题根源 #

mousePressed是一个事件回调函数，它会在鼠标按下的那一刻一次性执行完所有代码。你里面的while循环会在极短时间内把xFinish直接减到0，等draw函数下一帧渲染时，线条已经在终点位置了，所以没有动画过程。

解决方案 #

我们需要把移动逻辑放到draw的帧循环里，让它每帧移动5px，这样就能实现平滑动画。具体步骤：

1. 给Line类添加一个状态变量，标记是否需要开始移动
2. 在align方法里只触发这个状态，不做实际移动
3. 在每帧渲染的流程里，根据状态逐帧更新xFinish的值

修改后的完整代码 #

let lines = []
function setup() {
  createCanvas(600, 400);
  for(let i = 0; i < 150; i++) {
    lines[i] = new Line(random(600), 0, random(600), 400, random(149,212), random(89, 146), 1);
  }
}
function draw() {
  background(32, 44, 57);
  for(let i = 0; i < lines.length; i++){
    lines[i].update(); // 每帧更新位置
    lines[i].show();
  }
}
function mousePressed() {
  for(let i = 0; i < lines.length; i++){
    lines[i].align();
  }
}
class Line {
  constructor(xStart, yStart, xFinish, yFinish, g, b, w) {
    this.xStart = xStart;
    this.yStart = yStart;
    this.xFinish = xFinish;
    this.yFinish = yFinish;
    this.g = g;
    this.b = b;
    this.w = w;
    this.shouldAlign = false; // 标记是否需要开始移动
  }
  show() {
    stroke(242, this.g, this.b);
    strokeWeight(this.w);
    line(this.xStart, this.yStart, this.xFinish, this.yFinish);
  }
  align() {
    // 不再用while循环，只开启移动状态
    this.shouldAlign = true;
  }
  // 单独的更新方法，处理逐帧移动逻辑
  update() {
    if(this.shouldAlign && this.xFinish > 0) {
      this.xFinish -= 5;
      // 防止xFinish变成负数，可选处理
      if(this.xFinish < 0) this.xFinish = 0;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

关键修改点说明 #

• 新增shouldAlign状态变量：用来控制是否开始执行移动逻辑
• 重构align方法：现在它只是把shouldAlign设为true，触发动画开始
• 新增update方法：在draw循环里每帧调用，检查状态并逐帧移动5px，直到到达目标位置

这样修改后，当你按下鼠标，每条线条的底部端点就会以每帧5px的速度平滑移动到画布左下角啦～

内容的提问来源于stack exchange，提问作者Lee Woodall