快捷導(dǎo)航

javascript實(shí)現(xiàn)勻速動(dòng)畫效果

更新時(shí)間：2021年09月30日 08:49:35 作者：qq_39111074

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)勻速動(dòng)畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了javascript實(shí)現(xiàn)勻速動(dòng)畫的具體代碼，供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)思路：

1、主要使用定時(shí)函數(shù)setInterval()來實(shí)現(xiàn)動(dòng)畫效果
2、可以將動(dòng)畫封裝成一個(gè)函數(shù)，這樣可以多個(gè)元素調(diào)用，不用重復(fù)寫
3、動(dòng)畫函數(shù)接收參數(shù)- - -元素對(duì)象、目標(biāo)偏移量、回調(diào)函數(shù)
①函數(shù)里添加一個(gè)定時(shí)函數(shù)，給定時(shí)函數(shù)一個(gè)名字，后面清除定時(shí)函數(shù)要使用定時(shí)函數(shù)名
②定時(shí)函數(shù)里面處理程序：
a. 給一個(gè)固定的每步移動(dòng)值，設(shè)置元素對(duì)象的偏移量勻速變化- - -eg: obj.style.left = obj.offsetLeft + 5 + ‘px';
b. 判斷偏移量是否達(dá)到目標(biāo)值，達(dá)到的話停止動(dòng)畫- - -
clearInterval(obj.timer);
并且在動(dòng)畫停止時(shí)判斷是否存在回調(diào)函數(shù)，有回調(diào)函數(shù)的話執(zhí)行回調(diào)函數(shù)
4、在動(dòng)畫函數(shù)的最前面添加清除定時(shí)器函數(shù)，清除之前的動(dòng)畫影響- - -clearInterval(obj.timer);
有時(shí)需要點(diǎn)擊按鈕后，觸發(fā)動(dòng)畫這種，沒有添加清除的話，重復(fù)點(diǎn)擊按鈕，動(dòng)畫效果會(huì)疊加，越來越快
5、也可以將動(dòng)畫函數(shù)封裝到j(luò)s文件中進(jìn)行引用

小提示：以上只是一種方法，不同動(dòng)畫效果根據(jù)所需進(jìn)行調(diào)整實(shí)現(xiàn)方法

代碼示例：

<!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>勻速動(dòng)畫</title>
    <style>
        .box {
            position: relative;
            width: 1000px;
            margin-top: 20px;
        }
        
        .xiaohuli {
            position: absolute;
            top: 0;
            left: 0;
            width: 150px;
            height: 150px;
        }
        
        .pikaqiu {
            position: absolute;
            top: 150px;
            left: 0;
            width: 200px;
            height: 150px;
        }
    </style>
</head>

<body>
    <button class="btn1">點(diǎn)擊移動(dòng)小狐貍</button>
    <button class="btn2">點(diǎn)擊移動(dòng)皮卡丘</button>
    <div class="box">
        <img src="images/小狐貍.jpg" alt="" class="xiaohuli">
        <img src="images/皮卡丘.jpg" alt="" class="pikaqiu">
    </div>
    <script>
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        var xiaohuli = document.querySelector('.xiaohuli');
        var pikaqiu = document.querySelector('.pikaqiu');

        btn1.addEventListener('click', function() {
            animate(xiaohuli, 300);
        })

        btn2.addEventListener('click', function() {
            animate(pikaqiu, 450);
        })

        // 動(dòng)畫函數(shù)     obj動(dòng)畫對(duì)象, target目標(biāo)左偏移量, callback回調(diào)函數(shù)
        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {

                obj.style.left = obj.offsetLeft + 5 + 'px';

                if (obj.offsetLeft >= target) {
                    // 停止動(dòng)畫
                    clearInterval(obj.timer);
                    // 如果有回調(diào)函數(shù)，執(zhí)行回調(diào)函數(shù)
                    if (callback) {
                        callback();
                    }
                }


            }, 30);
        }
    </script>
</body>

</html>

頁面效果：