JavaScript 詳解緩動(dòng)動(dòng)畫的封裝與使用

更新時(shí)間：2021年11月26日 11:20:37 作者：咸魚柴也有大廠夢(mèng)

緩動(dòng)動(dòng)畫原理：移動(dòng)的像素慢慢減少，讓效果看起來更柔和更美觀，通過定時(shí)器加回調(diào)函數(shù)，實(shí)現(xiàn)動(dòng)畫效果以及更多具體功能，非常好用

實(shí)現(xiàn)過程分析

（1）如何重復(fù)調(diào)用？

答：封裝一個(gè)函數(shù)，用一次調(diào)用一次

代碼分析：

function animate(obj, target, callback) { //詳細(xì)實(shí)現(xiàn)步驟 };

animate ：（動(dòng)畫函數(shù)）

obj（動(dòng)畫對(duì)象）：給誰添加動(dòng)畫效果

target（目標(biāo)值）：移動(dòng)到什么距離

callback（回調(diào)函數(shù)）：同時(shí)要執(zhí)行什么功能

（2）如何實(shí)現(xiàn)緩動(dòng)效果？（緩動(dòng)動(dòng)畫核心算法）

答：移動(dòng)距離 =（目標(biāo)值 - 現(xiàn)在盒子位置）/ 10，移動(dòng)距離會(huì)慢慢變小，直至停下，就實(shí)現(xiàn)了緩動(dòng)原理

代碼分析：

var step = (target - obj.offsetLeft) / 10;

step（移動(dòng)距離）：元素要移動(dòng)的距離

target（目標(biāo)值）：移動(dòng)到什么距離

obj.offsetLeft（盒子現(xiàn)在的位置）：盒子現(xiàn)在距離左側(cè)的距離

（3）為什么移動(dòng)不到指定位置？（給的目標(biāo)距離是500px，移動(dòng)到496.4就停下了）

答：因?yàn)樾枰≌?，正?shù)往上取整，負(fù)數(shù)向下取整

代碼分析：

step = step > 0 ? Math.ceil(step) : Math.floor(step);

如果setp要移動(dòng)的距離是正數(shù)，就向上取整，如果是負(fù)數(shù)，就向下取整，采取三元表達(dá)式以優(yōu)化代碼，提升整體質(zhì)量

（4）如何讓目標(biāo)元素真正移動(dòng)起來？

答：添加定時(shí)器，并將實(shí)時(shí)移動(dòng)距離（步長）賦值給元素

代碼分析：

 var timer = setInterval(function () { //詳細(xì)實(shí)現(xiàn)代碼 }, 15);  //添加定時(shí)器
 
 obj.style.left = obj.offsetLeft + step + 'px';  //步長

1.給定時(shí)器添加名字是為了好清除定時(shí)器，時(shí)間設(shè)置為15（實(shí)際開發(fā)常用15）

2.元素的左側(cè)的值 = 元素離左側(cè)的距離 + 移動(dòng)距離 + 'px' （記得一定要加px單位），實(shí)現(xiàn)原理就是不斷將最新的值賦值給元素，實(shí)現(xiàn)動(dòng)起來的效果

（5）為什么會(huì)鬼畜或者越點(diǎn)越快？

答：因?yàn)槎〞r(shí)器重復(fù)添加，需要每次調(diào)用時(shí)清除定時(shí)器

代碼分析：

clearInterval(timer);

兩個(gè)地方需要清除，第一是剛調(diào)用緩動(dòng)動(dòng)畫函數(shù)時(shí)，避免鬼畜和破速，第二是判斷元素到達(dá)指定位置沒有，如果到達(dá)了就停止定時(shí)器

案例測(cè)試：

<!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>
        .sliderbar {
            /* width: 240px; */
            /* height: 40px; */
            /* 父盒子定位根據(jù)實(shí)際要求來 */
            position: absolute;
            right: 0;
            top: 100px;
            text-align: center;
            line-height: 40px;
            /* display: block; */
            width: 40px;
            height: 40px;
            cursor: pointer;
        }
        .sp {
            position: relative;
            color: #fff;
        }
        
        .con {
            /* 設(shè)置了絕對(duì)定位就在父盒子里飄起來 */
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 40px;
            background-color: pink;
            z-index: -1;
            color: #fff;
        }
    </style>
    <script src="./animate.js"></script>
</head>
 
<body>
    <div class="sliderbar">
        <span class="sp">←</span>
        <div class="con">問題反饋</div>
    </div>
 
    <script>
        var sliderbar = document.querySelector('.sliderbar');
        // var sp = document.querySelector('.sp');
        var con = document.querySelector('.con');
        sliderbar.addEventListener('mouseenter', function() {
            //animate(obj, target, callback);
            animate(con, -160, function() {
                sliderbar.children[0].innerHTML = '→';
            });
        })
        sliderbar.addEventListener('mouseleave', function() {
            //animate(obj, target, callback);
            animate(con, 0, function() {
                sliderbar.children[0].innerHTML = '←';
 
            });
        })
    </script>
</body>
</html>

整體思路：通過給盒子添加鼠標(biāo)事件來調(diào)用動(dòng)畫函數(shù)，最終實(shí)現(xiàn)效果

運(yùn)行效果：

緩動(dòng)動(dòng)畫函數(shù)最終封裝代碼(animate.js)：

function animate(obj, target, callback) {

//調(diào)用函數(shù)就清除一次定時(shí)器，避免問題發(fā)生

clearInterval(obj.timer)

//添加定時(shí)器

obj.timer = setInterval(function () {

//步長值寫到計(jì)時(shí)器里面改為整數(shù)(往上取整)

var step = (target - obj.offsetLeft) / 10;

//整數(shù)往大了取，負(fù)數(shù)往小了取

step = step > 0 ? Math.ceil(step) : Math.floor(step);

if (obj.offsetLeft == target) {

//如果已經(jīng)到達(dá)指定位置就停止定時(shí)器

clearInterval(obj.timer);

//回調(diào)函數(shù)寫到定時(shí)器結(jié)束之后

callback && callback();

}

//把每次加一步長值改變?yōu)槁冃〉闹?/p>
obj.style.left = obj.offsetLeft + step + 'px';

}, 15);

}

生命不息，學(xué)習(xí)不止，鍵盤敲爛，月薪過萬！加油，代碼人

到此這篇關(guān)于JavaScript 詳解緩動(dòng)動(dòng)畫的封裝與使用的文章就介紹到這了,更多相關(guān)JavaScript 緩動(dòng)動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: