fps-throttle
v1.0.2
Published
Create animations with limited framerate.
Downloads
5
Maintainers
Readme
throttledAnimation (fps-throttle) : JS Animation framerate limiter
This simple crossbrowser library helps you to limit the framerate of an animation. It has incorporated an interface to the fps-observer module, which provides useful information about the effective framerate of an animation (with stabilized values).
See a visual example of FPS throttler in action here
Usage examples
Automatic mode :
import {throttledAnimation} from './fps-throttle.js';
let myAnimation = new throttledAnimation( timestamp=>{
console.log( 'Framerate :' , myAnimation.fps );
/*
* this is your animation cycle loop ...
* throttled at 30 fps (±1 fps)
*/
} , 30 );
Constructor Syntax :
new throttledAnimation( cycleCallback , throttleValue );
Parameters :
- cycleCallback : Function to be executed in each loop cycle. (Callback receives a timestamp as first argument.)
- throttleValue : Integer that represents the FPS limit of the animation
Returns:
- new throttledAnimation instance object
Properties and methods :
The throttledAnimation Constructor will create and init a new throttledAnimation instance and return an object with the following properties and methods :
- throttledAnimation.prototype.throttle : Integer. Can be changed to assign a new throttling value
- throttledAnimation.prototype.fps : Integer. Holds the value of the effective framerate
- throttledAnimation.prototype.fpsObserve : Boolean. Framerate observation can be disabled to win some extra performance.
- throttledAnimation.prototype.stop() : Stops the animation
- throttledAnimation.prototype.start() : Starts (or restarts) a stopped animation.
Package distribution
This library can be obtained using any of the following methods :
Npm : Install using the package manager
$ npm install fps-throttle -s
Git : Clone from Github... (Or download the latest release here)
$ git clone https://github.com/colxi/fps-throttle
CDN : Inlcude the latest release of the library in your HTML head
Warning : Not recomended for production enviroments!
<script src="https://colxi.info/fps-throttle/src/main.js" type="module"></script>
When including in the header, the throttledAnimation Constructor becomes available in
window.throttledAnimation