首页 > 前端 > 阻尼运动与阻尼震荡

阻尼运动与阻尼震荡

阻尼运动——指受外力影响，导致运动速度越来越小的运动。

一、阻尼运动之快速返回顶部

当我们需要有阻尼的返回顶部时，每次缩短的距离不是固定值，而是越来越小，即“每次缩短量越来越小”。那我们可以建立一个循环，每次都获取距离顶部的值，然后乘以一个系数，得到的值作为被减数去缩短距离。

因为返回顶部的过程中，距离顶部的值是越来越小的，所以每次减去的值也是越来越小的，所以可以达到阻尼运动的效果。如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>阻尼运动之返回顶部</title>
    <style>
        body {
            height: 2000px;
        }
        #gotop {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background-color: #666;
            text-align: center;
            line-height: 60px;
        }
    </style>
<body>
    <div id="gotop">TOP</div>
    <script>
        function goTop(){
            clearInterval(window.timer);
            var ev = document.getElementsByTagName("body")[0];
            var Cur = ev.scrollTop;
            timer = setInterval(function(){
                ev.scrollTop += ( 0 - ev.scrollTop ) / 40;
                if(ev.scrollTop == 0){
                    clearInterval(timer);
                }
            });
        }
        document.getElementById("gotop").onclick = goTop;
    </script>
</body>
</html>

二、阻尼运动之阻尼震荡

阻尼震荡的运动过程是：在往目标位置的运动过程中，位移量（速度）是越来越大的，在运动到目标位置时，位移量达到了最大值，并且继续移动；在离开目标位置的过程中，位移量逐渐减小，在最远处，位移量为0。以此数学模型建立如下函数：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>阻尼运动之阻尼震荡</title>
    <style>
        body {
            margin: 0;
        }
        #bar {
            position: relative;
            width: 550px;
            list-style: none;
            margin: 20% auto;
            padding: 0;
            overflow: auto;
        }
        #bar li {
            float: left;
            width: 100px;
            height: 20px;
            background-color: #ddd;
            margin-right: 10px;
        }
        #mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 20px;
            background-color: #aaa;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <ul id="bar">
        <span id="mask"></span>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        function moveTo(ev, tg){
            clearInterval(window.timerM);
            var step = 0;
            timerM = setInterval(function(){
                step += (tg.offsetLeft - ev.offsetLeft) / 4;
                step *= 0.8;
                ev.style.left = ev.offsetLeft + step + "px";
                if(Math.abs(step) <= 1 && Math.abs(tg.offsetLeft-ev.offsetLeft) <= 1){
                    clearInterval(timerM)
                }
            }, 10);
        }
        var li = document.getElementsByTagName("li");
        for(var i = 0; i < li.length; i++){
            li[i].onmouseover = function(ev){
                moveTo(document.getElementById("mask"), ev.target);
            }
        }
    </script>
</body>
</html>

以上为阻尼运动的个人实例。