day11-DOM高级运动

运动也可以叫做动画

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

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

},80)

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

//边界属性浏览器视口宽高
//返回当前视口的高度（即浏览器窗口的高度）
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

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

box.timer = setInterval(function() {
speedX = speedX + 2;
div.style.left = div.offsetLeft + speedX + 'px';

}, 50);

4：抛物线
水平方向有一速度，垂直方向有一速度，并做自由落体。

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)

5：透明度的变换
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);

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

//一开始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);
上面代码封装为函数

7：多属性缓冲运动函数封装
上面的封装只能固定的在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);

}

上面咱们就封装了一个运动函数，也可以叫运动框架，说白了，就是封装一次以后，我们再做一些动画就非常方便！前人栽树后人乘凉，便是框架的好处！

如果想让框架支持透明度动画怎么办呢？无非是增加更多的判断
运动框架最终封装见animateBak.js

图片的淡入淡出
侧边栏分享广告
综合应用：
1：缓冲运动的封装。