JavaScript運動函數範例詳解

2022-02-09 13:00:54

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

作用是將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>

執行結果：

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注it145.com的更多內容!

JavaScript運動函數範例詳解

總結

熱門文章