Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)


Posted in Javascript onJanuary 23, 2015

大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的。实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动。

那这个问题怎么解决呢? 我们先来看看之前的运动框架

function getStyle(obj, name) {
  if (obj.currentStyle) {
    return obj.currentStyle[name];
  } else {
    return getComputedStyle(obj, null)[name];
  }
}


function startMove(obj, attr, iTarget) {
  clearInterval(obj.time);
  obj.time = setInterval(function() {
    var cur = 0;

    if (attr == 'opacity') {
      cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
    } else {
      cur = parseInt(getStyle(obj, attr));
    }

    var speed = (iTarget - cur) / 6;

    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

    if (cur == iTarget) {
      clearInterval(obj.time);
    } else {
      if (attr == 'opacity') {
        obj.style.filter = 'alpha(opacity=' + cur + speed + ')';
        obj.style.opacity = (cur + speed) / 100;
      } else {
        obj.style[attr] = cur + speed + 'px';
      }
    }
  }, 30);
}

怎么修改呢? 实际上很简单, 在过去的框架中,你每一次只能传一个样式,和一个值。那么现在把这些改成一个json对象。相信大家就明白了。

我们调用的时候就是startMove(oDiv,{width:200,height:200}); 如果需要的话就在加上回调函数。那么我们具体看看代码是怎么修改的。

function startMove(obj, json, fnEnd)
{
  var MAX=18;
  //每次调用就只有一个定时器在工作(开始运动时关闭已有定时器)
  //并且关闭或者开启都是当前物体的定时器,已防止与页面上其他定时器的冲突,使每个定时器都互不干扰 
  clearInterval(obj.timer); 
  obj.timer=setInterval(function (){
    
    var bStop=true; // 假设:所有的值都已经到了
    
    for(var name in json)
    {
      var iTarget=json[name]; // 目标点
      
      //处理透明度,不能使用parseInt否则就为0了 
      
      if(name=='opacity')
      {
        
        // *100 会有误差 0000007 之类的 所以要用 Math.round() 会四舍五入
        var cur=Math.round(parseFloat(getStyle(obj, name))*100); 
      }
      else
      {
        var cur=parseInt(getStyle(obj, name)); // cur 当前移动的数值
      }
      
      var speed=(iTarget-cur)/5; // 物体运动的速度 数字越小动的越慢 /5 : 自定义的数字
      
      speed=speed>0?Math.ceil(speed):Math.floor(speed);
      
      if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;
      
      if(name=='opacity')
      {
        obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE
        obj.style.opacity=(cur+speed)/100; //ff chrome
      }
      else
      {
        obj.style[name]=cur+speed+'px';
      }
      
      // 某个值不等于目标点 
      if(cur!=iTarget)
      {
        bStop=false;
      }
    }
    
    // 都达到了目标点
    if(bStop)
    {
      clearInterval(obj.timer);
      
      if(fnEnd) //只有传了这个函数才去调用
      {
        fnEnd();
      }
    }
  }, 20);
}

为什么会有bstop的假设呢?

其实如果我这样调用startMove(oDiv,{width:101,height:200}); 宽度变成101 已经完成运动了,高度没有到, 但是我们可能已经关闭了当前的定时器。运动已经结束了,就会出现一个特殊情况下的bug。解释一下:

实际上来说,需要所有的运动都到了才关闭定时器,反过来说,如果没有不到的,那就关闭。在程序上就是定义一个布尔值,一开始为true,假设

所有的值都已经到了,如果说有一个值不等于目标点,bstop为false 。 在整个循环结束后,bstop 为ture 就说明所有运动都完成了,这个时候就关闭定时器。

那么这个运动框架基本已经完成了,适用css2 不适用css3。

总结:

运动框架的演变过程

startMove(iTarget) 运动框架
startMove(obj,iTarget) 多物体
startMove(obj,attr,iTarget) 任意值
startMove(obj,attr,iTarget,fn) 链式运动
startMove(obj,json,fn) 完美运动

O(∩_∩)O谢谢 ~

Javascript 相关文章推荐
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
jquery异步请求实例代码
Jun 21 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
jQuery选择器querySelector的使用指南
Jan 23 #Javascript
jQuery中DOM操作实例分析
Jan 23 #Javascript
jquery实现点击页面计算点击次数
Jan 23 #Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 #Javascript
PHP实现的各种中文编码转换类分享
Jan 23 #Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 #Javascript
You might like
php简单静态页生成过程
2008/03/27 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
php常用表单验证类用法实例
2015/06/18 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
python实现基本进制转换的方法
2015/07/11 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
python suds访问webservice服务实现
2020/06/26 Python
物流管理专业毕业生求职信
2014/03/23 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
python实现Thrift服务端的方法
2021/04/20 Python
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL