46 lines
948 B
HTML
46 lines
948 B
HTML
|
|
<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> |