Estoy tratando de hacer una animación simple para una rueda y no estoy seguro de cómo definir su función de animación.
index.html, se puede encontrar a continuación, tratando de mantener el cuerpo limpio... (sin resonancia real).
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>javascript, se puede encontrar a continuación o usando el enlace jsfiddle. He compuesto la rueda a partir de 2 lienzos principales, uno es la rueda exterior y el otro es la rueda interior que se llena para cubrir las líneas de la rueda exterior, dando la impresión de una rueda mecánica.
let buttonDOM = document.createElement('canvas'); buttonDOM.id = 'outterWheel'; buttonDOM.width = 80; buttonDOM.height = 60; document.body.appendChild(buttonDOM); ctx = document.getElementById('outterWheel').getContext('2d'); ctx.lineWidth = 2; ctx.beginPath(); const smallLines = [ 0, 22.5, 45, 67.5, 90, 112.5, 135, 157.5, 180, 202.5, 225, 247.5, 270, 292.5, 315, 337.5 ]; ctx.fillStyle = "#76D7C4"; ctx.fillRect(0, 0, 80, 60); ctx.arc(40, 30, 15, 0, 2 * Math.PI); for (var angle of smallLines){ ctx.moveTo(40, 30); ctx.lineTo(40 + 17 * Math.cos(angle * Math.PI * 2 / 360), 30 + 17 * Math.sin(angle * Math.PI * 2 / 360)); } ctx.stroke(); buttonDOM = document.createElement('canvas'); buttonDOM.id = 'innerWheel'; buttonDOM.width = 80; buttonDOM.height = 60; document.body.appendChild(buttonDOM); ctx = document.getElementById('innerWheel').getContext('2d'); ctx.lineWidth = 2; ctx.beginPath(); ctx.fillStyle = "#76D7C4"; ctx.clearRect(0, 0, 80, 60); ctx.arc(40, 30, 15, 0, 2 * Math.PI); ctx.fillStyle = "#76D7C4"; ctx.fill(); for (var angle of smallLines){ ctx.moveTo(40, 30); ctx.lineTo(40 + 18 * Math.cos((angle + 11.25) * Math.PI * 2 / 360), 30 + 18 * Math.sin((angle + 11.25) * Math.PI * 2 / 360)); } ctx.stroke();En este momento estás usando dos elementos <canvas> para dibujar tus ruedas. Recomendaría usar una sola instancia para crear cada rueda inicialmente. Con la ayuda de canvas.toDataURL() , puede almacenar una instantánea del contenido de su lienzo en un elemento y reutilizar las dos imágenes para componer su animación final en el lienzo.
Para dibujar la animación, podemos utilizar una combinación de los métodos translate() , rotate() y drawImage() . translate moverá el contexto a una posición x e y específica, rotar rotará el lienzo en una cierta cantidad dada en radianes y dibujarImagen finalmente dibujará la imagen dada en la posición actual del contexto.
Para cambiar la animación con el tiempo, como girar las ruedas, necesitamos volver a activar la función de animación. Esto se hace mediante la función requestAnimationFrame() que llama a una función de devolución de llamada determinada a la frecuencia de actualización de su monitor, por ejemplo, 60 veces por segundo en una pantalla de 60 Hz.
Por ejemplo:
let buttonDOM = document.createElement('canvas'); buttonDOM.id = 'outerWheel'; buttonDOM.width = 80; buttonDOM.height = 60; document.body.appendChild(buttonDOM); ctx = document.getElementById('outerWheel').getContext('2d'); ctx.lineWidth = 2; ctx.beginPath(); const smallLines = [0, 22.5, 45, 67.5, 90, 112.5, 135, 157.5, 180, 202.5, 225, 247.5, 270, 292.5, 315, 337.5]; ctx.fillStyle = "#76D7C4"; ctx.fillRect(0, 0, 80, 60); ctx.arc(40, 30, 15, 0, 2 * Math.PI); for (var angle of smallLines) { ctx.moveTo(40, 30); ctx.lineTo(40 + 17 * Math.cos(angle * Math.PI * 2 / 360), 30 + 17 * Math.sin(angle * Math.PI * 2 / 360)); } ctx.stroke(); ctx.closePath(); let outerWheel = new Image(); outerWheel.src = buttonDOM.toDataURL(); ctx.lineWidth = 2; ctx.beginPath(); ctx.clearRect(0, 0, 80, 60); ctx.arc(40, 30, 15, 0, 2 * Math.PI); ctx.fill(); for (var angle of smallLines) { ctx.moveTo(40, 30); ctx.lineTo(40 + 18 * Math.cos((angle + 11.25) * Math.PI * 2 / 360), 30 + 18 * Math.sin((angle + 11.25) * Math.PI * 2 / 360)); } ctx.stroke(); ctx.closePath(); let innerWheel = new Image(); innerWheel.src = buttonDOM.toDataURL(); let innerWheelProperties = { x: 75, y: 100, rotation: 0 }; let outerWheelProperties = { x: 250, y: 100, rotation: 0 }; buttonDOM.width = 300; buttonDOM.height = 200; function animation() { ctx.clearRect(0, 0, buttonDOM.width, buttonDOM.height); ctx.save(); ctx.translate(innerWheelProperties.x, innerWheelProperties.y); ctx.rotate(innerWheelProperties.rotation * Math.PI / 180); ctx.drawImage(innerWheel, 0 - innerWheel.width / 2, 0 - innerWheel.height / 2); ctx.restore(); ctx.save(); ctx.translate(outerWheelProperties.x, outerWheelProperties.y); ctx.rotate(outerWheelProperties.rotation * Math.PI / 180); ctx.drawImage(outerWheel, 0 - outerWheel.width / 2, 0 - outerWheel.height / 2); ctx.restore(); outerWheelProperties.rotation++; innerWheelProperties.rotation -= 0.5; requestAnimationFrame(animation); } requestAnimationFrame(animation);