JS缓动动画

JS的缓动动画的实现，就是通过一个公式来实现的：

begin = begin + (end - begin) * 0.2;

这个公式里面，begin就是动画开始的位置，end就是动画结束的位置，0.2就是个缓动系数，不是固定值，不超过1就行，系数越大，动画运动就越快，这个看着貌似挺高大上，其实没啥，就是控制了begin等于end的速度，它的终止条件就是beng===end，放一个实例：

<script>
    window.onload = function () {
        // 1. 获取广告头部的高度
        var offset_top = $('aside').offsetTop;

        // 2. 监听窗口的滚动
        var begin = 0, end = 0, timer = null;
        window.onscroll = function () {
            // 2.0 清除定时器
            clearInterval(timer);

            // 2.1 获取滚动的高度
            var scroll_top = scroll().top;
            end = offset_top + scroll_top;

            // 2.2 缓动动画
            timer = setInterval(function () {
                 begin = begin + (end - begin) * 0.2;
                 $("aside").style.top = begin + "px";

                console.log(begin, end);
                // 清除定时器
                if(Math.round(begin) === end){
                    clearInterval(timer);
                }

            }, 20);
        }
    }
</script>