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 相关文章推荐
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
发布一个用PHP fsockopen写的HTTP下载的类
2007/02/22 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
Yii学习总结之安装配置
2015/02/22 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
Python 的 Socket 编程
2015/03/24 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
如何使用Pytorch搭建模型
2020/10/26 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
老教师工作总结的自我评价
2013/09/27 职场文书
给领导的致歉信范文
2014/01/13 职场文书
社区消防工作实施方案
2014/03/21 职场文书
党员干部公开承诺书
2014/03/26 职场文书
学生手册评语
2014/05/05 职场文书
计划生育标语
2014/06/23 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书