43 lines
889 B
HTML
43 lines
889 B
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 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>
|