Animazione
simple easing animations using requestAnimationFrame
Features
- custom easing
- chainable animations
- optimized frame skip
- target fps
- animation completed callback
- loop
Install
$ npm install --save animazione
Usage
const box = document;const a = render: renderLeft // render function for each frame target: box // set the context to bind the render function to duration: 400 // animation step duration initialValue: 0 // initial value passed to render function endValue: 500 // end value to be reached in the render function -05 * Math - 1 // easing function { console } // callback on animation step completed // a set of step animations can be looped foreverstart; // start the animation { thisstyle'left' = val + 'px';} { thisstyle'top' = val + 'px';}
API
Class: Animazione
Create a new Animazione instance.
animation
animation
animation step
type: Object
render
{function} Render function- Default:
noop
- Default:
target
{Any} Context for the render function- Default:
null
- Default:
duration
{integer} Step duration- Default:
0
- Default:
easing
{function} Easing function- Default:
t => t
(linear easing)
- Default:
initialValue
- Default: {integer}
0
- Default: {integer}
endValue
- Default: {integer}
1
- Default: {integer}
fps
- Default: {integer}
60
- Default: {integer}
loop
- Default: {boolean}
false
- Default: {boolean}
onComplete
- Default: {function}
noop
- Default: {function}
Methods
start()
Start the animation- Returns current Animazione instance
andThen(animation)
Chain another animation stepanimation
and animation step- Returns current Animazione instance
wait(duration)
pause the animationduration
{integer} pause duration in ms- Returns current Animazione instance
loop()
Make the animation an infinite loop of all the currently defined steps- Returns current Animazione instance
stop()
Stop the animation