Skip to content

Latest commit

 

History

History
103 lines (82 loc) · 2.29 KB

README.md

File metadata and controls

103 lines (82 loc) · 2.29 KB
Raw

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

<div class="box"></div>
const box = document.querySelector('.box');
const a = new Animazione({
  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
  easing: t => -0.5 * (Math.cos(Math.PI*t) - 1), // easing function
  onComplete: () => { console.log('first finished') }, // callback on animation step completed
}).andThen({ // multiple steps can be chained
  render: renderTop,
  duration: 400,
  initialValue: 0,
  endValue: 500,
  onComplete: () => { console.log('second finished') }
})
.loop() // a set of step animations can be looped forever
.start(); // start the animation
      
function renderLeft(val) {
  this.style['left'] = val + 'px';
}

function renderTop(val) {
  this.style['top'] = val + 'px';
}

API

Class: Animazione

Create a new Animazione instance.

new Animazione(animation)

animation

animation step

type: Object

  • render {function} Render function
    • Default: noop
  • target {Any} Context for the render function
    • Default: null
  • duration {integer} Step duration
    • Default: 0
  • easing {function} Easing function
    • Default: t => t (linear easing)
  • initialValue
    • Default: {integer} 0
  • endValue
    • Default: {integer} 1
  • fps
    • Default: {integer} 60
  • loop
    • Default: {boolean} false
  • onComplete
    • Default: {function} noop

Methods

  • start() Start the animation
    • Returns current Animazione instance
  • andThen(animation) Chain another animation step
    • animation and animation step
    • Returns current Animazione instance
  • wait(duration) pause the animation
    • duration {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