SVG 实现的类弹性小球

<script type="text/javascript">
      /**
       *计算小球弹起距离，nl = 0.8 *l;
       */
      function bounceDistance(isfall){
           var fall= document.getElementById("fall");
           var up= document.getElementById("up");
           var fallparam={from:parseInt(fall.getAttribute("from")),to:parseInt(fall.getAttribute("to"))};
           var upparam={from:parseInt(up.getAttribute("from")),to:parseInt(up.getAttribute("to"))};
           var time=parseFloat(fall.getAttribute("dur"));
          // console.log(fallparam);
           //console.log(upparam); 
          
           if(isfall){//设定弹起高度
               var max = fallparam.to - fallparam.from;
               var nh = max*0.8;
               up.setAttribute("to",upparam.from-nh);
               fall.setAttribute("from",upparam.from-nh);
              
           }else{
               // up.setAttribute("dur",time*0.99+"s");
               // fall.setAttribute("dur",time*0.99+"s");
               // console.log(parseFloat(fall.getAttribute("dur")));
           }
          
          
      }
 </script>
<svg width="500"  height="500">
 
  <circle cx="225" cy="30" r="25" style="stroke: none; fill: #0000ff;">
    <animate id="fall" attributeName="cy" attributeType="XML"
             from="30"  to="470 "
             begin="0s;up.end" dur="1s"
             fill="freeze"
             repeatCount="" οnend="bounceDistance(true);"/>
    <animate id="up" attributeName="cy" attributeType="XML"
             from="470"  to="30"
             begin="fall.end" dur="1s"
             fill="freeze" 
             repeatCount="" οnend="bounceDistance(false);"/>
    </circle>
</svg>