Tips for creating a scale animation using HTML5 Canvas

Question

Tips for creating a scale animation using HTML5 Canvas

I am currently developing a canvas whiteboard tool and I have reached the stage where I am focusing on implementing the Zoom In and Zoom Out feature.

While the functionality is working fine, I would like to enhance it with smooth animations for scaling. However, the current scaling happens too quickly that the effect is not noticeable. Whenever I click on the + or - button, the scaling occurs instantly.

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 and dy represent screen offsets.

Can anyone assist me in addressing this issue?

Thank you, Frank

javascript animation canvas html5-canvas scale

Answer 1

Answer №1

When updating visual properties such as scale within a for-loop, the changes happen almost instantaneously - not literally all at once but certainly much faster than the human eye can perceive. The screen does not refresh with each iteration of the loop; instead, it appears to update only before and after calling the scale() function.

To make these changes visible over time, you must implement them gradually. For instance, starting at time 1.0, set the scale to 1.0, at 1.1, set it to 1.01, at 1.2, set it to 1.02, and so on until reaching the desired scale. This can be achieved using either the setInterval() or requestAnimationFrame() functions. setInterval requires two arguments: the function to call and the time (in milliseconds) at which to call this function. On the other hand, requestAnimationFrame attempts to call the specified function at the display's refresh rate - approximately 60 times per second on a 60Hz display.

To optimize your example using the requestAnimationFrame function:

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>

Answer 2

When updating visual properties such as scale within a for-loop, the changes happen almost instantaneously - not literally all at once but certainly much faster than the human eye can perceive. The screen does not refresh with each iteration of the loop; instead, it appears to update only before and after calling the scale() function.

To make these changes visible over time, you must implement them gradually. For instance, starting at time 1.0, set the scale to 1.0, at 1.1, set it to 1.01, at 1.2, set it to 1.02, and so on until reaching the desired scale. This can be achieved using either the setInterval() or requestAnimationFrame() functions. setInterval requires two arguments: the function to call and the time (in milliseconds) at which to call this function. On the other hand, requestAnimationFrame attempts to call the specified function at the display's refresh rate - approximately 60 times per second on a 60Hz display.

To optimize your example using the requestAnimationFrame function:

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>

Answer 3

Answer №2

@uniqueUser Your insight was incredibly valuable, much appreciated.

After incorporating your suggestions, my final code now appears as follows:

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);
         });
    }
}

Answer 4

@uniqueUser Your insight was incredibly valuable, much appreciated.

After incorporating your suggestions, my final code now appears as follows:

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);
         });
    }
}

Tips for creating a scale animation using HTML5 Canvas

Answer №1

Answer №2

Similar questions

Encountered a runtime error in NgRx 7.4.0: "Uncaught TypeError: ctor is not a

Encountering errors like "Cannot find element #app" and "TypeError: Cannot read property 'matched' of undefined" typically happens when using vue-router

Interacting with the DOM of an iFrame from a separate window using Javascript

Updating parent component's scrollHeight of DOM element based on child component in Next.js

Creating a regular expression to match special characters using JavaScript

Tips on preserving type safety after compiling TypeScript to JavaScript

Issue with Ajax reload functions malfunctioning

The value of a variable decreases upon being utilized in an Ajax API call

Establish a global variable within a TypeScript file

Encountering issues while attempting to execute node-sass using npm

Error occurred while trying to authenticate the user "root" with the password in Linux using NodeJS, Express, and PostgreSQL

When jQuery fails to detach() due to the presence of an input tag

Tips for Showing Websocket Response On Web Browser Using Node.js

Manipulating DropDownList Attributes in ASP.NET using JavaScript

What is the best way to implement a dialog box that displays a website within it, all while keeping my SharePoint site running in the background?

Limiting the style of an input element

transferring information between pages in nextjs

How to achieve horizontal auto-scrolling in an image gallery with jQuery?

Number each element in sequence

The Gulp task is stuck in an endless cycle