48 lines
842 B
HTML
48 lines
842 B
HTML
|
|
||
|
|
<style>
|
||
|
|
canvas {
|
||
|
|
border: 1px solid #eee;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script src="../build/build.js"></script>
|
||
|
|
|
||
|
|
<canvas width=1000 height=500></canvas>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var Tween = require('tween');
|
||
|
|
var raf = require('component-raf');
|
||
|
|
var canvas = document.querySelector('canvas');
|
||
|
|
var ctx = canvas.getContext('2d');
|
||
|
|
var h = 500;
|
||
|
|
|
||
|
|
function random(n, f) {
|
||
|
|
var arr = [];
|
||
|
|
while (n--) arr.push(Math.random() * f);
|
||
|
|
return arr;
|
||
|
|
}
|
||
|
|
|
||
|
|
var tween = Tween(random(1000, 50))
|
||
|
|
.ease('out-bounce')
|
||
|
|
.to(random(1000, 400))
|
||
|
|
.duration(800);
|
||
|
|
|
||
|
|
tween.update(function(a){
|
||
|
|
canvas.width = canvas.width;
|
||
|
|
ctx.fillStyle = '#0070ff';
|
||
|
|
for (var i = 0; i < a.length; i++) {
|
||
|
|
ctx.fillRect(i, h - a[i], 1, a[i]);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
tween.on('end', function(){
|
||
|
|
animate = function(){};
|
||
|
|
});
|
||
|
|
|
||
|
|
function animate() {
|
||
|
|
raf(animate);
|
||
|
|
tween.update();
|
||
|
|
}
|
||
|
|
|
||
|
|
animate();
|
||
|
|
</script>
|