62 lines
1.1 KiB
HTML
62 lines
1.1 KiB
HTML
|
|
<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> |