Raphaelist_vol32(easing)

Raphael de SVG ! vol32

by nekosmash

HTML

<script type="text/javascript" src="http://dl.dropbox.com/u/63305355/raphael-min.js"></script>
<div id="canvas">
    <div class="text">
        EASING
        <div id="result"></div>
    </div>
</div>

CSS

body,html
{
    height:100%;
    margin:0;
}

#canvas 
{
    height:99%;
    background:#ccc;
    text-align:center;
}

.text{
    letter-spacing: 20px;
    color:#fff;
    font-size:150%;
    position:absolute;
    width:"100%"
    text-align:center;
    top:10%;
    right:10%;
    z-index:1;
}
#result{
    font-size:60%;
    letter-spacing: 5px;
}
input{
    padding:3px;
}

JavaScript

var paper;

window.onload = function(){
    paper = Raphael(0,0,"100%","100%");
    
    myElement(20,"linear"); //一定の速度
    myElement(70,">"); //逃げ切りタイプ
    myElement(120,"<"); //スパートがすごい
    myElement(170,"<>"); //中だるみ
    myElement(220,"backIn"); //貯めてビュン
    myElement(270,"backOut"); //おっとっと行き過ぎた
    myElement(320,"elastic"); //ぽよよん！
    myElement(370,"bounce"); //ぴんぽん！
    
}

    function myElement(value,easing){
        var obj = paper.circle(20,value,20)
                    　.attr({fill:"90-#804-#202-#305"});
        paper.text(20,value,easing)
                    .attr({fill:"#fff"});
        obj.click(move);
        function move(){
            obj.animate({cx:200},1000,easing,reverse);
        }
        function reverse(){
            obj.animate({cx:20},1000,easing);
        }
    }