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中setTimeout的几种使用方法小结
Apr 07 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 Javascript
JS前端基于canvas给图片添加水印
Nov 11 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 采集书并合成txt格式的实现代码
2009/03/01 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
详解php用static方法的原因
2018/09/12 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
Python批量转换文件编码格式
2015/05/17 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
2014年保险业务员工作总结
2014/12/23 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
军事博物馆观后感
2015/06/05 职场文书
Win11更新失败并提示0xc1900101
2022/04/19 数码科技