One way to pause a running animation is simply to inhibit the action as shown in the first example below, and based on the following code. As you can see, the window.requestAnimationFrame
is still called, but setting the value of running
to false merely prevents anything from getting done.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var bcAnimation = new Animation(400,400,"bcanimation"); bcAnimation.demo2(); var running = true; function animateCircle() { if (running) { bcAnimation.demo2(); } window.requestAnimationFrame(animateCircle); } animateCircle(); var element = document.getElementById("toggle_button"); function toggleAnimation() { //called on button click running = !running; if (!running) { element.innerHTML = "Run Animation"; } else { element.innerHTML = "Pause Animation"; } } |
If you want to stop the animation entirely you can invoke the window.cancelAnimationFrame
function, which takes a request ID for a parameter. That ID is actually returned by the window.requestAnimationFrame
function. This ID wasn’t necessary when we didn’t want to do anything but start the animation, but is if you want to stop it directly. The ID is used internally by the browser in a way that supports multiple animation requests at the same time.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
var bcAnimation = new Animation(400,400,"bcanimation"); bcAnimation.demo2(); var requestId; function animateCircle() { bcAnimation.demo2(); requestId = window.requestAnimationFrame(animateCircle); } animateCircle(); var running = true; var element = document.getElementById("toggle_button"); function toggleAnimation() { //called on button click if (running) { element.innerHTML = "Run Animation"; running = false; cancelAnimationFrame(requestId); } else { element.innerHTML = "Pause Animation"; running = true; //either of the next two methods will work to restart //animateCircle(); requestId = window.requestAnimationFrame(animateCircle); } } |
Next we can work on controlling the frame rate.
Here we embed the animation call and the window.requestAnimationFrame
function in a timer so the refresh is only executed when the timing wrapper allows it. I’ve set it up so you can click to cycle from 20fps to 140fps in increments of 20fps. Your results may vary by browser and hardware but I didn’t notice that the animation was able to run at full speed until the setting was bumped up to 80fps, and occasional hiccups remained even then. I know that the refresh rate on my hardware is 60fps so I’m guessing that the effective time between updates is governed by the timer setting plus the time it takes for the next refresh to happen within the browser.
It appears that using this mechanism only makes sense when you want to manually slow the refresh rate down to well below the screen’s refresh rate. Also bear in mind that the browser may update less often than the hardware refresh rate if the system is busy, if individual animation cycles become too complex, or for other reasons.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var bcAnimation = new Animation(400,400,"bcanimation"); bcAnimation.demo2(); var framesPerSecond = 20; function animateCircle() { setTimeout(function() { bcAnimation.demo2(); window.requestAnimationFrame(animateCircle); }, 1000 / framesPerSecond); } animateCircle(); var element = document.getElementById("toggle_button"); function toggleAnimation() { //called on button click framesPerSecond += 20; if (framesPerSecond > 140) { framesPerSecond = 20; } element.innerHTML = "Frame Rate: "+framesPerSecond+" fps"; } |