首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Javascript动画效果（3）

Posted in Javascript onOctober 11, 2016

前面我们已经介绍了速度动画、透明度动画、多物体运动和任意值变化，并且我们在Javascript动画效果（二）中介绍到我们封装了一个简单的插件雏形，接下来我们对前面的动画效果进行进一步扩充，尽量将我们的框架做到更实用。在这里我们还需要了解两个运动，一个是链式运动，一个是同时运动。它们间的区别分别是：链式运动是指运动一个接着一个（一个运动完成马上进行下一个运动）；而同时运动是指所有的运动同时进行。在这里，我们该如何实现呢？

1、链式运动

前面的效果中，我们已经能对任意值进行相应的变化，我们该如何在一个动画后添加一个动画呢？

思路：我们能不能在参数中传入一个函数，当一个效果完成后马上执行后面的函数（效果），该函数可以是想要的动画效果

实现：在function startMove(obj,attr,iTarget)中在传入一个参数fn，代表一个函数。这时我们还需要修改的有在定时器的后面增加一个判断if(fn){fn(); }，当存在fn函数时执行fn函数，当不存在fn函数时清除定时器。这样我们的window.onload函数也应该发生相应变化，代码如下：

window.onload = function() {
  var Li = document.getElementById('li1');
  Li.onmouseover = function() {
    startMove(Li, 'width', 400, function() {
      startMove(Li, 'height', 200, function() {
        startMove(Li, 'opacity', 100);
      });
    });
  };
  Li.onmouseout = function() {
    startMove(Li, 'opacity', 30, function() {
      startMove(Li, 'height', 100, function() {
        startMove(Li, 'width', 200);
      });
    });
  };
};

所以我们得到链式运动的如下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>链式运动</title>
    <style type="text/css">
      body,ul,li{ margin: 0px; padding: 0px; }
      ul,li{ list-style: none; }
      ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; border: 4px solid #000; filter:alpha(opacity:30); opacity:0.3; }
    </style>
     
  </head>
  <body>
    <ul>
      <li id="li1"></li>
    </ul>
    <script type="text/javascript">
      window.onload = function(){
        var Li = document.getElementById('li1');
        Li.onmouseover = function(){
          startMove(Li,'width',400,function(){
            startMove(Li,'height',200,function(){
              startMove(Li,'opacity',100);
            });
          });
        };
        Li.onmouseout = function(){
          startMove(Li,'opacity',30,function(){
            startMove(Li,'height',100,function(){
              startMove(Li,'width',200);
            });
          });
        };
      };
     
      function startMove(obj,attr,iTarget,fn){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
          var icur = 0;
          if(attr == 'opacity'){
            icur = Math.round(parseFloat(getStyle(obj,attr))*100);
          }else{
            icur = parseInt(getStyle(obj,attr));
          }
          var speed = (iTarget - icur)/10;
          speed = speed>0?Math.ceil(speed):Math.floor(speed);
          if(iTarget == icur){
            clearInterval(obj.timer);
            if(fn){
              fn();
            }
          }
          else{
            if(attr == 'opacity'){
              obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
              obj.style.opacity = (icur+speed)/100;
            }
            else{
              obj.style[attr] = icur+speed+'px';
            }
          }
        },30)
      }   
       
      function getStyle(obj,attr){
        if(obj.currentStyle){
          return obj.currentStyle[attr];
        }
        else{
          return getComputedStyle(obj,false)[attr];
        }
      }
    </script>
  </body>
</html>

2、同时运动

说到同时运动，你可能会觉得很简单，直接在onmouseover事件后面同时添加两个不同的starMove（）函数就可以解决了（错误思路！），实际上并不是这样的，当有多个效果时，我们看到的是最后添加的那个效果。也就是说我们想同时改变宽度和高度（高度在后），我们得到的效果为只改变高度，宽度并没有变化。这里我们应该继续传参数么？从链式运动来看，传参数的效果只能在后面添加函数得到连续的动画效果。

思路：我们可不可以用JSON的方法来同时改变多个动画效果？

实现：将function startMove(obj,attr,iTarget,fn)中的attr和iTarget合并为一个参数：json，我们用for/in的方法来遍历json中的数据，例如：

var json = {"a":12,"b":21};
for(var attr in json){
  alert(json);//结果分别是：a，b
  alert(json[attr]);//结果分别是：12，21
}

 按照此方法，我们依次改变前面的代码：在定时器函数的后面加上代码：for(var attr in json) {...}，并且修改里面的iTarget为json[attr]，再将window.onload函数修改为：

window.onload = function() {
  var Li = document.getElementById('li1');
  Li.onmouseover = function() {
    startMove(Li, {
      width: 400,
      height: 200,
      opacity: 100
    });
  };
  Li.onmouseout = function() {
    startMove(Li, {
      width: 200,
      height: 100,
      opacity: 30
    });
  };
};

 这时我们差不多就可以得到我们想要的效果了，但是这样离我们最终的效果还是查了那么一点点，比如说我们将onmouseover事件中的starMove中的width修改为202，再执行我们的代码，我们会发现最终的height不是200px，opacity也不是100，如图：

