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学习笔记 nt-child的使用
Jan 17 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 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读取csv文件内容的详解
2013/06/18 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
微信小程序用canvas画图并分享
2020/03/09 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
python的sorted用法详解
2019/06/25 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
作为网站管理者应当如何防范XSS
2014/08/16 面试题
建国大业电影观后感
2015/06/01 职场文书
院系推荐意见
2015/06/05 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
Python装饰器详细介绍
2022/03/25 Python
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers