JS——缓动动画

核心思想：

(1)相对于匀速移动，盒子每次移动的步长都是变化的，公式：盒子位置=盒子本身位置+（目标位置-盒子本身位置）/10

(2)在盒子位置与目标距离小于10px时，其步长必然是小数，又由于offsetLeft的变态的逢4进值，那么只要小数点的值小于4就会停滞不前

(3)所以要么往上取整，要么往下取整

1、Math.ceil

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>
<body>
<button>点击</button>
<div></div>
<script>
    var btn = document.getElementsByTagName("button")[0];
    var divEle = document.getElementsByTagName("div")[0];
    var timer = null;
    btn.onclick = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            //当目标距离与实际距离小于10px时，会以1px的速度前进
            var step = (400 - divEle.offsetLeft) / 10;
            step = Math.ceil(step);
            divEle.style.left = divEle.offsetLeft + step + "px";
            if (Math.abs(400 - divEle.offsetLeft) <= Math.abs(step)) {
                divEle.style.left = "400px";
                clearInterval(timer);
            }
        }, 15)
    }
</script>
</body>
</html>

2、Math.floor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 400px;
        }
    </style>
</head>
<body>
<button>点击</button>
<div></div>
<script>
    var btn = document.getElementsByTagName("button")[0];
    var divEle = document.getElementsByTagName("div")[0];
    var timer = null;
    btn.onclick = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            //当目标距离与实际距离小于10px时，会以1px的速度前进
            var step = (0 - divEle.offsetLeft) / 10;
            step = Math.floor(step);
            divEle.style.left = divEle.offsetLeft + step + "px";
            if (Math.abs(0 - divEle.offsetLeft) <= Math.abs(step)) {
                divEle.style.left = 0;
                clearInterval(timer);
            }
        }, 15)
    }
</script>
</body>
</html>

3、封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0px;
        }
    </style>
</head>
<body>
<button>回到起点</button>
<button>回到200</button>
<button>回到400</button>
<div></div>
<script>
    var btn1 = document.getElementsByTagName("button")[0];
    var btn2 = document.getElementsByTagName("button")[1];
    var btn3 = document.getElementsByTagName("button")[2];
    var divEle = document.getElementsByTagName("div")[0];
    btn1.onclick = function () {
        animate(divEle, 0);
    }
    btn2.onclick = function () {
        animate(divEle, 200);
    }
    btn3.onclick = function () {
        animate(divEle, 400);
    }

    function animate(ele, target) {
        clearInterval(ele.timer);
        ele.timer = setInterval(function () {
            var step = (target - ele.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            ele.style.left = ele.offsetLeft + step + "px";
            if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
                ele.style.left = target + "px";
                clearInterval(ele.timer);
            }
        }, 15);
    }
</script>
</body>
</html>

相关阅读:
浅水方程
 Delaunay三角剖分算法
 计算机图形学知名期刊杂志(转载)
Sql 主键自增
 Skinny triangle
开源免费天气预报接口API以及全国所有地区代码！！
Navier Stokes(纳维叶－斯托克斯)方程
 java.util.Date_与_java.sql.Date互转_及_字符串转换为日期时间格式
 2015最后一天
 html标签
原文地址：https://www.cnblogs.com/wuqiuxue/p/7934361.html