第一百四十四節，JavaScript，列隊動畫

時間 2019-11-12

標籤第一百四十四 javascript 列隊動畫欄目 JavaScript 简体版

原文原文鏈接

JavaScript，列隊動畫css

將上一節的，移動透明動畫，修改爲能夠支持列隊，也就是能夠給這個動畫方法多個動畫任務，讓它完成一個動畫任務後，在執行第二個動畫任務html

原理：函數

就是在原有的動畫方法里加一個回調函數，當動畫執行完畢後執行回調函數，再在回調函數裏寫入動畫任務去執行，實現列隊動畫動畫

/** yi_dong_tou_ming()方法，說明
 * * yi_dong_tou_ming()方法，將一個元素，進行一下動畫操做
 * 1，x將元素橫向左移動或者右移動
 * 2, y將元素豎向上移動或者下移動
 * 3，w將元素動畫增長或者減小寬度
 * 4，h將元素動畫增長或者減小高度
 * 5，o將元素動畫增長或者減小透明度
 * *************************************
 *  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.爲透明度動畫，【必填】
            'type':'1',        【動畫模式】，     0.勻速模式，1.緩衝模式【可選，默認緩衝】
            'speed':6,         【緩衝速度】，     動畫模式爲緩衝時設置，【可選，默認爲6】,以此值改變跨度.每一次動畫動態增長或者減小，實現緩衝效果

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

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

            }
        });
 **/
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' : '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;

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

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

         // 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) {
            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 + 'px';
        }
        clearInterval(element.timer);                            //給對每一個象建立定時器並中止定時器
        element.timer = setInterval(function () {               //將對象下的定時器開啓
            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) + ')';
                }
            } 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 + 'px';
                }
            }
            //document.getElementById('aaa').innerHTML += step + '<br />';
        }, t);
        function setTarget() {
            element.style[attr] = target + 'px';
            clearInterval(element.timer);
            if (obj.fn != undefined)obj.fn();   //判斷若是傳入了回調函數，動畫執行完畢後執行回調函數
        }
        function setOpacity() {
            element.style.opacity = parseInt(target) / 100;
            element.style.filter = 'alpha(opacity=' + parseInt(target) + ')';
            clearInterval(element.timer);
            if (obj.fn != undefined)obj.fn();    //判斷若是傳入了回調函數，動畫執行完畢後執行回調函數
        }
    }
    return this;
};

html代碼ui

<div id="liedui">列隊動畫</div>

css代碼this

#liedui{
    width: 100px;
    height: 100px;
    background-color: #ff340e;
    position: absolute;
    top: 100px;
    left: 100px;
}

前臺js代碼spa

//列隊動畫
    $('#liedui').on_click(function () {
        var _this = this;
        $(_this).yi_dong_tou_ming({                         //先執行這第一個動畫
            'attr': 'w',     //動畫模式
            'target': 500,   //目標量
            'step': 7,       //跨度
            't': 50,         //每次動畫時間
            fn: function () {                              //等待第一個動畫執行完畢後，再在動畫回調函數裏執行第二個動畫
                $(_this).yi_dong_tou_ming({
                    'attr': 'h',     //動畫模式
                    'target': 200,   //目標量
                    'step': 7,       //跨度
                    't': 50          //每次動畫時間
 }); }
        });
    });

PS：對於多個動畫衝突致使終止問題，是由於只採用了一個定時器，咱們能夠對每一個動畫分配一個定時器便可解決。prototype

/** yi_dong_tou_ming()方法，說明
 * * yi_dong_tou_ming()方法，將一個元素，進行一下動畫操做
 * 1，x將元素橫向左移動或者右移動
 * 2, y將元素豎向上移動或者下移動
 * 3，w將元素動畫增長或者減小寬度
 * 4，h將元素動畫增長或者減小高度
 * 5，o將元素動畫增長或者減小透明度
 * *************************************
 *  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.爲透明度動畫，【必填】
            'type':'1',        【動畫模式】，     0.勻速模式，1.緩衝模式【可選，默認緩衝】
            'speed':6,         【緩衝速度】，     動畫模式爲緩衝時設置，【可選，默認爲6】,以此值改變跨度.每一次動畫動態增長或者減小，實現緩衝效果

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

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

            }
        });
 **/
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' : '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;

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

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

         // 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) {
            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 + 'px';
        }
        clearInterval(element.timer); //給對每一個象建立定時器並中止定時器
        element.timer = setInterval(function () {               //將對象下的定時器開啓
            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) + ')';
                }
            } 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 + 'px';
                }
            }
            //document.getElementById('aaa').innerHTML += step + '<br />';
        }, t);
        function setTarget() {
            element.style[attr] = target + 'px';
            clearInterval(element.timer); if (obj.fn != undefined)obj.fn();   //判斷若是傳入了回調函數，動畫執行完畢後執行回調函數
        }
        function setOpacity() {
            element.style.opacity = parseInt(target) / 100;
            element.style.filter = 'alpha(opacity=' + parseInt(target) + ')';
            clearInterval(element.timer); if (obj.fn != undefined)obj.fn();    //判斷若是傳入了回調函數，動畫執行完畢後執行回調函數
        }
    }
    return this;
};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。