DOM高级-运动

2019-04-07

运动原理

运动也可以叫做动画。
通过连续不断的改变物体的位置，而发生移动变化。
使用 setInterval 实现。
匀速运动：速度值一直保持不变。
多物体同时运动：将定时器绑设置为对象的一个属性。
注：物体每次运动都应该把之前的定时器清除掉。

//box为绝对定位
var speedX = 2;
box.timer = setInterval(function () {
  box.style.left = box.offsetLeft + speedX + "px";
}, 80);

边界处理

遇到边界是应该停止掉还是反弹，方向相反。
改变物体运动方向：将物体的速度值取反。

//边界属性  浏览器视口宽高
//返回当前视口的高度（即浏览器窗口的高度）
console.log(document.documentElement.clientHeight);
console.log(document.documentElement.clientWidth);
// 网页总高度     body默认有margin，记得重置
console.log(document.body.clientHeight);
console.log(document.body.clientWidth);

var speedX = 2
 box.timer = setInterval(function(){
      box.style.left = box.offsetLeft + speedX +'px';
     //左右边界
     if(box.offsetLeft <=0 || box.offsetLeft >= cWidth - box.offsetWidth){
          speedX = -speedX;
     }
},80

加速减速

加速：速度越来越快。
减速：速度越来越慢。

box.timer = setInterval(function () {
  speedX = speedX + 2;
  div.style.left = div.offsetLeft + speedX + "px";
}, 50);

抛物线

水平方向有一速度，垂直方向有一速度，并做自由落体。

var speedY = 0;
var speedX = 10;
// x 方向  匀速
// y 方向  匀加速
box.timer = setInterval(function () {
  speedY += 9.8;
  box.style.left = box.offsetLeft + speedX + "px";
  box.style.top = box.offsetTop + speedY + "px";
}, 80);

透明度的变换

box 逐渐消失

//使用css将box的opacity 设置为1
var op = 1;
box.timer = setInterval(function () {
  op = op - 0.01;
  div.style.opacity = op;
  //或者
  //div.style.opacity = getComputedStyle(div).opacity - 0.01;
}, 80);

缓冲运动

速度一开始很大，然后慢慢变小，比较类似自然界中的缓冲运动

//一开始box 在 （0，0）位置，我们将box运动到（300,0）位置
var target = 300; //目标位置
box.timer = setInterval(function () {
  //target - div.offsetLeft 是元素距离目标的路程，随着越来越靠近目标，这个值就越来越小，如果把这个值当做速度，速度一开始很大，然后慢慢变小，比较类似自然界中的缓冲运动。如果把这个值直接当速度，一下子就到，所以除以8以后当做速度
  var speed = (target - div.offsetLeft) / 8;
  //所以要对速度向上取整得到速度1，当speed小于0.375的时候，div就不会移动了
  speed = Math.ceil(speed);
  box.style.left = div.offsetLeft + speed + "px";
  if (box.offsetLeft == target) {
    //到达目标清除定时器
    clearInterval(box.timer);
  }
}, 30);

考虑到运动的时候可能往前，也可以能往后，增加判断

//一开始box 在 （0，0）位置，我们将box运动到（300,0）位置
var target = 300; //目标位置
div.timer = setInterval(function () {
  var speed = (target - div.offsetLeft) / 8;
  //当speed小于0.375的时候，div就不会移动了
  //所以要对速度向上取整或者向下取整
  if (speed > 0) {
    //speed大于0 说明是往前运动
    //当speed小于0.375的时候，div就不会移动了
    //所以要对速度向上取整或者向下取整
    speed = Math.ceil(speed);
  } else {
    //speed大于0 说明是往后运动
    speed = Math.floor(speed);
  }
  div.style.left = div.offsetLeft + speed + "px";
  if (div.offsetLeft == target) {
    clearInterval(div.timer);
  }
}, 30);

上面代码封装为函数

function animate(div, targetX) {
  var target = targetX;
  div.timer = setInterval(function () {
    var speed = (target - div.offsetTop) / 8;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    div.style.top = div.offsetTop + speed + "px";
    if (div.offsetTop == target) {
      clearInterval(div.timer);
    }
  }, 30);
}

多属性缓冲运动函数封装

上面的封装只能固定的在 x 方向做动画
如果想让一个 div 从一个点运动到另一个点，怎么办？
比如从（0，0）到（100，200）
这个时候我们把第二个参数改为一个这样的对象 {left:100;top:200}

function animate(div, obj) {
  //{left:100;top:200}
  //{left:100}
  clearInterval(div.timer);
  div.timer = setInterval(function () {
    var flag = true; //假设已经到了目的地
    for (var key in obj) {
      console.log(key); //left   top
      console.log(obj[key]); //300
      var target = obj[key]; //目标值
      // getComputedStyle['left']  元素left 属性 当前值
      var speed = (target - parseInt(getComputedStyle(div)[key])) / 8;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      div.style[key] = parseInt(getComputedStyle(div)[key]) + speed + "px";
      if (parseInt(getComputedStyle(div)[key]) != target) {
        flag = false;
      }
    }
    //必须等到所有的 属性都到达目的地 才能结束定时器
    if (flag == true) {
      clearInterval(div.timer);
    }
  }, 30);
}

本文作者：人模人样的搬砖老段
本文链接：DOM 高级-运动
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

最后更新于:2020/01/28