JavaScript運(yùn)動(dòng)函數(shù)實(shí)例詳解

更新時(shí)間：2022年02月09日 11:16:28 作者：大聰明碼農(nóng)徐

這篇文章主要為大家詳細(xì)介紹了JavaScript的運(yùn)動(dòng)函數(shù)，使用實(shí)例在論證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

運(yùn)動(dòng)函數(shù)是我們自己封裝的一個(gè)函數(shù)。

作用是將css樣式的改變不是一次性完成是逐步完成執(zhí)行效果看上去像是動(dòng)畫/運(yùn)動(dòng) 完成的css樣式改變。

實(shí)際項(xiàng)目中框架等都有自己的運(yùn)動(dòng)函數(shù)我們目前封裝一個(gè)簡(jiǎn)單的兼容多屬性的運(yùn)動(dòng)函數(shù)。

運(yùn)動(dòng)函數(shù)部分:

<!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>點(diǎn)擊</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' } );
        })
        // 運(yùn)動(dòng)函數(shù)命名
        //     move    運(yùn)動(dòng)函數(shù)
        // @param  object  element 要執(zhí)行運(yùn)動(dòng)函數(shù)的標(biāo)簽對(duì)象
        // @param  object  object  要執(zhí)行運(yùn)動(dòng)的css屬性 和 最終數(shù)值
        // @param  function    callback    運(yùn)動(dòng)結(jié)束執(zhí)行的回調(diào)函數(shù)
        //                                 默認(rèn)值是空函數(shù)
        function move(element, object, callback = function () { }) {
            // 定義變量存儲(chǔ)定時(shí)器個(gè)數(shù)
            let num = 0;
            // 循環(huán)遍歷參數(shù)二(object)
            // 使用 for...in 循環(huán) 使用 let 定義變量 
            for (let type in object){
                // type 是 參數(shù)2對(duì)象的屬性 也就是 要運(yùn)動(dòng)的css樣式的屬性
                // object[type] 是 參數(shù)2對(duì)象的屬性值 也就是 要運(yùn)動(dòng)的css樣式的 最終數(shù)值
                // 定時(shí)器數(shù)量加一
                num++;
                // 開始數(shù)值，也就是獲取的原始數(shù)值，兼容透明度寫法
                let startVal = (type === 'opacity') ? window.getComputedStyle(element)[type] * 100 : parseInt(window.getComputedStyle(element)[type]);
                // 結(jié)束數(shù)值，也就是輸入的屬性對(duì)應(yīng)的屬性值，兼容透明度寫法
                let endVal = (type === 'opacity') ? object[type] * 100 : object[type];
                // 定時(shí)器開始，time記錄定時(shí)器編號(hào)
                let time = setInterval( function () {
                    // 設(shè)定步長(zhǎng)值= 結(jié)束數(shù)值 - 開始數(shù)值  /  10 
                    let step = (endVal - startVal) / 10;
                    // 如果步長(zhǎng)值大于0 就向上取整，反之則向下取整
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    // 將初始值 += 步長(zhǎng)值 再把新值賦值給初始值
                    startVal += step;
                    // 將新的步長(zhǎng)值 賦值給 標(biāo)簽對(duì)象的css樣式 兼容 透明度
                    element.style[type] = (type === 'opacity') ? startVal / 100 : startVal + 'px';
                    // 如果初始值等于最終值
                    if (startVal === endVal) {
                        // 清除定時(shí)器
                        clearInterval(time);
                        // 變量 累減1 也就是 少了一個(gè)執(zhí)行的定時(shí)器
                        // num--;
                        // 當(dāng)執(zhí)行的定時(shí)器為0 時(shí)，所有定時(shí)器都清除了
                        if (num === 0) {
                            callback();
                        }
                    }
                }, 20)
            }
        }
    </script>
</body>
</html>

運(yùn)行結(jié)果：