JS 实现抛物线运动

JS实现简单的抛物线动画，需要的童鞋可以参考下

<div class="content">    <div class="slider">         <div class="icon">             <span class="fa fa-circle" id="cart" ></span>            </div>     </div></div>

<script>   // x = 100,y = 400,h = 2000ms    (function () {     var x = 100, y = 200     var $cart = document.querySelector('#cart')     // 距离底部的位置     var offsetBottom = document.documentElement.clientHeight              - $cart.offsetParent.offsetTop              - $cart.offsetHeight     var xh =500, yh=offsetBottom,p = xh * xh / (-2 * yh)      function flicker(){       // 抛物线公式：x2=-2py       // x 可以控制速度       x -= 5       y = (x * x) / (-2 * p)       $cart.style.transform = "translate("+ x +"px, "+ y +"px)"       if (x  > -xh) {          requestAnimationFrame(flicker);       } else {         $cart.style.transform = "translate(0px, 0px)"       }     }     flicker()    })()   </script>