Estoy trabajando en una herramienta de pizarra blanca de lienzo. Ahora estoy en el punto en el que trabajo en la función Acercar y Alejar.
Esto está funcionando bien hasta ahora, pero ahora me gusta hacer una animación suave para escalar. Pero parece que es demasiado rápido, que no veo ningún efecto. Hago clic en el botón + o - y boom, se escala.
let scaleAmount = 1.00; function scaleUpdate() { ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.scale(scaleAmount, scaleAmount) scaleSize.innerText = parseInt(parseFloat(scaleAmount.toFixed(2))*100)+"%"; stageUpdate(); } function scale(direction) { let scaleSize = document.getElementById("scaleSize"); if(direction=="zoomIn") { for(let i = 0; i<10; i++) { scaleAmount += 0.01; scaleAmount = parseFloat(scaleAmount.toFixed(2)); dx += scaleAmount; dy += scaleAmount; scaleUpdate(); } } if(direction=="zoomOut") { for(let i = 0; i<10; i++) { scaleAmount -=0.01; scaleAmount = parseFloat(scaleAmount.toFixed(2)); dx -= scaleAmount; dy -= scaleAmount; scaleUpdate(); } } }dx y dy son compensaciones de pantalla.
¿Alguien podría ayudarme a manejar este problema?
gracias de antemano franco
Si actualiza las propiedades visuales como la escala dentro de un bucle for, literalmente sucede de una vez, no realmente, por supuesto, pero mucho más rápido que el ojo. La pantalla no se actualiza con cada iteración de su bucle for. Es más como antes de llamar a la función scale() y después de que termine (tampoco realmente, pero entiendes la idea).
Para que esos cambios sean visibles, debe hacerlos con el tiempo. Por ejemplo, en el tiempo de inicio 1.0 establezca la escala en 1, en 1.1 configúrelo en 1.01, en 1.2 configúrelo en 1.02 y así sucesivamente hasta alcanzar su escala objetivo. Esto se puede hacer usando la setInterval() o requestAnimationFrame() . setInterval toma dos argumentos, la función a llamar y el momento en que llamar a esta función en milisegundos. requestAnimationFrame intenta llamar a la función suministrada a la frecuencia de actualización de su pantalla, por lo que si es una pantalla de 60 Hz, se llamará cerca de 60 veces por segundo.
Si modificamos su ejemplo para aprovechar la función requestAnimationFrame:
let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); document.getElementById("scaleUp").onclick = () => { cancelAnimationFrame(animationID); scale("zoomIn"); } document.getElementById("scaleDown").onclick = () => { cancelAnimationFrame(animationID); scale("zoomOut"); } let scaleAmount = 1.0; let animationID; function scale(direction) { let animationReady = false; let targetScale; if (direction == "zoomIn") { scaleAmount += 0.01; targetScale = 2; animationReady = scaleAmount >= targetScale; } if (direction == "zoomOut") { scaleAmount -= 0.01; targetScale = 1; animationReady = scaleAmount <= targetScale; } if (animationReady) { scaleAmount = targetScale; } else { animationID = requestAnimationFrame(() => { scale(direction); }); } stageUpdate(); } function stageUpdate() { ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.scale(scaleAmount, scaleAmount); ctx.beginPath(); ctx.arc(0, 0, 45, 0, 2 * Math.PI); ctx.closePath(); ctx.stroke(); } stageUpdate(); <button id="scaleUp" type="button">Scale +</button><button id="scaleDown" type="button">Scale -</button><br><canvas id="canvas" width="320" height="200"></canvas>@obscure Su respuesta fue realmente útil, gracias.
Mi código final se ve así:
let scaleAmount = 1.00; let scaleAnimation; let animationReady = false; let scalePercent = parseInt(scaleSize.innerText.replace("%","")); function scaleUpdate() { ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.scale(scaleAmount, scaleAmount) scaleSize.innerText = parseInt(parseFloat(scaleAmount.toFixed(1))*100)+"%"; stageUpdate(); } function scale(direction) { let targetScale ; if(direction=="zoomIn") { targetScale = scalePercent / 100 + 0.1; scaleAmount += 0.01; animationReady = scaleAmount > targetScale; targetScale= parseFloat(targetScale.toFixed(3)); scaleAmount = parseFloat(scaleAmount.toFixed(3)); dx += scaleAmount; dy += scaleAmount; } if(direction=="zoomOut") { targetScale = scalePercent / 100 - 0.1; scaleAmount -= 0.01; animationReady = scaleAmount < targetScale; targetScale= parseFloat(targetScale.toFixed(3)); scaleAmount = parseFloat(scaleAmount.toFixed(3)); dx -= scaleAmount; dy -= scaleAmount; } if (animationReady) { scaleAmount = targetScale; scalePercent = parseInt(scaleSize.innerText.replace("%","")); } else { scaleAnimation = requestAnimationFrame(() => { scaleUpdate(); scale(direction); }); } }