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 相关文章推荐
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
Javascript 数组排序详解
Oct 22 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
vue组件开发之slider组件使用详解
Aug 21 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中ADODB类详解
2008/03/25 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
jquery插件之easing使用
2010/08/19 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
js实现批量删除功能
2020/08/27 Javascript
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
如何利用Python识别图片中的文字
2020/05/31 Python
python怎么调用自己的函数
2020/07/01 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
医药销售自荐书
2014/05/29 职场文书
施工安全标语
2014/06/07 职场文书
车辆转让协议书
2014/09/24 职场文书
Java异常处理try catch的基本用法
2021/12/06 Java/Android
Win11软件图标固定到任务栏
2022/04/19 数码科技