EaselJSの超簡単なアニメーション

by nekosmash

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%;
}

canvas{
    position: fixed;
    background:#000;
}

JavaScript

var stage;

window.onload = function() {

    $("canvas").attr({height:$("#wrapper").height()});
    $("canvas").attr({width:$("#wrapper").width()});

    stage = new Stage($("canvas")[0]);
    
    for(i=0;i<20;i++){
        animateGlow(i);        
    }
    
    Ticker.setFPS(60);
    Ticker.addListener(stage);

};

function animateGlow(i){

    var randX = Math.floor(Math.random()*$(window).width());
    var randY = Math.floor(Math.random()*$(window).height());
    var color1 = Math.floor(Math.random()*255);
    var color2 = Math.floor(Math.random()*255);
    var g = new Graphics();
    g.beginRadialGradientFill(
        [Graphics.getRGB(255,255,255,.5),
         Graphics.getRGB(color1,0,color2,.3),
         Graphics.getRGB(color1,0,0,0)],
        [0,0.6,1], 0, 0, 0, 0, 0, 15*i)
        .drawCircle(0,0,15*i);
    
    var s = new Shape(g);
    s.compositeOperation ="lighter";
    
    s.x = randX;
    s.y = randY;
    
    stage.addChild(s);
    Tween.get(s).to({y:s.y-30*i},50000);

};