纯js写“运动”框架

所谓“运动”不一定真的是运动，在连续的一段时间内改变某一样式都可以成为“运动”。

先写几个会用到的函数

//获取某一元素的指定样式
function getstyle (element, target) {
        // body...
        if (element.currentStyle) {
            return element.currentStyle[target];
        }else{
            return window.getComputedStyle(element, null)[target];
        }
    }

//填充digits长度的十六进制数
    function zero_fill_hex(num, digits) {
        var s = num.toString(16);
        while (s.length < digits)
            s = "0" + s;
        return s;
    }

        //rgb颜色转成十六进制颜色
    function rgb2hex(rgb) {

        if (rgb.charAt(0) == '#')
        return rgb;

        var ds = rgb.split(/\D+/);
        var decimal = Number(ds[1]) * 65536 + Number(ds[2]) * 256 + Number(ds[3]);
        return "#" + zero_fill_hex(decimal, 6);
    }

最后是“运动”框架部分

/*
    *在连续时间内改变某一样式（运动框架）
    *@element 要改变样式的元素
    *@target 要改变的样式
    *@end 目标样式最终的值
    *@speed 改变的速度
    *@flag 是否变速改变，true为变速，false为匀速
    */
    function changeStyle (element, target, end, speed, flag) {
        // body...
        if(target.indexOf("color") != -1){
            var begin = $$.getStyle(element, target)+"";
            begin = rgb2hex(begin).replace(/#/, '');
            end = end.replace(/#/, '');
            speed = Math.ceil(Math.abs(parseInt(begin, 16)-parseInt(end, 16))/speed);

            clearInterval(element[target+"Timer"]);
            element[target+"Timer"] = setInterval(function(){
                var intBegin = parseInt(begin, 16);
                var intEnd = parseInt(end, 16);
                speed = intEnd > intBegin ? Math.abs(speed) : (-Math.abs(speed));

                if (Math.abs(intBegin-intEnd) <= Math.abs(speed)) {
                    clearInterval(element[target+"Timer"]);
                    element.style[target] = '#'+end;
                }else {
                    var sum = intBegin + speed
                    begin = sum.toString(16);
                    element.style[target] = '#' + zero_fill_hex(begin, 6);
                }
            }, 30);
        }
        else if (target == "opacity") {
            var begin = $$.getStyle(element, target)+"";
            clearInterval(element[target+"Timer"]);
            element[target+"Timer"] = setInterval(function(){
                if (Math.abs(begin-end) <= Math.abs(speed)){
                    clearInterval(element[target+"Timer"]);
                    element.style.opacity = end;
                }else{
                    begin = begin*1.0 + speed;
                    element.style.opacity = begin;
                }
            }, 30);
        }else{
            var begin = $$.getStyle(element, target)+"";
            console.log("begin--- "+begin);
            begin = begin.replace(/px/g, '');
            clearInterval(element[target+"Timer"]);
            element[target+"Timer"] = setInterval(function(){
                var realSpeed = Math.abs(end-begin)/speed;
                realSpeed = realSpeed > 0 ? Math.ceil(realSpeed) : Math.floor(realSpeed);

                if (Math.abs(begin-end) <= Math.abs(realSpeed)){
                    clearInterval(element[target+"Timer"]);
                    element.style[target] = end + "px";
                }else{
                    if (flag)
                        begin = begin*1.0 + realSpeed;
                    else
                        begin = begin*1.0 + speed;
                    element.style[target] = begin + "px";
                    console.log(target+"  "+begin+"  "+realSpeed);
                }
            }, 30);
        }
    }