JS运动特效之完美运动框架实例分析


Posted in Javascript onJanuary 24, 2018

本文实例讲述了JS运动特效之运动框架。分享给大家供大家参考,具体如下:

在前面一篇的《js运动特效之同时运动》中说过,我们的运动框架还存在一个问题,那究竟是什么问题那?把上一篇的程序做一下调整

oDiv.onmouseover = function () {
   //startMove(oDiv,{width:300,height:300,opacity:30});
   startMove(oDiv,{width:204,height:300,opacity:30});
}

在鼠标移入的时候,我们让width不变成300,而是变成204,看看会有什么变化那??

JS运动特效之完美运动框架实例分析

从图可以看出,当鼠标移入的时候,只有宽度达到了预期的值204,而height和opacity都没有达到目标值(目标值是300和0.3),这是为什么那??是下面的问题引起的

if(objAttr == json[attr]){
    clearInterval(obj.timer);
    if(fn){
      fn();
    }
}

if语句里只是判断当objAttr 等于目标值的时候就清除定时器(也就是说只要有一个属性到达目标值就进入if,清除定时器),并不是判断“所有的运动”都达到了目标值;width从200变成204很快就达到目标值了,而此时height和opacity还在半路上;但是由于width已经达到了目标值,所以就进入if语句清除了定时器,width,height,opacity它们用的是一个定时器,所以此时height和opacity就定格在半道上永远无法达到目标值了。

那怎么解决那???

1. 在进入定时器的时候,设置一个标志位var flag ,用它来检测是否所有的运动都到达目标值

function startMove(obj,json,fn) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
       var flag = true;// 一进入定时器设置标志位
      },30);
}
var flag = true;// 表示所有的运动都到达目标值
var flag = false;// 表示有的运动没有到达目标值

2 . 接着在检测运动是否停止的语句中做判断

if(objAttr != json[attr]){// 判断是否所有的运动都达到目标值
     // 进入if语句,说明至少有一个 运动未到达目标值
     flag = false;
}

for...in.循环里面每一个属性做变化(widht,height,opacity...),只要有一个属性变化没有到达目标值,flag标志的值就是false;然后在整个for...in..循环之外判断flag的值,如果依然为true就标志“所有的运动”都到达了目标值,此时就可以清除定时器了

for(attr in json){
}
if(flag){// 再次判断flag的值
  clearInterval(obj.timer);
  if(fn){
    fn();
  }
}

定时器每隔30毫秒执行一次,每次进入首先设置var flag =true ,然后向下执行,每一回都要判断

if(objAttr != json[attr]){ ... }只要有一个运动没有达到目标值,都会进入执行if语句,把flag设为false,当定时器最后一次执行的时候,发现所有的属性都到达了目标值,此时if语句就不成立了,就没机会把flag设为flase了,所以最后一次进入定时器flag的始终是true;接着就满足了if(flag){  ...  }的条件,接着进入if(flag){  ...  }执行。

到这里就完美了,看下效果

JS运动特效之完美运动框架实例分析

完整测试代码:

Hhtm部分和css部分和上一篇完全一样。js代码如下

<script>
    window.onload = function(){
      var oDiv = document.getElementById('div1');
      oDiv.onmouseover = function () {
        //startMove(oDiv,{width:300,height:300,opacity:30});
        startMove(oDiv,{width:204,height:300,opacity:30});
      }
      oDiv.onmouseout = function () {
        startMove(oDiv,{width:200,height:200,opacity:100});
      }
    }
    function getStyle(obj,attr){
      return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
    }
    function startMove(obj,json,fn) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var bStop = true;
        for(attr in json){
          // 1. 取得当前的值(可以是widht,height,opacity等的值)
          var objAttr = 0;
          if(attr == "opacity"){
            objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
          }else{
            objAttr = parseInt(getStyle(obj,attr));
          }
          // 2.计算运动速度
          var iSpeed = (json[attr] -objAttr)/10;
            iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
          // 3. 检测所有运动是否到达目标
          if(objAttr != json[attr]){
            bStop = false;
          }
          if(attr == "opacity"){
            obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
            obj.style.opacity = (objAttr+iSpeed)/100;
          }else{
            obj.style[attr] = objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]
          }
        }
        if(bStop){ // 表示所有运动都到达目标值
          clearInterval(obj.timer);
          if(fn){
            fn();
          }
        }
      },30);
    }
</script>

到这里我们就可以把这个运动框架单独出来,保存成js文件供我们以后享用了!

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
VUE实现日历组件功能
Mar 13 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 #Javascript
JS运动特效之链式运动分析
Jan 24 #Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 #Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 #Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 #Javascript
详解node child_process模块学习笔记
Jan 24 #Javascript
浅谈Node.js 子进程与应用场景
Jan 24 #Javascript
You might like
PHP4实际应用经验篇(3)
2006/10/09 PHP
推荐php模板技术[转]
2007/01/04 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
PHP生成压缩文件实例
2015/02/07 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
vue生命周期的探索
2019/04/03 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
Python 除法小技巧
2008/09/06 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
python绘制雷达图实例讲解
2021/01/03 Python
大学生自我评价怎样写好
2013/10/23 职场文书
应聘美工求职信
2013/11/07 职场文书
教师评优事迹材料
2014/01/10 职场文书
党员政治学习材料
2014/05/14 职场文书
体育教师个人工作总结
2015/02/09 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书