Permalink
Browse files

add interactive example

  • Loading branch information...
1 parent 4516f78 commit 887032c3c0f3813d7ae103c48653b1f0c2703533 @tj tj committed Nov 18, 2012
Showing with 62 additions and 0 deletions.
  1. +62 −0 examples/interactive.html
View
62 examples/interactive.html
@@ -0,0 +1,62 @@
+
+<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;
+
+ function Ball(x, y) {
+ this.moveTo(x, y);
+ this.rad = 10;
+ }
+
+ Ball.prototype.moveTo = function(x, y){
+ this.x = x;
+ this.y = y;
+ };
+
+ Ball.prototype.draw = function(ctx){
+ ctx.save();
+ ctx.fillStyle = 'red';
+ ctx.arc(this.x | 0, this.y | 0, this.rad, 0, Math.PI * 2, false);
+ ctx.fill();
+ ctx.restore();
+ };
+
+ var ball = new Ball(100, 100);
+ ball.draw(ctx);
+
+ canvas.onclick = function(e){
+ console.log('move');
+
+ var tween = Tween({ x: ball.x, y: ball.y })
+ .ease('out-bounce')
+ .to({ x: e.offsetX, y: e.offsetY })
+ .duration(1500);
+
+ tween.update(function(o){
+ canvas.width = canvas.width;
+ ball.moveTo(o.x, o.y);
+ ball.draw(ctx);
+ });
+
+ function animate() {
+ raf(animate);
+ tween.update();
+ }
+
+ animate();
+ };
+
+</script>

0 comments on commit 887032c

Please sign in to comment.