easeer-js v1.0.0
Easeer.js
JavaScript module with easing generators and basic animate and throttle functions.
Installation
npm i easeer-js
Usage
Easeer.js offers two different approaches: Work with javascript generators to get easing curves, or work with javascript functions to perform animations.
Easing
const { easeInOut, inteval } = require("easeer-js");
const easing = easeInOut([0, 1000], 100);
let next = easing.next();
while (next.done !== true) {
console.log(next.value);
next = easing.next();
}Animation
var total = 100;
throttle(function (progress) {
console.log("Loading: " + progress * total + "%");
}, {
interval: 50,
duration: 1000,
easing: "in"
});Functions
easeInOut(domain, steps) ⇒ object
Perform an ease-in-out curve from min to max evaluated in n steps.
Kind: global function
Returns: object - easing
| Param | Type | Description |
|---|---|---|
| domain | Array | An array with tow values, min and max of the easing domain |
| steps | number | How many steps has to return the easing between min and max |
easeOut(domain, steps) ⇒ object
Perform an ease-out curve from min to max evaluated in n steps.
Kind: global function
Returns: object - easing
| Param | Type | Description |
|---|---|---|
| domain | Array | An array with tow values, min and max of the easing domain |
| steps | number | How many steps has to return the easing between min and max |
easeIn(domain, steps) ⇒ object
Perform an ease-in curve from min to max evaluated in n steps.
Kind: global function
Returns: object - easing
| Param | Type | Description |
|---|---|---|
| domain | Array | An array with tow values, min and max of the easing domain |
| steps | number | How many steps has to return the easing between min and max |
throttle(fn, settings) ⇒ function
Perform an easeing based animation throghout a duration time updated in a deterimed interval
Kind: global function
Returns: function - close - A function to stop the animation before it reaches the end
| Param | Type | Description |
|---|---|---|
| fn | function | The callback function to be triggered on eacn interval |
| settings | object | A configuration object with values for 'interval', 'duration' and 'easing'. The 'interval' value is for the time interval in milliseconds and have 10ms as default value, 'duration' defines the animation time duration and has 1000ms as default value, and 'easing' is to choose what type of easing the animations has to follow and has 'in-out' as default value. |
animation(callback, settings) ⇒ function
Perform an easing based animation with N frames
Kind: global function
Returns: function - close - A function to stop the animation before it reached the end
| Param | Type | Description |
|---|---|---|
| callback | function | The callback function to be triggered on each frame |
| settings | object | A configuration object with values fro 'frames' and 'easing'. The 'frames' defines how much long will be the animation, the 'easing' is to choose what type of easing the animation has to follow. |
2 years ago