ease-component

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