ease-component

Easing functions (for canvas etc)

npm install ease-component
2 downloads in the last day
15 downloads in the last week
40 downloads in the last month

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

npm loves you