这样就很尴尬了，之前我们的效果不是还蛮好的么？我们再回到我们的JS代码中分析结构，觉得最有可能出错的就是starMove函数中，我们发现这段代码的意思有点难理解：

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

我们并不知道是不是所有的运动都到达终点时停止所有运动还是当只有一个运动达到终点时立马停止所有运动。但是通过我们前面的操作，可以知道的实际结果为，只有一个运动到达终点值时，所有的运动都停止了（此时还有运动没执行完），我们该如何进行操作呢？

思路：我们可以假定一个参数flag，并且赋值为true，在执行clearInterval(obj.timer);操作前我们先进行判断if(json[attr] != icur) { flag = false;}，后面执行之前else里面的语句，再执行如下语句if(flag = true) {clearInterval(obj.timer); if(fn) {fn();}}，这样我们就可以得到同时运动的完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>链式运动</title>
    <style type="text/css">
      body,ul,li{ margin: 0px; padding: 0px; }
      ul,li{ list-style: none; }
      ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; border: 4px solid #000; filter:alpha(opacity:30); opacity:0.3; }
    </style>
     
  </head>
  <body>
    <ul>
      <li id="li1"></li>
    </ul>
 
    <script type="text/javascript">
      window.onload = function(){
        var Li = document.getElementById('li1');
        Li.onmouseover = function(){
          startMove(Li,{width:202,height:200,opacity:100});
        };
        Li.onmouseout = function(){
          startMove(Li,{width:200,height:100,opacity:30});
        };
      };
       
      function getStyle(obj, attr) {
        if(obj.currentStyle) {
          return obj.currentStyle[attr];
        } else {
          return getComputedStyle(obj, false)[attr];
        }
      }
       
      function startMove(obj, json, fn) {
        //定义标杆
        var flag = true; //假设的
       
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
          for(var attr in json) {
            var icur = 0;
            if(attr == 'opacity') {
              icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            } else {
              icur = parseInt(getStyle(obj, attr));
            }
            var speed = (json[attr] - icur) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(json[attr] != icur) {
              flag = false;
            }
            if(attr == 'opacity') {//判断是否为opacity
              obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
              obj.style.opacity = (icur + speed) / 100;
            } else {
              obj.style[attr] = icur + speed + 'px';
            }
            if(flag){
              clearInterval(obj.timer);
              if(fn){
                fn();
              }
            } 
          }
        }, 30)
      }
    </script>
  </body>
</html>

 这样我们的同时运动的动画效果就实现了。在这里，你有没有觉得很神奇？

在这里我们已经将一个简单的运动插件封装完成了，我们将里面的代码做一些解释，并且将它保存为一个foodoir.animate.js文件，代码如下：

/*
 * 简单的运动框架
 * 作者：foodoir
 * 此框架仅作参考！！！
 *
 * 使用方法见博文
 */
 
function getStyle(obj, attr) {
  if(obj.currentStyle) {
    return obj.currentStyle[attr];
  } else {
    return getComputedStyle(obj, false)[attr];
  }
}
 
function startMove(obj, json, fn) {
 
  clearInterval(obj.timer); //清除定时器，避免重复生成多个定时器
  obj.timer = setInterval(function() {
    var flag = true; //假设刚开始时所有运动都已完成
    for(var attr in json) { //遍历json
 
      var icur = null;
      //1.判断类型
      if(attr == 'opacity') {
        icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
      } else {
        icur = parseInt(getStyle(obj, attr));
      }
      //2.算速度
      var speed = (json[attr] - icur) / 5;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      //3.检测停止
      if(icur != json[attr]) {
        flag = false;
      }
      if(attr == 'opacity') {
        obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
        obj.style.opacity = (icur + speed) / 100;
      } else {
        obj.style[attr] = icur + speed + 'px';
      }
    }
    if(flag) { //当所有运动都完成时，清除定时器
      clearInterval(obj.timer);
      if(fn) {
        fn();
      }
    }
  }, 30);
}

 后面，我们将介绍用自己的框架来实现多种动画效果，并且和jquery中的动画效果进行比较。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Javascript动画效果（3）

- Author -

foodoir

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
jQuery 通过事件委派一次绑定多种事件，以减少事件冗余
Jun 30 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
JavaScript实现自动切换图片代码
Oct 11 #Javascript
Javascript动画效果（2）
Oct 11 #Javascript
Javascript动画效果（1）
Oct 11 #Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 #Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 #Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 #Javascript
Node.js的文件权限及读写flag详解
Oct 11 #Javascript
DE1105(1) 239军机(1) 根德5570(1) AN-LP1(1) SONY600GR(1) ICF-903L(1) frg-100(1) DE1103(2) DE1107(3) YAESU(1)
You might like
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
中止javascript执行的方法
2014/02/14 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
python实现kNN算法
2017/12/20 Python
Python中pillow知识点学习
2018/04/30 Python
Python中extend和append的区别讲解
2019/01/24 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
加拿大留学自荐信
2014/01/28 职场文书
称象教学反思
2014/02/03 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
python基础详解之if循环语句
2021/04/24 Python
Python中request的基本使用解决乱码问题
2022/04/12 Python