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);
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值