第一百四十五節，JavaScript，同步動畫

JavaScript，同步動畫

 

將上一節的，移動透明動畫，修改爲能夠支持同步動畫，也就是能夠給這個動畫方法多個動畫任務，讓它同時完成

 

原理：

 

向方法裏添加一個屬性，這個屬性是一個對象，同步動畫屬性，屬性值爲對象，對象裏面是，動畫方式:目標量，組合的鍵值對，只能動畫方式加目標量的鍵值對

 

/** yi_dong_tou_ming()方法，動態改變css屬性說明
 * * yi_dong_tou_ming()方法，將一個元素，進行一下動畫操做
 * 1，x將元素橫向左移動或者右移動
 * 2, y將元素豎向上移動或者下移動
 * 3，w將元素動畫增長或者減小寬度
 * 4，h將元素動畫增長或者減小高度
 * 5，o將元素動畫增長或者減小透明度
 * 注意：也能夠寫其餘css屬性名稱（全稱），來動畫增長或者減小css屬性的數值，必須是值爲數值的css屬性，如：font-size
 * *************************************
 *  x將元素橫向左移動或者右移動，首先將目標設置定位，position:absolute;
 *  o將元素動畫增長或者減小透明度，結合css裏元素原始透明度filter: alpha(opacity=0);opacity: 0;
 *  *************************************
 *  yi_dong_tou_ming()方法，參數說明
 *  參數是一個對象以下
 *  yi_dong_tou_ming({
            'attr':'x',        【爲動畫方式】，   x.爲橫向移動，y.爲豎向移動，w.爲增長寬度動畫，h.爲增長高度動畫，o.爲透明度動畫，【必填】
                                                  注意：也能夠寫其餘css屬性名稱（全稱），來動畫增長或者減小css屬性的數值，必須是值爲數值的css屬性，如：font-size
                                                  o.爲透明度動畫,設置透明度動畫時，必須先在css裏設置初始透明度如：opacity:1;filter:alpha(opacity=100);
                                                  不然IE9如下沒法實現透明度動畫

            'type':'1',        【動畫模式】，     0.勻速模式，1.緩衝模式【可選，默認緩衝】
            'speed':6,         【緩衝速度】，     動畫模式爲緩衝時設置，【可選，默認爲6】,以此值改變跨度.每一次動畫動態增長或者減小，實現緩衝效果

            'start':50,        【動畫起始位置】， 起始的像素或者透明度【可選，默認爲對象原始位置】通常不須要傳
                                                  注意：動畫起始位置，通常按鈕動畫使用，若是是鼠標觸動動畫，會不停的初始化，由於鼠標一動就改變了動畫起始位置

            'target':100,      【目標量】，       就是在原始的像素或者透明度上，增長或者減小到目標量的像素或者透明度【可先，注意目標量不填，增量必填】
            'alter':50,        【增量】，         就是在對象原始的像素或者透明度上，增長或者減小像素或者透明度【可先，注意增量不填，目標量必填】
            'step':7,          【跨度】，         每一次動畫增長或者減小的，像素或者透明度,【可選，默認20】
            'danwei':'em',     【屬性值單位】     danwei.爲屬性值單位，也就是以什麼單位來計算css屬性，如是px仍是em等，不傳默認px
            't':50 ,           【每次動畫時間】， 也就是多少毫秒執行一次動畫【可選，默認10】
            fn:function () {   【回調函數，列隊】， 回調函數，用於動畫執行完畢後執行函數，在回調函數裏在寫入動畫，就是列隊動畫，也就是一個動畫執行完畢後執行第二個動畫

            }
            mul:{ 【同步動畫對象】，用於同時要執行多個動畫，同步動畫屬性，屬性值爲對象，對象裏面是，動畫方式:目標量，組合的鍵值對，只能動畫方式加目標量的鍵值對 同步動畫，除了動畫方式和目標量外，其餘的都是在同步動畫對象外設置，由於他們是統一的其餘參數 'w':101, 'h':500, 'o':30 }
        });
 **/
