Ease-component NPM

ease

Easing functions (for canvas etc)

linear
inQuad
outQuad
inOutQuad
inCube
outCube
inOutCube
inQuart
outQuart
inOutQuart
inQuint
outQuint
inOutQuint
inSine
outSine
inOutSine
inExpo
outExpo
inOutExpo
inCirc
outCirc
inOutCirc
inBack
outBack
inOutBack
inBounce
outBounce
inOutBounce

Aliases

in-quad
out-quad
in-out-quad
in-cube
out-cube
in-out-cube
in-quart
out-quart
in-out-quart
in-quint
out-quint
in-out-quint
in-sine
out-sine
in-out-sine
in-expo
out-expo
in-out-expo
in-circ
out-circ
in-out-circ
in-back
out-back
in-out-back
in-bounce
out-bounce
in-out-bounce

Example

var ease = require('ease');
var requestAnimationFrame = require('raf');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var stop = false;
function animate() {
  if (stop) return;
  requestAnimationFrame(animate);
  draw();
}

var startx = 20;
var x = startx;
var destx = 300;
var y = 400 / 2;
var duration = 1000;
var start = Date.now();
var end = start + duration;

function draw() {
  var now = Date.now();
  if (now - start >= duration) stop = true;
  var p = (now - start) / duration;
  val = ease.inOutBounce(p);
  x = startx + (destx - startx) * val;
  canvas.width = canvas.width;
  ctx.fillStyle = 'red';
  ctx.arc(x, y, 10, 0, Math.PI * 2, false);
  ctx.fill();
}

animate();

License

MIT