js-变速函数

一.变速函数

step=(目标值-走的路程)/10;
重点：当step为小数时，进行取整，正数向上取整，负数向下取整

 function animate(element, target) {
        //第一步，清除定时器
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            //获取当前元素的当前位置
            var current = element.offsetLeft;
            //确定每一次走多少步
            var step = (target - current) / 10;//有正负
            //step 取整
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //走完一次后，当前位置发生改变
            current += step;
            element.style.left = current + 'px';
            //判断否到当前位置
            if (target == current) {
                //清除定时器
                clearInterval(element.timeId);
            }
            //测试代码：
            console.log("目标位置：" + target + ",当前位置：" + current + ",每次移动的步数" + step);
        }, 20);
    }

二.通过变速函数进行属性的添加

属性数字值的获取，即为初始值，随即通过step进行增加

 //  function move(element,attr,target){
        //      clearInterval(timer)
        //      var timer = setInterval(function(){
        //     var current =parseInt(getStyle(element,attr));//获取数字类型的属性

        //      //设置步长 表示一步动作的差值
        //      //通过比较element当前的current值和target值的大小，来确定平移方向
        //     var step = (target - current) / 10;
        //     step=step>0 ? Math.ceil(step):Math.floor(step);
        //     //向上取整变大，向下取整变小
         
               
        //     //如果目标值大于当前的current值，step为正数，向右移动
        //      //如果目标值小于当前的current值，step为负数，向左移动
        //     current += step;
        //     element.style[attr]=current+"px";

        //      //判断停止动画
        //      //比较差值，取绝对值，当两者的差值小于了步进值时，停止动画，
        //      //if(Math.abs(target - left) <= Math.abs(step)){//
        //     if(target==current){
        //     //因为通过取整，当目标值target为400，left值为391时，每次step通过取整将会向上取整为1；
        //     //即step==1,每次将走一步，直到等于target目标值，清除定时器，停止移动
        //         clearInterval(timer);          
        //     }    
        //     console.log("目标位置："+target+"当前位置:"+current+",每天移动的步数")
        //    },60);
        // } 

三.变速运动添加多个属性

可通过json来存储多个属性值，再通过for–in循环进行，每个属性的操作

 function animate(element, json, fn) {
        //第一步，清除定时器
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            var flag = true;//默认所有的属性达到目标值
            for (var attr in json) {
                //获取当前元素的attr这个属性的属性值
                var current = parseInt(getStyle(element, attr));//获取数字类型，进行运算=================
                //确定每一次走多少步
                var step = (json[attr] - current) / 10;//有正负
                //step 取整
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //走完一次后，当前位置发生改变
                current += step;
                element.style[attr] = current + 'px';//========================
                //判断否到当前位置
                if (json[attr] != current) {
                    flag = false;
                }
            }
            if (flag) {
                //清除定时器
                clearInterval(element.timeId);
                if (fn) {
                    fn();
                }
            }
            //测试代码：
            console.log("目标位置：" + json[attr] + ",当前位置：" + current + ",每次移动的步数" + step);
        }, 20);
    }