一个简单的函数封装--缓动动画

最新推荐文章于 2020-09-07 12:45:25 发布

小斯不斯

最新推荐文章于 2020-09-07 12:45:25 发布

阅读量651

点赞数

文章标签：一个简单的函数封装--缓动动画一个简单的函数封装- 缓动动画

本文链接：https://blog.csdn.net/qq_42181069/article/details/81108581

版权

作为一个前端攻城狮，如果能够独立封装库的话，也说明在前端上有了一定的造诣了~~~~不过我是菜鸟，只能从小工具开始封装起来，偶然看到一个动画，就想起来了，封装一下，玩一玩这个缓动动画.

个人觉得如果只是需要用到部分功能的话，自己封装比引入一个巨大的库要好的多，废话不多说~

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    .one {
      height: 100px;
      width: 100px;
      background-color: pink;
      position: absolute;
      left: 0px;
      top: 50px;
    }
    .two {
      height: 100px;
      width: 100px;
      background-color: green;
      position: absolute;
      left: 0px;
      top: 170px;
    }
  </style>
</head>
<body>
<input type="button" value="到400" id="to400"/>
<input type="button" value="到800" id="to800"/>
<div class="one" id="box"></div>
<div class="two" id="box2"></div>
<script>
  //1.获取元素
  var to400 = document.getElementById("to400");
  var to800 = document.getElementById("to800");
  var box = document.getElementById("box");
  var box2 = document.getElementById("box2");


  //2.给到400的按钮设置单击事件
  to400.onclick = function () {
    animate(box,400);
    //animate(box2,400);
  }


  //3.给to800这个按钮设置一个单击事件
  to800.onclick = function () {
    animate(box,800);
    //animate(box2,800);
  }


  //---------------------------------------------------
  //因为到400的代码,和到800的这样的代码是一样的,所以我们可以做一个封装.-----抽取出去就可以作为一个独立的js文件引进来了
  //谁要移动,谁就应该有一个计时器来控制他移动, 不应该用同一个变量来保存他们的计时器id.
  //所以我们可以用谁(对象)的属性来保存他自己的计时器id.
  function animate(ele,target){
    //设置计时器之前,要清除原来的计时器
    clearInterval(ele.timerId);
    //设置计时器
    ele.timerId = setInterval(function () {
      //获取的是当前这个box和他的定位父级body之间的距离.
      var currentLeft = ele.offsetLeft;
      //设计一个步长
      //如果当前位置比目标位置要小,步长是正的; 如果当前位置比目标位置要大,步长就应该是负数.
      var step = currentLeft > target?-9:9;
      //计算
      currentLeft += step;
      //赋值
      console.log(currentLeft);
      //如果目标位置减去当前位置,不够走一步,就表示到了最后了,就直接赋值
      if(Math.abs(target - currentLeft) > Math.abs(step)){
        ele.style.left = currentLeft + "px";
      }else {
        ele.style.left = target + "px";
        clearInterval(ele.timerId);
      }
    },50);
  }



</script>
</body>
</html>