JS封装一个时间型运动函数

 <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

<div class="box"></div>

  //时间型运动函数
        //参数:总时间,时序函数,回调函数
        //思路:总时间/总路程=已将过去的时间/已经走过的路程
        function animate(duration, timFunction, callback) {
            var startime = Date.now()
            requestAnimationFrame(function move() {
                var endtime = Date.now()
                var bit = (endtime - startime) / duration
                if (bit > 1) {
                    bit = 1
                }
                //利用时序函数扭曲比例,呈现不一样的动画
                bit = timFunction(bit);
                callback(bit);
                if (bit < 1) {
                    requestAnimationFrame(move)//递归调用
                }
            })
        }


        //时序函数
        function bounce(bite) {
            for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
                if (bite >= (7 - 4 * a) / 11) {
                    return -Math.pow((11 - 6 * a - 11 * bite) / 4, 2) + Math.pow(b, 2);
                }
            }
        }

        //逆转变形时序函数
        function makeReverse(timingFunction) {
            return function (bite) {
                return 1 - timingFunction(1 - bite);
            }
        }




        //注意:调用此运动函数目标值是用对象来储存的,这就是回调函数的作用
        var box = document.querySelector('.box');
        box.onclick = function () {
            animate(800, makeReverse(bounce), function (bit) {
                box.style.height = 100+(300 * bit)+ 'px';
                box.style.width = 100 + (300 * bit) + 'px';
                box.style.opacity = 1 - (0.8 * bit);
            })
        }