component-tween/examples/ball.html

Motion tween engine using 'ease'

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

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

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

<script>
  var Tween = require('tween');
  var raf = require('component-raf');
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var w = canvas.width, h = canvas.height;

  var tween = Tween({ x: w/2, y: 20, r: 10, a: .5 })
    .ease('out-bounce')
    .to({ x: w/2, y: h-8, r: 10, a: .5 })
    .duration(2000);

  tween.update(function(o){
    canvas.width = canvas.width;
    ctx.fillStyle = 'red';
    ctx.globalAlpha = o.a;
    ctx.arc(o.x | 0, o.y | 0, o.r, 0, Math.PI * 2, false);
    ctx.fill();
  });

  var n = 0;
  tween.on('end', function(){
    switch (n++) {
      case 0:
        tween
          .to({ x: w/2, y: 20, r: 10, a: .5 })
          .ease('out-sine')
          .duration(500);
        break;
      case 1:
        tween
          .to({ x: w/2, y: h/2, r: 10, a: .5 })
            .ease('in-out-back')
            .duration(800);
        break;
      case 2:
        tween
          .to({ x: w/2, y: h/2, r: 80, a: 1 })
          .ease('out-bounce')
          .duration(1500);
        break;
      default:
        animate = function(){};
    }
  });

  function animate() {
    raf(animate);
    tween.update();
  }

  animate();
</script>