html5で日食アニメーションしてみたよー(*`ω´*)
HTML
<script src="http://dl.dropbox.com/u/63305355/easeljs-0.4.2.min.js"></script>
<script src="http://dl.dropbox.com/u/63305355/tweenjs-0.2.0.min.js"></script>
<div id="wrapper">
<canvas></canvas>
</div>
CSS
html{
min-height: 100%;
overflow: auto;
position:relative;
z-index: 1;
}
body{
min-height: 100%;
margin: 0;
padding: 0;
overflow: auto;
position: relative;
z-index: 1;
}
#wrapper{
height: auto;
overflow: auto;
position: fixed;
z-index: 1;
width: 100%;
height:100%;
min-height:100%;
background:#000;
}
canvas{
position: fixed;
}
JavaScript
var stage;
var h=400;
var w=600;
window.onload = function() {
$("canvas").attr({height:h});
$("canvas").attr({width:w});
stage = new Stage($("canvas")[0]);
for(var i=1;i<10;i++){
sunflare(i,true);
}
var g = new Graphics();
g.beginFill(Graphics.getRGB(0,0,0)).drawCircle(0,0,110);
var front = new Shape(g);
front.x = w/2;
front.y = h/2;
stage.addChild(front);
stage.update();
for(var i=1;i<10;i++){
sunflare(i,false);
}
//Tween.get(s).to({y:s.y-30*i},50000);
Ticker.setFPS(60);
Ticker.addListener(stage);
};
function sunflare(i,flg){
var g = new Graphics();
var rad;
var lrad;
var start;
var finish;
if(flg){
rad=25;
lrad=1000;
start=w/2+50;
finish = w/2-200;
}else{
rad=10;
lrad=50;
start=w/2-130;
finish=w/2-110;
}
g.beginRadialGradientFill(
[Graphics.getRGB(255,255,255,.5),
Graphics.getRGB(255,200,200,.3),
Graphics.getRGB(200,0,0,0)],
[0,0.6,1], 0, 0, 0, 0, 0, rad*i)
.drawCircle(start,0,lrad*i);
var s = new Shape(g);
s.compositeOperation ="lighter";
s.x = start;
s.y = h/2;
if(flg){
Tween.get(s).to({x:finish},50000);
}else{
s.alpha=0;
Tween.get(s).wait(7000).to({alpha:1,x:finish},50000);
}
stage.addChild(s);
}