component-tween/examples/rect.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 tween = Tween({ w: 1, h: 1, border: 1, alpha: 0 })
    .ease('out-circ')
    .to({ border: 5, w: 150, h: 100, alpha: 1  })
    .duration(800);

  tween.update(function(o){
    canvas.width = canvas.width;
    ctx.strokeStyle = 'black';
    ctx.globalAlpha = o.alpha;
    ctx.lineWidth = o.border;
    ctx.rect(canvas.width / 2 - o.w / 2, canvas.height / 2 - o.h / 2, o.w, o.h);
    ctx.stroke();
    ctx.fill();
  });

  tween.on('end', function(){
    animate = function(){};
  });

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

  animate();
</script>