原生JS运动框架
发布在DOM效果2014年4月1日view:6451
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

  和大家分享一个原生的运动框架,当然这货肯定不是我想出来的(blue老师教的),事先声明一下。下面的框架,我加了参数过滤,略微完善了该运动框架,是今天刚发现的问题,和大家一块儿学习下。

/// <summary>
/// 运动框架,支持匀速、缓冲,加速等运动
/// </summary>
/// <param name="obj"> 需要移动的对象 </param>
/// <param name="json"> 参数 </param>
/// <param name="options"> 自定义设置 </param>
function startMove(obj, json, options) {
    options = options || {};
    options.time = options.time || 3000;
    options.type = options.type || "linear";

    var count = parseInt(options.time / 30);
    var n = 0;

    var start = {};
    var distance = {};
    json = formatStyleName(json);

    for (var name in json) {
        if (name == "opacity") {
            start[name] = parseInt(100 * Math.round(getStyle(obj, "opacity")));
        } else {
            start[name] = parseInt(getStyle(obj, name));
        }
        //解决属性在CSS中未赋值的问题,像默认的 auto 等
        if (isNaN(start[name]))
        {
            var initParams = {
                'left': obj.offsetLeft,
                'top': obj.offsetTop,
                'width': obj.offsetWidth,
                'height': obj.offsetHeight,
                'margin': 0,
                'marginLeft': 0,
                'marginTop': 0,
                'marginRight': 0,
                'marginBottom': 0,
                'padding': 0,
                'paddingLeft': 0,
                'paddingTop': 0,
                'paddingRight': 0,
                'paddingBottom': 0,
                'borderWidth': 0,
                'borderLeftWidth': 0,
                'borderRightWidth': 0,
                'borderTopWidth': 0,
                'borderBottomWidth': 0,
                'opacity': 100,
                'zIndex': 0
            }
            start[name] = initParams[name] || 0;  //当initParams中没有匹配的属性时,可以做错误处理,直接抛出异常
        }
        distance[name] = json[name] - start[name];
    }

    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        n++;
        for (var name in json) {
            switch (options.type) {
                case "linear":
                    var cur = start[name] + n * distance[name] / count;
                    break;
                case "buffer":
                    var a = 1 - n / count;
                    var cur = start[name] + distance[name] * (1 - a * a * a);
                    break;
                case "speed":
                    var a = n / count;
                    var cur = start[name] + distance[name] * a * a * a;
                    break;
            }
            if (name == "opacity") {
                obj.style.filter = "alpha(opacity:" + cur + ")";
                obj.style.opacity = cur / 100;
            } else {
                obj.style[name] = cur + "px";
            }
        }
        if (n == count) {
            clearInterval(obj.timer);
            options.end && options.end();
        }
    }, 30);
}

/// <summary>
/// 格式化参数中的属性
/// </summary>
/// <param name="json"> </param>
function formatStyleName(json) {
    for (var name in json) {
        var attr = transformStyleName(name);
        if (attr != name) {
            json[attr] = json[name];
            delete json[name];
        }
    }
    return json;
}

/// <summary>
/// 将CSS属性转换成JS中的属性,即将类似 "margin-left" 的属性转换成 "marginLeft"
/// </summary>
/// <param name="name"> 属性名称 </param>
function transformStyleName(name) {
    if (name == "float") {
        return obj.currentStyle ? "styleFloat" : "cssFloat";
    } else if (name.indexOf("-") > -1) {
        name = name.replace(/-(\w)/, function () {
            return arguments[1].toUpperCase();
        });
    }
    return name;
}

/// <summary>
/// 取属性所对应的样式值
/// </summary>
/// <param name="name"> 属性名称 </param>
function getStyle(obj, name) {
    name = transformStyleName(name);
    return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, false)[name];
}

使用方法:

window.onload = function(){
    var oDiv1 = document.getElementById("div1");
    startMove(oDiv1, {"left" : 500}, {time : 4000, type : "buffer"});
}

有几个需要注意的地方:

1、getStyle()中,obj.currentStyle[name] 这个是兼容IE的,getComputedStyle(obj,false)[name] 这个是兼容 FF 和 Chrome 的,name一定是JS中的style属性才能够兼容,像 “marginLeft” 这种;

2、JS 的 style 属性中,float 是比较特殊的,IE 中是这样取:obj.style.styleFloat,其他浏览器是这样取:obj.style.cssFloat;
    剩下的,对于没有中划线的css属性一般直接使用style.属性名即可,对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写;

3、getStyle()中,第一句 name = transformStyleName(name); 在这个例子中是多余的,因为传入的 name 是已经格式化好的,在项目中用的时候,最好是加上,因为其他地方可能直接调用;

4、getStyle()中的代码可以利用惰性载入的技巧进行改进,只在第一次调用的时候判断:

function getStyle(obj, name) {
    if (obj.currentStyle) {
        getStyle = function (obj, name) {
            name = transformStyleName(name);
            return obj.currentStyle[name];
        }
    } else {
        getStyle = function (obj, name) {
            name = transformStyleName(name);
            return getComputedStyle(obj, false)[name]
        }
    }
    return getStyle(obj, name);
}

5、三种运动方式:
5.1、匀速运动,这个没什么好说的吧;
5.2、加速运动,加速度越来越大,这个可以通过数学知识推出来
第一象限中,0<=x<=1,y=x² 或者三次方/四次方,或者其他斜率不断变大公式;
5.3、减速运动/缓冲运动,同5.2中的原理;

* 2014/04/01 添加(下面一条不是愚人节玩笑,是真的)
6、上面代码中的定时器用的是 setInterval(),这个会存在隐藏的bug,执行的次数可能会少于预想次数,导致元素到不了目标位置(产生的原因是JavaScript引擎对定时器的解析方式)。可以用链式 setTimeout() 来解决该隐藏bug;

*缺乏专业术语,导致很多意思说的不是很明白,大家见谅吧;
*可以根据上面的六条对运动框架再做一次升级,这儿我就不发改后的了;
*太容易得到的东西最可能不会珍惜;
*不要相信我所说的话以及代码,一定要亲自实践。实践是检验真理的唯一标准,包括在网上看到的所有文章,不要轻易相信,实践出真理。
像很多关于JS优化的文章,都会提 for(var i=0; i< arr.length, i++){ …… },要把 arr.length 先取出来,优化的效果真的有那么明显么?
还有什么字符串拼接尽量用数组代替,因为这样效率高;在C#这种高级语言中,思路是完全没有问题的(C#中的StringBuilder),但在JS中,真的适用吗?

评论
发表评论
5年前

@lwbjing 这种注释是从C#那边模仿过来的,感觉这种注释的方式比较清晰。ps:我是搞ASP.NET的。

5年前

头部这注释的方式跟我的后端一样啊。。

WRITTEN BY
蛋蛋超人
向钱看 向厚赚 一切都与钱相关!追求卓越 成功会在不经意间追上你!追寻自由,活得更自私些!
TA的新浪微博
PUBLISHED IN
DOM效果

如专栏名称所示,各种DOM效果

我的收藏