JavaScript運動函數實例詳解

Posted on by

運動函數是我們自己封裝的一個函數。

作用是將css樣式的改變不是一次性完成 是 逐步完成 執行效果 看上去 像是 動畫/運動 完成的css樣式改變。

實際項目中框架等都有自己的運動函數我們目前封裝一個簡單的兼容多屬性的運動函數。

運動函數部分: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 100px;
            background: rgb(231, 12, 48);
            margin: 0 auto;
            opacity: 0.3;
            /* transition: 3s; */
        }
        p {
            width: 100px;
            height: 100px;
            background: black;
            position: fixed;
            top: 200px;
            left: 50px;
        }
    </style>
</head>
<body>
    <button>點擊</button>
    <div></div>
    <script>
        var oDiv = document.querySelector('div');
        var oBtn = document.querySelector('button');
        var oP = document.querySelector('p')
           oBtn.addEventListener('click',function(){
            move(oDiv,{width:1800,height:900,opacity:1} , function(){ oDiv.style.background = 'black' } );
        })
        // 運動函數命名
        //     move    運動函數
        // @param  object  element 要執行運動函數的標簽對象
        // @param  object  object  要執行運動的css屬性 和 最終數值
        // @param  function    callback    運動結束執行的回調函數
        //                                 默認值是空函數
        function move(element, object, callback = function () { }) {
            // 定義變量存儲定時器個數
            let num = 0;
            // 循環遍歷參數二(object)
            // 使用 for...in 循環 使用 let 定義變量 
            for (let type in object){
                // type 是 參數2對象的屬性 也就是 要運動的css樣式的屬性
                // object[type] 是 參數2對象的屬性值 也就是 要運動的css樣式的 最終數值
                // 定時器數量加一
                num++;
                // 開始數值，也就是獲取的原始數值，兼容透明度寫法
                let startVal = (type === 'opacity') ? window.getComputedStyle(element)[type] * 100 : parseInt(window.getComputedStyle(element)[type]);
                // 結束數值，也就是輸入的屬性對應的屬性值，兼容透明度寫法
                let endVal = (type === 'opacity') ? object[type] * 100 : object[type];
                // 定時器開始，time記錄定時器編號
                let time = setInterval( function () {
                    // 設定步長值= 結束數值 - 開始數值  /  10 
                    let step = (endVal - startVal) / 10;
                    // 如果步長值大於0 就向上取整，反之則向下取整
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    // 將初始值 += 步長值 再把新值賦值給初始值
                    startVal += step;
                    // 將新的步長值 賦值給 標簽對象的css樣式 兼容 透明度
                    element.style[type] = (type === 'opacity') ? startVal / 100 : startVal + 'px';
                    // 如果初始值等於最終值
                    if (startVal === endVal) {
                        // 清除定時器
                        clearInterval(time);
                        // 變量 累減1 也就是 少瞭一個執行的定時器
                        // num--;
                        // 當執行的定時器為0 時，所有定時器都清除瞭
                        if (num === 0) {
                            callback();
                        }
                    }
                }, 20)
            }
        }
    </script>
</body>
</html>

運行結果：

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!   

推薦閱讀：