s = 0.5 * a * Math.pow(t,2),关于js动画，从一个公式说起

s = 0.5 * a* t*t

上边这个是高中物理课本关于位移的计算公式，位移等于二分之一乘以a乘以t的平方，a是加速度，t是运动进行的时间（当然啦，初速度为0）。下面我们会应用这个公式完成一个js的加速动画。

我们现在假定以某个div的top值为动画的应用属性，也就是我们的动画过程中始终修改的是div.style.top的值。

这里，我们规定每次动画的时间间隔为 1000 / 60，这个时间是每秒60帧的刷新间隔，以达到人眼注视下能流畅运行动画的一个阈值。

然后我们规定此动画执行时间为t（ms)，位移距离为s(px)，则在某个时刻的位移公式，可由以下函数推导而出：

function getPosition( timeNow ){
        /*
        *  s = 1/2 * a * t*t
        */
        let countTime = t;

        let a = (2 *s )/ (countTime*countTime);

        return 0.5 * a * Math.pow( timeNow,2);
    }

解释：利用位移公式反推a，然后用当前时刻的时间，计算出当前时间的位移。

完整代码和例子可以看下面:

实例

<style>
    #test{
        position:absolute;
        top: 0;
        left:0;
        width: 75px;
        height: 75px;
        background: black;
    }
</style>
<div id="test"></div>
<script>
    
    let gap = 1000 / 60;
    let s = 500;
    let t = 200;
    animate(test,'top');
    function animate(el,prop){
        let time = 0;
        let position = getPosition(time);
        time += gap
        if( time !== t ){
            move();
        }else{

        }

        function move(){
            el.style[prop] = position + 'px';
            position = getPosition(time);
            time += gap;
            if( time > t){
                time = t;
            }
            if( time !== t ){
                setTimeout(function(){
                    move();
                },gap)
            }else{

                position = getPosition(time);
                el.style[prop] = position + 'px';
                
            }

        }
    }

    function getPosition( timeNow ){
        /*
        *  s = 1/2 * a * t*t
        */
        let countTime = t;

        let a = (2 *s )/ (countTime*countTime);

        return 0.5 * a * Math.pow( timeNow,2);
    }
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例