feng_zhuang_ku.prototype.yi_dong_tou_ming = function (obj) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        var element = this.jie_dian[i];
         // attr，爲動畫方式，
         // x.爲橫向移動
         // y.爲豎向移動
         // w.爲增長寬度動畫
         // h.爲增長高度動畫
         // o.爲透明度動畫
        var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' :
            obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' :
                obj['attr'] == 'o' ? 'opacity' : obj['attr'] != undefined ? obj['attr'] : 'left';

        // start.爲動畫起始位置，
        // 若是輸入了動畫起始位置，值就爲輸入的起始位置，移動動畫是像素值（如100），透明度動畫是透明度百分比（如50）
        // 若是沒輸入，默認移動動畫獲取的對象原始像素位置，透明度動畫獲取的對象原始透明度，除以100等於原始透明度百分比
        var start = obj['start'] != undefined ? obj['start'] :
            attr == 'opacity' ? parseFloat(getStyle(element, attr)) * 100 :
                parseInt(getStyle(element, attr));

         // t.爲每次動畫時間，也就是多少毫秒執行一次動畫
         // 不傳默認，是10毫秒執行一次動畫
        var t = obj['t'] != undefined ? obj['t'] : 10;

         // step.爲跨度，每一次動畫增長或者減小的，像素或者透明度
        var step = obj['step'] != undefined ? obj['step'] : 20;

        // danwei.爲屬性值單位，也就是以什麼單位來計算css屬性，如是px仍是em等，不傳默認px
        var danwei = obj['danwei'] != undefined ? obj['danwei'] : 'px';

         // alter.爲增量，就是在對象原始的像素或者透明度上，增長或者減小像素或者透明度
        var alter = obj['alter'];

         // target.爲目標量，就是在原始的像素或者透明度上，增長或者減小到目標量的像素或者透明度
         // 注意，增量，是在原始上增長或者減小多少，目標量是在原始的基礎上增長或者減小到目標
        var target = obj['target'];

        //mul,接收的，obj對象裏的mul屬性，而mul屬性是一個對象，由動畫方式加目標量組合的鍵值對，也就是要同步動畫的參數
        var mul = obj['mul'];    //接收同步動畫（參數對象）

         // speed.爲緩衝速度，動畫模式爲緩衝時，以此值改變step.每一次動畫動態增長或者減小，實現緩衝效果
         // 不傳，默認爲6
        var speed = obj['speed'] != undefined ? obj['speed'] : 6;

         // type.爲動畫模式，勻速爲勻速模式，緩衝爲緩衝模式
         // 不傳，默認爲緩衝模式
        var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer';

        if (alter != undefined && target == undefined) {
            target = alter + start;
        } else if (alter == undefined && target == undefined && mul == undefined) {
            throw new Error('alter增量，或target目標量，或者同步動畫對象，必須傳一個！');
        }
        if (start > target) step = -step;
        if (attr == 'opacity') {
            element.style.opacity = parseInt(start) / 100;
            element.style.filter = 'alpha(opacity=' + parseInt(start) + ')';
        } else {
            element.style[attr] = start + danwei;
        }

        if (mul == undefined){      //判斷若是同步動畫對象沒有傳，說明是單個動畫
            mul = {};               //建立mul對象
            mul[attr] = target;     //將單個動畫的，動畫方式看成對象鍵，將目標量看成值，組合成鍵值對到對象裏
 }

        clearInterval(element.timer);                            //給對每一個象建立定時器並中止定時器
        element.timer = setInterval(function () {               //將對象下的定時器開啓
            //建立一個布爾值，這個值能夠了解對個動畫是否執行完畢
            var flag = true;    //表示都執行完畢了

            //循環同步動畫對象
            for (var i in mul) {
                attr = i == 'x' ? 'left' : i == 'y' ? 'top' :
                    i == 'w' ? 'width' : i == 'h' ? 'height' :
                        i == 'o' ? 'opacity' : i != undefined ? i : 'left';            //獲得同步動畫對象裏的，動畫方式
                target = mul[i];                                                       //獲得同步動畫對象裏的，目標量

                if (type == 'buffer') {
                    step = attr == 'opacity' ? (target - parseFloat(getStyle(element, attr)) * 100) / speed :
                    (target - parseInt(getStyle(element, attr))) / speed;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                }
                if (attr == 'opacity') {
                    if (step == 0) {
                        setOpacity();
                    } else if (step > 0 && Math.abs(parseFloat(getStyle(element, attr)) * 100 - target) <= step) {
                        setOpacity();
                    } else if (step < 0 && (parseFloat(getStyle(element, attr)) * 100 - target) <= Math.abs(step)) {
                        setOpacity();
                    } else {
                        var temp = parseFloat(getStyle(element, attr)) * 100;
                        element.style.opacity = parseInt(temp + step) / 100;
                        element.style.filter = 'alpha(opacity=' + parseInt(temp + step) + ')';
                    }
                    //判斷目標值不等於元素當前值，說明動畫還沒到達目標值，將flag修改爲false
                    if (parseInt(target) !=  parseInt(parseFloat(getStyle(element, attr)) * 100)) flag = false;
                } else {
                    if (step == 0) {
                        setTarget();
                    } else if (step > 0 && Math.abs(parseInt(getStyle(element, attr)) - target) <= step) {
                        setTarget();
                    } else if (step < 0 && (parseInt(getStyle(element, attr)) - target) <= Math.abs(step)) {
                        setTarget();
                    } else {
                        element.style[attr] = parseInt(getStyle(element, attr)) + step + danwei;
                    }
                    //判斷目標值不等於元素當前值，說明動畫還沒到達目標值，將flag修改爲false
                    if (parseInt(target) != parseInt(getStyle(element, attr))) flag = false;
                }
            }
            //判斷flag = true;了說明元素的當前值已經達到目標值，能夠中止定時器了
            if (flag) {
                clearInterval(element.timer);       //中止定時器
                if (obj.fn != undefined)obj.fn();   //判斷若是傳入了回調函數，動畫執行完畢後執行回調函數,列隊動畫
 }
        }, t);
        function setTarget() {
            element.style[attr] = target + danwei;
        }
        function setOpacity() {
            element.style.opacity = parseInt(target) / 100;
            element.style.filter = 'alpha(opacity=' + parseInt(target) + ')';
        }
    }
    return this;
};

 

html代碼

<div id="ceshsdf">測試</div>

css代碼

/*測試*/
#ceshsdf{
    width:100px;
    height: 100px;
    background-color: #ff340e;
    position: absolute;
    top: 100px;
    left: 100px;
    opacity:1;
    filter:alpha(opacity=100);
}

前臺js代碼

//測試
    $('#ceshsdf').on_click(function () {
        $('#ceshsdf').yi_dong_tou_ming({
            't':30,
            'step':10,
            mul:{      //同步動畫屬性，屬性值爲對象，對象裏面是，動畫方式:目標量，組合的鍵值對，只能動畫方式加目標量的鍵值對
                'w':500,
                'h':500,
                'o':30
            }
        });
    });

首先要引入函數庫和封裝庫文件