P5.js-动画旋转-如何将剑旋转360度

Question

我正在尝试为一个对象设置动画，在本例中，该对象是一把剑。

动画是剑360度旋转，每次按下一个按钮。

我拔出了剑，把它放在我想要的开始/结束位置，我让它旋转一次，但我似乎无法让它旋转第二次。

以下是我目前所掌握的。。。

angleMode(DEGREES);
let angle = 150;
push();
translate(100,100);
rotate(angle);
rect(-15,-5,100,10);
pop();
if (key == 'z' && angle <= 150 && angle >= -190){
angle -= 20;
} else if (angle >= -190){          
angle = 150;
}

Answer 1

也许您想检查角度<=-190将其重置回150？

// ...
} else if (angle <= -190){          
angle = 150;
}

运行示例片段：

let angle = 150;
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
}
function draw() {
background(220);
push();
translate(100, 100);
rotate(angle);
rect(-15, -5, 100, 10);
triangle(85, -5, 85, 5, 110, 5);
pop();
if (keyIsPressed) {
if (key == "z" && angle <= 150 && angle >= -190) {
angle -= 20;
console.log("updated angle", angle);
} else if (angle <= -190) {
console.log("angle reset");
angle = 150;
}
}
}

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