欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS实现匀速与减速缓慢运动的动画效果封装示例

程序员文章站 2023-11-13 12:26:52
本文实例讲述了js实现匀速与减速缓慢运动的动画效果。分享给大家供大家参考,具体如下: &...

本文实例讲述了js实现匀速与减速缓慢运动的动画效果。分享给大家供大家参考,具体如下:

<!doctype html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <title>www.jb51.net js匀速/减速运动</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1 {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin-top: 10px;
      position: relative;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-top: 10px;
      position: relative;
    }
  </style>
</head>
<body>
<button>匀速移动</button>
<button>减速移动</button>
<div class="box1" ></div>
<div class="box2" ></div>
<script>
  // 动画原理 = 盒子位置 + 步长。
  //   1.闪动。 (瞬间到达)
  //   2.匀速。 (每次走一样距离)
  //   3.缓动。 (开始特快越走越慢,步长越来越小)
  //        (类似刹车,电梯停止,压缩弹簧...)
  // 好处:
  //   1.有非常逼真的缓动效果,实现的动画效果更细腻。
  //   2.如果不清除定时器,物体永远跟着目标在移动。
  var box1 = document.getelementsbyclassname("box1")[0];
  var box2 = document.getelementsbyclassname("box2")[0];
  var but1 = document.getelementsbytagname("button")[0];
  var but2 = document.getelementsbytagname("button")[1];
  console.log(box1.offsetleft);
  but1.onclick = function () {
    animate1(box1,200);
  }
  but2.onclick = function () {
    animate2(box2,500);
  }
  //匀速动画
  function animate1(ele,target){
    //要用定时器,先清除定时器
    //一个盒子只能有一个定时器,这样儿的话,不会和其他盒子出现定时器冲突
    //而定时器本身讲成为盒子的一个属性
    clearinterval(ele.timer);
    //我们要求盒子既能向前又能向后,那么我们的步长就得有正有负
    //目标值如果大于当前值取正,目标值如果小于当前值取负
    var speed = target>ele.offsetleft?3:-3;
    ele.timer = setinterval(function () {
      //在执行之前就获取当前值和目标值之差
      var val = target - ele.offsetleft;
      ele.style.left = ele.offsetleft + speed + "px";
      //目标值和当前值只差如果小于步长,那么就不能在前进了
      //因为步长有正有负,所有转换成绝对值来比较
      if(math.abs(val)<=math.abs(speed)){
        ele.style.left = target + "px";
        clearinterval(ele.timer);
      }
    },30)
  }
  //缓动动画封装
  function animate2(ele,target) {
    clearinterval(ele.timer); //清楚历史定时器
    ele.timer = setinterval(function () {
      //获取步长 确定移动方向(正负值) 步长应该是越来越小的,缓动的算法。
      var step = (target-ele.offsetleft)/10;
      //对步长进行二次加工(大于0向上取整,小于0项下取整)
      step = step>0?math.ceil(step):math.floor(step);
      //动画原理: 目标位置 = 当前位置 + 步长
      console.log(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);
      }
    },30);
  }
</script>
</body>
</html>

这里使用在线html/css/javascript代码运行工具http://tools.jb51.net/code/htmljsrun,可得到如下运行效果:

JS实现匀速与减速缓慢运动的动画效果封装示例

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript运动效果与技巧汇总》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结

希望本文所述对大家javascript程序设计有所帮助。