需求二：固定速度移动

oc8yu-mi68w.gif

  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>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .box {
  14.             position: relative;
  15.             left: 0px;
  16.             top: 0px;
  17.             width: 100px;
  18.             height: 100px;
  19.             background: lightcoral;
  20.             transition: all ease;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="box"></div>
  26. </body>
  27. </html>

实现方法 动画一般写17ms

1）setInterval

let box = document.querySelector('.box');
let l = 0;
let max = document.documentElement.clientWidth - box.offsetWidth;
let speed=20;
//max是移动的路程

// setInterval写法
box.onclick = function () {
  let timer = setInterval(() => {
    l += speed;
    if (l > max) {
      l = max;
      clearInterval(timer);
    }
    box.style.left = l + "px";
  }, 50);
};

2）setTimeout

 //setTimeOut   递归写法
let box = document.querySelector('.box');
let l = 0;
let max = document.documentElement.clientWidth - box.offsetWidth;
let speed=20;
box.onclick = function () {
  function fn() {
    setTimeout(() => {
      // l每次+=的就是速度
      // box.getBoundingClientRect
      l += speed;
      if (l > max) {
        l = max;
        box.style.left = l + 'px';
        return;
      }
      box.style.left = l + 'px';
      fn();
    }, 30);
  };
  fn();
};

3）requestAnmationFrame

刷新频率

每次页面渲染完成都会调用一次回调函数 常用于每帧页面重新渲染 比setTimeout性能更好 专门用来写动画

    requestAnimationFrame(()=>{

    });

let box = document.querySelector('.box');
let l = 0;
let max = document.documentElement.clientWidth - box.offsetWidth;
let speed=20;
box.onclick=function(){
  function fn(){
    requestAnimationFrame(()=>{
      l+=speed;
      if(l>max){
        l=max;
        box.style.left=l+'px';
        return;
      };
      box.style.left=l+'px';
      fn();
    })
  };
  fn();
};

需求三：固定时间移动

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定时间移动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            left: 0px;
            top: 0px;
            width: 100px;
            height: 100px;
            background: lightcoral;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        let box = document.querySelector('.box');
        // 固定时间移动，路程越长速度越快，需要求速度
        let time = 1000,//固定时间
            max = document.documentElement.clientWidth - box.offsetWidth;
        // max=1100;
        // 10ms移动一次，一共走1000ms 那么走路1000/10次
        // 路程是max一共走了1000/10次 每次走max/(1000/10) 距离
        // 一般定时器5ms一次
        let speed = max / (time / 10);//速度{每次走多远}
        let l = 0;
        box.onclick = function () {
            let timer = setInterval(() => {
                l += speed;
                if (l > max) {
                    l = max;
                    clearInterval(timer)
                }
                box.style.left = l + 'px';
            }, 10);
        };
    </script>
</body>
</html>