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 相关文章推荐
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 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
Terran兵种对照表
2020/03/14 星际争霸
用 PHP5 轻松解析 XML
2006/12/04 PHP
让PHP支持页面回退的两种方法
2008/01/10 PHP
PHP insert语法详解
2008/06/07 PHP
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
JavaScript日历实现代码
2010/09/12 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
javascript中this关键字详解
2016/12/12 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
Form表单上传文件(type="file")的使用
2017/08/03 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python之读取TXT文件的方法小结
2018/04/27 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
大学生推广普通话演讲稿
2014/09/21 职场文书
2015年创先争优活动总结
2015/03/27 职场文书