TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

13、JavaScript-运动

zyz
2018-05-17
/
0 评论
/
838 阅读
/
正在检测是否收录...
05/17

一、运动框架

  • 运动基础
  - 在开始运动时,关闭已有定时器;
  - 把运动和停止分隔开(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
      速度反转
      滚动条闪烁问题
      越界后直接拉回来
  • 加入重力
  - 反转速度的同时,减小速度
  - 纵向碰撞,横向速度也减小
  - 横向速度小数问题(负数)
赞(0)
评论 (0)