ease-component

    1.0.0 • Public • Published

    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

    Keywords

    none

    Install

    npm i ease-component

    DownloadsWeekly Downloads

    53,830

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • tjholowaychuk