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