ease-component/example.html

Easing functions (for canvas etc)

<style>
  canvas {
    border: 1px solid #eee;
  }
</style>

<script src="build/build.js"></script>

<canvas width=500 height=400></canvas>

<script>
  var ease = require('ease');
  var requestAnimationFrame = require('component-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();
</script>