乐趣区

关于web-api:Web-API6

迟缓动画的原理

迟缓动画就是让元素的静止速度有所变动,最常见的迟缓动画就是让动画速度缓缓停下来
外围思路

  • 让盒子每次挪动的间隔缓缓变小,速度就会缓缓变小
  • 外围算法:(目标值 - 当初的地位)/10 作为每次挪动的间隔步长
  • 进行的条件:让盒子以后的地位等于指标的地位,就进行定时器
  • 留神步长值须要取整
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        button {margin: 50px;}
        
        img {
            position: absolute;
            display: block;
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <button> 点击挪动至 800</button>
    <button> 点击挪动至 0 </button>
    <img src="./image/ 头像.jpg" alt="">
    <script>
        var bth = document.querySelectorAll('button');
        var img = document.querySelector('img')
            // obj:指标对象   target: 指标地位
        function aniamte(obj, target) {
            // 革除以前的定时器,只保留以后的计时器

            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 如果步长为正值 则取大  如果步长为负值 则取小
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                // 判断:如果指标对象的地位等于指标地位,则革除定时器
                if (obj.offsetLeft == target) {clearInterval(obj.timer)
                }
                obj.style.left = obj.offsetLeft + step + "px"
            }, 15);

        }

        // 进行调用
        bth[0].addEventListener('click', function() {aniamte(img, 800)
        })
        bth[1].addEventListener('click', function() {aniamte(img, 0)
        })
    </script>
</body>

</html>

迟缓动画增加回调函数

外围思路:回调函数要增加到定时器完结的地位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        button {margin: 50px;}
        
        img {
            position: absolute;
            display: block;
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }
        
        .photo {
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>
    <button> 点击挪动至 800</button>
    <button> 点击挪动至 0 </button>
    <img src="./image/ 头像.jpg" alt=""class="img">
    <script>
        var bth = document.querySelectorAll('button');
        var img = document.querySelector('img')
            // obj:指标对象   target: 指标地位
        function aniamte(obj, target, callback) {
            // 革除以前的定时器,只保留以后的计时器

            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 如果步长为正值 则取大  如果步长为负值 则取小
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                // 判断:如果指标对象的地位等于指标地位,则革除定时器
                if (obj.offsetLeft == target) {clearInterval(obj.timer);
                    // 回调函数要增加到定时器完结的地位
                    if (callback) {callback()
                    }
                }
                obj.style.left = obj.offsetLeft + step + "px"
            }, 15);

        }

        // 进行调用
        bth[0].addEventListener('click', function() {aniamte(img, 800, function() {img.className = 'img'})
        })
        bth[1].addEventListener('click', function() {aniamte(img, 0, function() {img.className = 'photo img'})
        })
    </script>
</body>

</html>

引进 animate 动画函数

animate.js 文件

var bth = document.querySelectorAll('button');
var img = document.querySelector('img')
    // obj:指标对象   target: 指标地位
function aniamte(obj, target, callback) {
    // 革除以前的定时器,只保留以后的计时器

    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 如果步长为正值 则取大  如果步长为负值 则取小
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);

        // 判断:如果指标对象的地位等于指标地位,则革除定时器
        if (obj.offsetLeft == target) {clearInterval(obj.timer);
            // 回调函数要增加到定时器完结的地位
            if (callback) {callback()
            }
        }
        obj.style.left = obj.offsetLeft + step + "px"
    }, 15);

}

// 进行调用
bth[0].addEventListener('click', function() {aniamte(img, 800, function() {img.className = 'img'})
})
bth[1].addEventListener('click', function() {aniamte(img, 0, function() {img.className = 'photo img'})
})

主文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .sliderbar {
            position: fixed;
            right: 0;
            bottom: 100px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            cursor: pointer;
        }
        
        .con {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 40px;
            background-color: purple;
            z-index: -1;
        }
    </style>
    <script src="./animate.js"></script>
</head>

<body>
    <div class="sliderbar">
        <span> ← </span>
        <div class="con"> 问题反馈 </div>
    </div>

    <script>
        var sliderbar = document.querySelector('.sliderbar');
        var con = document.querySelector('.con');

        sliderbar.addEventListener('mouseenter', function() {aniamte(con, -160, function() {sliderbar.children[0].innerHTML = "→"
            })
        })


        sliderbar.addEventListener('mouseleave', function() {aniamte(con, 0, function() {sliderbar.children[0].innerHTML = "←"
            })
        })
    </script>

</body>

</html>

退出移动版