一、缓动动画基本代码实现

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
2.核心算法：（目标值 - 现在的位置）/ 10 做为每次移动的距离 步长
3.停止的条件：让当前盒子位置等于目标位置就停止定时器
4.注意：步长值需要取整

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>测试</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         span{
  14.             position: absolute;
  15.             top: 100px;
  16.             left: 0;
  17.             display: block;
  18.             width: 100px;
  19.             height: 100px;
  20.             background-color: purple;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <button class="start">紫色盒子</button>
  26.     <button class="reset">复位</button>
  27.     <span></span>
  29.     <script>
  30.         //简单动画函数封装  obj目标对象  target目标位置
  31.         //给不同的元素指定了不同的定时器
  32.         //缓动动画
  33.         function animate (obj,target) {
  34.             clearInterval(obj.timer);
  35.             //让盒子在当前位置+1距离
  36.             //定时器重复操作，最后清除定时器
  37.             obj.timer = setInterval(function(){
  38.                 //步长值写到定时器的里面
  39.                 var step = Math.ceil((target - obj.offsetLeft) / 10);
  40.                 //获得盒子当前的位置
  41.                 var x = obj.offsetLeft;
  42.                 if(x == target){
  43.                     clearInterval(obj.timer);
  44.                 }
  45.                 obj.style.left = x + step + 'px';
  46.             },15);
  47.         }
  48.         //获取元素
  49.         var span = document.querySelector('span');
  50.         var btnStart = document.querySelector('.start');
  51.         var btnReset = document.querySelector('.reset');
  52.         btnStart.addEventListener('click',function(){
  53.             animate(span,500);
  54.         });
  55.         btnReset.addEventListener('click',function(){
  56.             location.reload();
  57.         });
  58.     </script>
  59. </body>
  60. </html>

二、多个目标值之间移动

可以让动画函数从800到500
当我们点击按钮时，判断步长是正值还是负值。
1.如果为正，则步长往大了取整
2.如果为负，则步长往小了取整

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>测试</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         span{
  14.             position: absolute;
  15.             top: 100px;
  16.             left: 0;
  17.             display: block;
  18.             width: 100px;
  19.             height: 100px;
  20.             background-color: purple;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <button class="start500">紫色盒子到500</button>
  26.     <button class="start800">紫色盒子到800</button>
  27.     <button class="reset">复位</button>
  28.     <span></span>
  30.     <script>
  31.         //简单动画函数封装  obj目标对象  target目标位置
  32.         //给不同的元素指定了不同的定时器
  33.         //缓动动画
  34.         function animate (obj,target) {
  35.             clearInterval(obj.timer);
  36.             //让盒子在当前位置+1距离
  37.             //定时器重复操作，最后清除定时器
  38.             obj.timer = setInterval(function(){
  39.                 //步长值写到定时器的里面
  40.                 var step = (target - obj.offsetLeft) / 10;
  41.                 step = step > 0 ? Math.ceil(step) : Math.floor(step);
  42.                 //获得盒子当前的位置
  43.                 var x = obj.offsetLeft;
  44.                 if(x == target){
  45.                     clearInterval(obj.timer);
  46.                 }
  47.                 obj.style.left = x + step + 'px';
  48.             },15);
  49.         }
  50.         //获取元素
  51.         var span = document.querySelector('span');
  52.         var btnStart500 = document.querySelector('.start500');
  53.         var btnStart800 = document.querySelector('.start800');
  54.         var btnReset = document.querySelector('.reset');
  55.         btnStart500.addEventListener('click',function(){
  56.             animate(span,500);
  57.         });
  58.         btnStart800.addEventListener('click',function(){
  59.             animate(span,800);
  60.         });
  61.         btnReset.addEventListener('click',function(){
  62.             location.reload();
  63.         });
  64.     </script>
  65. </body>
  66. </html>

三、添加回调函数

回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完毕之后，再执行传进去的这个参数，这个过程叫做回调。
回调函数写的位置：定时器结束的位置。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>测试</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         span{
  14.             position: absolute;
  15.             top: 100px;
  16.             left: 0;
  17.             display: block;
  18.             width: 100px;
  19.             height: 100px;
  20.             background-color: purple;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <button class="start500">紫色盒子到500</button>
  26.     <button class="start800">紫色盒子到800</button>
  27.     <button class="reset">复位</button>
  28.     <span></span>
  30.     <script>
  31.         //简单动画函数封装  obj目标对象  target目标位置
  32.         //给不同的元素指定了不同的定时器
  33.         //缓动动画
  34.         function animate (obj,target,callback) {
  35.             clearInterval(obj.timer);
  36.             //让盒子在当前位置+1距离
  37.             //定时器重复操作，最后清除定时器
  38.             obj.timer = setInterval(function(){
  39.                 //步长值写到定时器的里面
  40.                 var step = (target - obj.offsetLeft) / 10;
  41.                 step = step > 0 ? Math.ceil(step) : Math.floor(step);
  42.                 //获得盒子当前的位置
  43.                 var x = obj.offsetLeft;
  44.                 if(x == target){
  45.                     clearInterval(obj.timer);
  46.                     //回调函数写在定时器结束的位置
  47.                     if(callback){
  48.                         //调用函数
  49.                         callback();
  50.                     }
  51.                 }
  52.                 obj.style.left = x + step + 'px';
  53.             },15);
  54.         }
  55.         //获取元素
  56.         var span = document.querySelector('span');
  57.         var btnStart500 = document.querySelector('.start500');
  58.         var btnStart800 = document.querySelector('.start800');
  59.         var btnReset = document.querySelector('.reset');
  60.         btnStart500.addEventListener('click',function(){
  61.             animate(span,500);
  62.         });
  63.         btnStart800.addEventListener('click',function(){
  64.             animate(span,800,function(){
  65.                 span.style.backgroundColor = 'red';
  66.                 span.style.transition = 'all' + ' 2s';
  67.             });
  68.         });
  69.         btnReset.addEventListener('click',function(){
  70.             location.reload();
  71.         });
  72.     </script>
  73. </body>
  74. </html>

.