首页
所有分类
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 相关文章推荐
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 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
通知(159) 慰问信(53) 报告(147) 开幕词(63) 实用文书(952) 工作总结(1972) 导游词(322) 汇报材料(247) 计划(88) 闭幕词(9)
You might like
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
php解析xml方法实例详解
2015/05/12 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
详解照片瀑布流效果（js，jquery分别实现与知识点总结）
2017/01/01 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
Vue中引入样式文件的方法
2017/08/18 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
代码分析Python地图坐标转换
2018/02/08 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
销售总监工作职责
2013/11/21 职场文书
客服文员岗位职责
2013/11/29 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
邀请函的格式
2015/01/30 职场文书
撤诉申请怎么写
2015/05/19 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS