Databases
StackOverflow2013
Postsdbo
POMaths and Easing For Javascript/Canvas Preload Animation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMaths and Easing For Javascript/Canvas Preload Animation
    text
    copied!<p>I'm building an image preload animation, that is a circle/pie that gets drawn. Each 'slice' is totalImages / imagesLoaded. So if there are four images and 2 have loaded, it should draw to 180 over time.</p> <p>I'm using requestAnimFrame, which is working great, and I've got a deltaTime setup to restrict animation to time, however I'm having trouble getting my head around the maths. The closest I can get is that it animates and eases to near where it's supposed to be, but then the value increments become smaller and smaller. Essentially it will never reach the completed value. (90 degrees, if one image has loaded, as an example).</p> <pre><code>var totalImages = 4; var imagesLoaded = 1; var currentArc = 0; function drawPie(){ var newArc = 360 / totalImages * this.imagesLoaded // Get the value in degrees that we should animate to var percentage = (isNaN(currentArc / newArc) || !isFinite(currentArc / newArc)) || (currentArc / newArc) &gt; 1 ? 1 : (currentArc / newArc); // Dividing these two numbers sometimes returned NaN or Infinity/-Infinity, so this is a fallback var easeValue = easeInOutExpo(percentage, 0, newArc, 1); //This animates continuously (Obviously), because it's just constantly adding to itself: currentArc += easedValue * this.time.delta; OR //This never reaches the full amount, as increments get infinitely smaller currentArc += (newArc - easedValue) * this.time.delta; } function easeInOutExpo(t, b, c, d){ return c*((t=t/d-1)*t*t + 1) + b; } </code></pre> <p>I feel like I've got all the right elements and values. I'm just putting them together incorrectly.</p> <p>Any and all help appreciated.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload