P5.js动画旋转技术问询：如何实现按钮触发剑单次360度旋转且支持重复执行？

你的核心问题出在缺少旋转状态的跟踪，加上按键判断逻辑没适配P5.js的帧循环机制，我们来一步步修复这个问题：

问题分析 #

现有代码的两个关键缺陷：

1. 直接在draw()里判断key == 'z'：draw()是每一帧都会执行的函数，key变量在按键释放后会被清空，按住按键还会持续触发旋转，没法保证「一次按键对应一次完整旋转」。
2. 无状态标记：旋转完成后直接重置角度，但没标记当前是否正在旋转，导致第二次按z时，逻辑条件冲突没法正确启动动画。

修复后的代码实现 #

我们引入状态变量isRotating跟踪旋转状态，同时改用P5.js的keyPressed()函数处理按键触发，确保一次按键只启动一次旋转：

angleMode(DEGREES);
let angle = 150;
let isRotating = false; // 标记是否正在执行旋转动画

function setup() {
  createCanvas(400, 400); // 初始化画布，P5.js基础必备
}

function draw() {
  background(220); // 每帧清空画布，避免绘制残留
  push();
  translate(100, 100);
  rotate(angle);
  rect(-15, -5, 100, 10); // 绘制剑
  pop();

  // 处理旋转动画逻辑
  if (isRotating) {
    if (angle > -190) { // 未到达目标旋转角度，继续转动
      angle -= 20;
    } else { // 旋转完成，重置状态与角度
      isRotating = false;
      angle = 150;
    }
  }
}

function keyPressed() {
  // 仅当未在旋转时，按z才启动新的旋转动画
  if (key === 'z' && !isRotating) {
    isRotating = true;
  }
}

关键改进点说明 #

• 状态变量isRotating：确保同一时间只有一个旋转动画在执行，避免重复触发导致逻辑混乱。
• 使用keyPressed()：这个函数仅在按键按下瞬间执行一次，完美匹配「按一次按钮触发一次旋转」的需求，而非在draw()里持续检测按键状态。
• 明确的动画终止逻辑：角度到达目标值后，主动重置状态与角度，为下一次旋转做好准备。
• 补充setup()和background()：这是P5.js的基础规范，保证画布初始化和每帧画面干净。

修改后，每按一次z键，剑就会从初始位置完成一次完整的360度旋转，结束后回到初始位置，等待下一次按键触发。

内容的提问来源于stack exchange，提问作者Lazer Squid