我正在创建一个网页,您按下键盘上的每个键都会生成一个新的声音/动画。我现在只在我的第一把钥匙上,但我遇到了问题,按下第一个按键后,动画就会卡住。取决于按下哪个键而不是再次开始动画或开始新动画,矩形(在这种情况下)将开始闪烁。以下是我的一些代码。
class Drawable{
constructor(context, x = 0, y = 0, fillStyle = "#000", strokeStyle = "transparent", lineWidth = 0){
this.context = context;
if(!(this.context instanceof CanvasRenderingContext2D)){
throw new Error("You must provide a valid canvas context to Drawables.");
}
this.x = x;
this.y = y;
this.fillStyle = fillStyle;
this.strokeStyle = strokeStyle;
this.lineWidth = lineWidth;
this.deltas = new Map();
this.limits = {
max: new Map(),
min: new Map()
};
}
draw(){
this.context.save();
this.context.translate(this.x, this.y);
this.context.scale(2,1.5);
this.context.fillStyle = this.fillStyle;
this.context.strokeStyle = this.strokeStyle;
this.context.lineWidth = this.lineWidth;
}
afterDraw(){
this.context.restore();
}
applyAnimation(secondsElapsed){
for(const[propertyName, valueChangePerSecond] of this.deltas){
const changedAmount = secondsElapsed * valueChangePerSecond;
this[propertyName] += changedAmount;
if(this.limits.max.has(propertyName)){
this[propertyName] = Math.min(this[propertyName],this.limits.max.get(propertyName));
} else if(this.limits.min.has(propertyName)){
this[propertyName] = Math.max(this[propertyName],this.limits.min.get(propertyName));
}
}
}
}
class Rectangle extends Drawable{
constructor(context, x = 0, y = 0, fillStyle = "#000", strokeStyle = "transparent", lineWidth = 0, deltas = new Map(), width = 100, height = 100){
super(context, x, y, fillStyle, strokeStyle, lineWidth, deltas);
this.width = width;
this.height = height;
}
draw(){
super.draw();
this.context.fillRect( this.width / -2, this.height / -2, this.width, this.height);
this.context.strokeRect( this.width / -2, this.height / -2, this.width, this.height);
super.afterDraw();
}
loopDraw(){
super.draw();
let rectSize = 30;
for(let i = 0; i < 3; i++){
let yPos = (rectSize - 10)*i;
for(let j = 0; j < 6; j++){
this.context.fillRect((rectSize+10)*j,yPos,this.width/-2,this.height/-2);
this.context.strokeRect(this.width / -2, this.height / -2, this.width, this.height);
}
}
super.afterDraw();
}
}
const canvas = document.getElementById("soundBoardCanvas");
const context = canvas.getContext("2d");
const animationAObjects = new Set();
// Creating the rectangle and setting the animation properties of the rectangle
let animationARect = new Rectangle(context,canvas.width/1.5,canvas.height/2, randomColour(), "transparent", 0, new Map() ,50,50);
animationARect.deltas.set("y",100);
animationARect.deltas.set("height",50);
animationARect.deltas.set("width",50);
animationARect.deltas.set("x",100);
animationARect.limits.max.set("y", canvas.height/2);
animationARect.limits.max.set("x", canvas.width/2.5);
animationARect.limits.max.set("height",randomBetween(100,170));
animationARect.limits.max.set("width",randomBetween(100,170));
animationAObjects.add(animationARect);
function randomBetween(min,max){
let range = max - min;
let random = Math.random();
random = random * (range + 1);
random = random + min;
return random;
}
// Animates all of the objects in the selected set
function animationA(){
requestAnimationFrame(animationA);
context.clearRect(0,0,canvas.width,canvas.height);
const diffSeconds = (Date.now() - lastTime) / 1000;
lastTime = Date.now();
if(diffSeconds > 0){
for(const animationAObject of animationAObjects){
animationAObject.applyAnimation(diffSeconds);
animationAObject.draw();
}
}
}
document.addEventListener("keydown", (e) => {
e.preventDefault();
cancelAnimationFrame(requestId);
if(e.keyCode == 65){
window.requestAnimationFrame(animationA);
}
});
答案 0 :(得分:1)
您永远不会创建requestId
(甚至在任何地方声明它),因此应该抛出错误(至少在严格模式下)。然后你只是在每次按下 a 时创建一个新动画,这可能会相互干扰并导致闪烁(虽然我不知道为什么会这样)。
let requestId = 0; // declare this!
let lastTime = Date.now(); // important initialisation
function animationA(){
requestId = requestAnimationFrame(animationA);
// ^^^^^^^^
…
}
document.addEventListener("keydown", (e) => {
e.preventDefault();
cancelAnimationFrame(requestId);
if (e.keyCode == 65) {
requestId = window.requestAnimationFrame(animationA);
// ^^^^^^^^^
}
});