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

Locate the parent element that has the smallest amount of space taken up by its child elements

Leveraging reframe.js to enhance the functionality of HTML5 video playback

When trying to validate an HTML form using AJAX, jQuery, and JavaScript, the validation may not

How can I capture the 'ended' event from an HTML5 video tag using Ember in a controller?

Managing the scrolling direction horizontally with waypoints.js

Dependency management in ReactJS components

Ways to extract a specific element from a webpage's body section

Oops! Hardhat Test Error "Error: Virtual Machine Exception occurred while processing transaction: reverted with reason 'Please deposit additional funds'."

Fixed Positioning Div to Stay at the Top while Scrolling

How can you transfer data from a jQuery function to a designated div element?

Utilizing numerous X-axis data points in highcharts

The test is failing to execute the service mock promise due to an issue with the `

When I attempt to connect to my local MongoDB database, including a specific port in the URI is preventing the connection from being

Can someone provide a method to access the namespace of an Angular controller when utilizing the "Controller As" format?

Correct validation is not achieved when the "!" symbol is used in the matches function

Tips for dynamically adding an HTML element to index.html using JavaScript

Error in Visual Studio with Angular 2 build: 'Promise' name not found

Jest tutorial: mocking constructor in a sub third-party attribute

Sending data through the backbone form?

Performing tasks when a component is fully loaded in Vue.js Router