Javascript 完美运动框架——逐行分析代码,让你轻

页面导航:首页 > 网络编程 > JavaScript > Javascript 完美运动框架——逐行分析代码,让你轻

Javascript 完美运动框架——逐行分析代码,让你轻

来源: 作者: 时间:2016-02-03 09:20 【

大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的。实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动。那这个问题怎么解决呢? 我们先来看看

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

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

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的假设呢?

其实如果我这样调用startMove(oDiv,{width:101,height:200}); 宽度变成101 已经完成运动了,高度没有到, 但是我们可能已经关闭了当前的定时器。运动已经结束了,就会出现一个特殊情况下的bug。解释一下:

实际上来说,需要所有的运动都到了才关闭定时器,反过来说,如果没有不到的,那就关闭。在程序上就是定义一个布尔值,一开始为true,假设

所有的值都已经到了,如果说有一个值不等于目标点,bstop为false 。 在整个循环结束后,bstop 为ture 就说明所有运动都完成了,这个时候就关闭定时器。

那么这个运动框架基本已经完成了,适用css2 不适用css3。

总结:

运动框架的演变过程

startMove(iTarget) 运动框架

startMove(obj,iTarget) 多物体

startMove(obj,attr,iTarget) 任意值

startMove(obj,attr,iTarget,fn) 链式运动

startMove(obj,json,fn) 完美运动

O(∩_∩)O谢谢 ~

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<