easeer-js

1.0.0 • Public • Published

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.

easeOut(domain, steps)object

Perform an ease-out curve from min to max evaluated in n steps.

easeIn(domain, steps)object

Perform an ease-in curve from min to max evaluated in n steps.

throttle(fn, settings)function

Perform an easeing based animation throghout a duration time updated in a deterimed interval

animation(callback, settings)function

Perform an easing based animation with N frames

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.

Readme

Keywords

none

Package Sidebar

Install

npm i easeer-js

Weekly Downloads

0

Version

1.0.0

License

BSD-3-Clause

Unpacked Size

12.3 kB

Total Files

4

Last publish

Collaborators

  • codeccoop