13、JavaScript-运动

每天一句：前进缓慢没关系，只要你别停下脚步。

一、运动框架

• 运动基础

  - 在开始运动时，关闭已有定时器；
  - 把运动和停止分隔开(if/else)；

案例: div的移动
案例: startMove的封装(分享到)
案例: 图片的淡入淡出

• 缓冲运动

  - 逐渐变慢，最后停止(越接近终点速度越小)
  - 距离越远速度越大
    > 速度由距离决定
    > 速度 = (目标值-当前值)/缩放系数

  向上取整: Math.ceil(12.3);  // 13
  向下取整: Math.floor(7.9);     // 7                  
           Math.floor(-2.1) // -3
  绝对值:   Math.abs(-5);          // 5

  window.scroll窗口滚动事件
   // 兼容问题 (获取滚动条位置 )
   var top = document.documentElement.scrollTop || document.body.scrollTop;

案例: 始终在窗口中间位置显示—分享到
案例: 分享到闪烁问题(缓冲运动的具体使用)
案例: 匀速运动

• 运动终止条件

缓冲运动: 两点重合
匀速运动: 距离足够近

二、多物体运动框架

多个物体同时运动:
  - 将定时器作为物体的属性
  - 参数的传递: 物体、目标值
    > 所有东西都不能公用(不然肯定会出问题)
    > 属性与运动对象绑定: 速度、其他属性(例如透明度等)

案例: 物体变宽(缓冲)
案例: 多物体变宽

三、任意值运动框架

offsetWidth(offset..都有这类问题):
    offsetWidth: div自身宽度width + div的padding + div的border

#div1{
    width: 100px;
    height: 100px;
    background: paleturquoise;          
    /*修改样式以后，div会自动变宽了*/
    border: 1px solid gray;
}
// 原本是自动变小的，但加上边框后，div自动变大
oDiv.style.width = oDiv.offsetWidth - 1 + 'px';
 
分析: oDiv.offsetWidth是102px，当每次定时器触发的时候，oDiv.offsetWidth都会减去1，那么减去的就1px值，但下次过后不要忘记还有边框border: 2px值；
width: 100px        offSetWidth: 102px      width: 102px - 1px = 101px;
width: 101px        offSetWidth: 103px      width: 103px - 1px = 102px;
width: 102px        offSetWidth: 104px      width: 104px - 1px = 103px;
….


备注:  之后项目时，最好不要使用offsetWidth/offsetHeight..，因为这个非常容易出问题，学习阶段可以使用，因为简单。更多对于内联样式也不方便操作，那么即可以通过以下方式获取到对应样式，然后进行操作;
  // 不建议使用的
  //oDiv.style.width = oDiv.offsetWidth - 1 + 'px';
  // 内联样式，操作不方便
  // oDiv.style.width = parseInt(oDiv.style.width) - 1 + 'px';
  // 注意: 属性是字符串来的   —  推荐使用方式
  oDiv.style.width = parseInt( getStyle(oDiv, 'width') ) - 1 + 'px';

  // 获取属性名对应的属性值
  function getStyle(obj, att){
    return window.getComputedStyle ? getComputedStyle(obj)[att] : obj.currentStyle[att];
  }

案例: 任意值变化封装
案例: 任意值变化(透明度处理)
案例: 图片详情展示
案例: 仿flash图片轮播

四、链式运动框架

• 回调函数

  > 运动停止时，执行函数；
  > 运动停止时，开始下一次运动;

• JSON数据格式
  JSON是一种轻量级的数据交换格式，JSON采用完全独立于语言的文本格式，这些特性使得JSON成为理想的数据交换语言。易于阅读和编写，同时也易于机器解析和生成。

JSON的构建结构: “关键字/值”这种键值对的结合;
        var json = {
                        name: 'liming', 
                        sex: '男', 
                        price: [98, 80, 100]
                     };
        // 访问方式
        alert(json.name);       // 通过点语法访问
        alert(json['sex']); // 通过方括号

        // json的遍历
        // 遍历的key就是JSON的关键字
        for(key in json){
            // 取出关键字对应的值
            alert(json[key]);
        }

案例: setStyle封装

五、完美运动框架

多个值同时变化
  > setStyle同时设置多个属性
    - 参数传递
         json的使用
        forin遍历属性
  > 运用到运动框架
  > 检测运动停止
     - 标志变量

六、运动框架应用

案例: 循环滚动(无缝衔接)

七、碰撞运动

• 碰撞运动

  - 撞到目标点，速度反转
  - 无重力的悬浮div
      速度反转
      滚动条闪烁问题
      越界后直接拉回来

• 加入重力

  - 反转速度的同时，减小速度
  - 纵向碰撞，横向速度也减小
  - 横向速度小数问题(负数)