Javascript 完美运动框架——逐行分析代码，让你轻松了解运动的原理

2024-04-27 14:14:31

字体：大中小

来源：转载

供稿：网友

javascript 完美运动框架——逐行分析代码，让你轻松了解运动的原理

大家一听这名字就知道，有了这套框架网上的效果基本都是可以实现的。实际上之前的运动框架还是有局限性的，就是不能让好几个值一块运动。

那这个问题怎么解决呢？我们先来看看之前的运动框架

function getStyle(obj, name) {    if (obj.currentStyle) {        return obj.currentStyle[name];    } else {        return getComputedStyle(obj, null)[name];    }}function startMove(obj, attr, iTarget) {    clearInterval(obj.time);    obj.time = setInterval(function() {        var cur = 0;        if (attr == 'opacity') {            cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);        } else {            cur = parseInt(getStyle(obj, attr));        }        var speed = (iTarget - cur) / 6;        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);        if (cur == iTarget) {            clearInterval(obj.time);        } else {            if (attr == 'opacity') {                obj.style.filter = 'alpha(opacity=' + cur + speed + ')';                obj.style.opacity = (cur + speed) / 100;            } else {                obj.style[attr] = cur + speed + 'px';            }        }    }, 30);}

怎么修改呢？实际上很简单，在过去的框架中，你每一次只能传一个样式，和一个值。那么现在把这些改成一个json对象。相信大家就明白了。

我们调用的时候就是startMove(oDiv,{width:200,height:200}); 如果需要的话就在加上回调函数。那么我们具体看看代码是怎么修改的。

function startMove(obj, json, fnEnd){    var MAX=18;    //每次调用就只有一个定时器在工作(开始运动时关闭已有定时器)    //并且关闭或者开启都是当前物体的定时器，已防止与页面上其他定时器的冲突，使每个定时器都互不干扰     clearInterval(obj.timer);     obj.timer=setInterval(function (){                var bStop=true; // 假设：所有的值都已经到了                for(var name in json)        {            var iTarget=json[name];  // 目标点                        //处理透明度，不能使用parseInt否则就为0了                         if(name=='opacity')            {                                // *100 会有误差 0000007 之类的 所以要用 Math.round() 会四舍五入                var cur=Math.round(parseFloat(getStyle(obj, name))*100);             }            else            {                var cur=parseInt(getStyle(obj, name));  // cur 当前移动的数值            }                        var speed=(iTarget-cur)/5;  // 物体运动的速度 数字越小动的越慢  /5 : 自定义的数字                        speed=speed>0?Math.ceil(speed):Math.floor(speed);                        if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;                        if(name=='opacity')            {                obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE                obj.style.opacity=(cur+speed)/100; //ff Chrome            }            else            {                obj.style[name]=cur+speed+'px';            }                        // 某个值不等于目标点             if(cur!=iTarget)            {                bStop=false;            }        }                // 都达到了目标点        if(bStop)        {            clearInterval(obj.timer);                        if(fnEnd) //只有传了这个函数才去调用            {                fnEnd();            }        }    }, 20);}

为什么会有bstop的假设呢？