快捷導(dǎo)航

javascript實現(xiàn)勻速動畫效果

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

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

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

實現(xiàn)思路：

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

小提示：以上只是一種方法，不同動畫效果根據(jù)所需進(jìn)行調(diào)整實現(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>勻速動畫</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">點擊移動小狐貍</button>
    <button class="btn2">點擊移動皮卡丘</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);
        })

        // 動畫函數(shù)     obj動畫對象, 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) {
                    // 停止動畫
                    clearInterval(obj.timer);
                    // 如果有回調(diào)函數(shù)，執(zhí)行回調(diào)函數(shù)
                    if (callback) {
                        callback();
                    }
                }


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

</html>

頁面效果：