美文网首页
运动框架总结

运动框架总结

作者: jacklin1992 | 来源:发表于2016-08-07 10:03 被阅读20次

(function(a)
{
var json={};

  //测试函数
  function test() {alert("test")}
 
  //toMove 
  function toMove(obj,json,endFn)
    {
        clearInterval(obj.timmer);
        obj.timmer = setInterval(function()
            {
                var bStop = true;
                for(attr in json)
                {
                  curr  = attr=="opacity"?parseInt(getStyle(obj,attr)*100):parseInt(getStyle(obj,attr));
                  if(json[attr] != curr)bStop=false; 
                  speed =(json[attr]-curr)/6;
                  speed = speed>0?Math.ceil(speed):Math.floor(speed);
                  curr += speed;
                  obj.style[attr] = attr=="opacity"?curr/100:curr +'px';
                }
                if(bStop == true)   
                {
                    clearInterval(obj.timmer);
                    if(endFn)endFn();
                }   
            },30)
    }

    //getStyle
    function getStyle(obj,attr)
    {
        if(obj.currentStyle)
        {
          return obj.currentStyle;
        }else{
          return getComputedStyle(obj,null)[attr];  
        }
    }
 
 //将方法插入json,并将json赋值给传入的变量;
  json.test = test;
  json.getStyle = getStyle;
  json.toMove = toMove;
  window[a] = json;
})('jacklin')

这个运动框架有以下几个知识点:
1、offsetWidth 有局限性,当加了边框之后,offser... 取得的值不准确,所以要用 ie的currentStyle 和 其他浏览器的 getComputedStyle 来封装一个取得当前所需要的属性值的工具。
2、缓冲运动速度计算时候回遇到一个问题,当速度很小小于1的时候,浏览器不接受,比如1.99999px,浏览器会认为是1px,所以会在目标之前卡住,解决方法是有向上取整和向下取整的方法,将速度变为正1或-1,把最后的距离走完。
3、定时器和所有值都不能共有,因为当多物体运动的时候,要区分每个定时器和属性,不然会产生混乱。方法是给属性和定时器加上obj. 将他们定义为这个对象的属性。
4、单个物体不断触发运动事件会造成同时开启多个定时器,所以,运动开始之前要先清除之前的定时器。
5、当多属性值同时运动的时候,有可能一个属性值先到达了终点,但是假如这个时候清除定时器,就会卡主,所以到要等其他的属性值都到达了才能清除定时器,做法是,定时器刚进来的时候,就定义bStop = true,假设每个值都到了,在json遍历进来的时候定义,假如存在curr != json[attr] 那么bStop = false ;这个时候,假如第一个值已经到了,定时器不会停止,而已经到了的值,由于curr = json[attr] 速度值一直为0,所以就等着其他的都到了之后,在json遍历的外部定义,假如bStop = true,就停止定时器,并出发定义的链式函数。
6、链式运动其实就是加上一个函数作为参数,在运动结束的时候判断,假如设定了这个函数,就运行它,if(endFn)endFn();
7、最后,类似于库的封装的思路,()() 第一个括号里面写函数,就相当于定义并且执行这个函数,在第二个括号里面传入参数,在第一个括号里面的函数里写入形参。函数里面就把函数中所有的方法,加入到一个json里面,最后,将传进来的参数作为去全局变量.window[jacklin] = json,这样,以后再调用这个库所有的方法的时候,只需要用到jacklin这一个参数,不污染其他的变量。

相关文章

  • 运动框架总结

    (function(a){var json={}; 这个运动框架有以下几个知识点:1、offsetWidth 有局...

  • 运动框架

    1、querySelector: 类似于getElementById。 获取出来的元素只有一个,是第一个符合条件的...

  • 运动框架

    一、JSON学习 1. 最简单的JSON示例 JSON叫做JavaScript Object Notation, ...

  • 完美运动框架

    完美运动框架封装 完美运动框架调用 封装完美运动框架遇到的问题? 1.timer问题如果我们只保存一个timer变...

  • JavaScript——运动

    一、运动框架 二、匀速运动 三、缓冲运动

  • java集合框架学习总结

    title: java集合框架学习总结 tags:集合框架 categories:总结 date: 2017-03...

  • js运动框架

    一个块的运动前提是让他脱离文档流,在给他定位了之后,手动修改它的top和left值,他就会运动,就是相对他原来的位...

  • CSS布局与JS结合 实现某宝店铺首页

    前几天根据学习的知识整理的JS运动框架,这里直接引用JS运动框架,页面主要是实现css网页布局与JS运动、事件,随...

  • Java集合框架总结篇

    Java集合框架总结篇

  • python四种web框架总结以及MySQL优化

    一、总结一下四种常用的web框架:Django,Flask,Tornado,Bottle 1.MVC: 总结框架之...

网友评论

      本文标题:运动框架总结

      本文链接:https://www.haomeiwen.com/subject/vtklsttx.html