四 缓动动画原理

1）概念



//1 匀速动画：盒子的当前位置 + 固定值

//2 缓动动画：盒子的当前位置 + 变化的值 [(目标值 - 当前位置) / 10 ]


 

缓动动画_取整

 

 

 

 

1）基本公式



// ( 目标值 - 现在的位置 ) / 10


2）原理图


缓动动画_缓动_02


代码实现



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>缓动动画</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        span {
            position: absolute;
            display: block;
            top: 200px;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>
<body>
<button>点击span再执行动画</button>
<div></div>
<span></span>
<script>
    function animate(object,target) {
        clearInterval(object.timer);
        object.timer = setInterval(function () {
            //步长值: (target - object.offsetLeft)/10
            var step = (target - object.offsetLeft)/10;
            if (object.offsetLeft == target) {
                //停止动画 本质是停止定时器
                clearInterval(object.timer);
            }
            object.style.left = object.offsetLeft + step + 'px';
        },15);//一般把定时器事件间隔设置为15毫秒
    }
    var div = document.querySelector('div');
    var span = document.querySelector('span');
    var btn = document.querySelector('button');
    animate(div,400);
    btn.onclick = function(){
        animate(span,500);
    }
</script>
</body>
</html>


 

代码改进

缓动动画_缓动_03

 

 

 



步长值 前进后退都可以



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>缓动动画多个目标值之间移动</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        span {
            position: absolute;
            display: block;
            top: 200px;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>
<body>
<button id="btn500">点击span再执行动画500</button>
<button id="btn800">点击span再执行动画800</button>
<span></span>
<script>
    function animate(object,target) {
        clearInterval(object.timer);
        object.timer = setInterval(function () {
            //步长值: (target - object.offsetLeft)/10
            //把步长值改为整数 避免小数参与运算 我们用 向上取整
            //会有问题 step为负数时 -8 -9 往大取是-8 而我们需要的是-9
            var step = (target - object.offsetLeft)/10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);//如果正值就往大取整 如果是负值就往小取整

            if (object.offsetLeft == target) {
                //停止动画 本质是停止定时器
                clearInterval(object.timer);
            }
            object.style.left = object.offsetLeft + step + 'px';
        },15);//一般把定时器事件间隔设置为15毫秒
    }
    var span = document.querySelector('span');
    var btn500 = document.querySelector('#btn500');
    var btn800 = document.querySelector('#btn800');
    btn500.onclick = function(){
        animate(span,500);
    }
    btn800.onclick = function(){
        animate(span,800);
    }
</script>
</body>
</html>