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

Javascript动画效果（1）

Posted in Javascript onOctober 11, 2016

前面我们介绍了Javascript的回到顶部效果，今天呢，我们对Javascript动画做进一步的研究。在这篇博文中我们只介绍简单的匀速运动、简单的缓冲运动和简单的多物体运动后面我们还会介绍任意值变化的运动、链式运动、同时运动，同时我们还会简单的封装一个运动插件并且还会将Javascript方法和jquery方法进行比较。

1、简单的匀速运动

下面我们介绍一个demo，鼠标移入，动画向右移动（即隐藏部分显示）；鼠标离开，动画向左运动（继续隐藏）整个过程都是匀速的。有了前面回到顶部效果作为基础，这里主要讲解重要部分，先来看看代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <style type="text/css">
      body,div,span{
        margin: 0px;
        padding: 0px;
      }
      #div1{
        width: 200px;
        height: 200px;
        background: red;
        position: relative;
        left: -200px;
      }
      #share{
        width: 20px;
        height: 40px;
        background: blue;
        position: absolute;
        left: 200px;
        top: 75px;
      }
    </style>
    <script type="text/javascript">
      //一进来就加载
      window.onload = function(){
        //获取div
        var oDiv = document.getElementById('div1');
        //鼠标移入时执行函数
        oDiv.onmouseover = function(){
          startMove();
        }
        //鼠标移出时执行函数
        oDiv.onmouseout = function(){
          startMove1();
        }
      }
      //定义一个定时器
      var timer = null;
      function startMove(){
        //让它一进来的时候就把计时器清掉，避免后面引入多个计时器
        clearInterval(timer);
        var oDiv = document.getElementById('div1');
        //插入一个定时器
        timer = setInterval(function(){  
//         oDiv.style.left = oDiv.offsetLeft+10+'px';
//         //offsetLeft    当前left的值
//         //此时运行的结果为鼠标移上去后，一直在动，此时需要if进行判断
          if(oDiv.offsetLeft == 0){
            //当当前的left值为0的时候，清空计时器
            clearInterval(timer);
          }
          else{
            //当当前的left值不为0的时候，进行移动
            oDiv.style.left = oDiv.offsetLeft+10+'px';
          }
        },30)
      } 
       
      function startMove1(){
        clearInterval(timer);
        var oDiv = document.getElementById('div1');
        timer = setInterval(function(){
          if(oDiv.offsetLeft == -200){
            clearInterval(timer);
          }
          else{
            oDiv.style.left = oDiv.offsetLeft-10+'px';
          }
        },30)
      }
         
        //可以修改当前内容里面相同的部分
         
    </script>
  </head>
  <body>
    <div id="div1">
      <span id="share">
        分享
      </span>
    </div>
     
  </body>
</html>

在Javascript部分，我们发现有很多代码重复了，这时我们可以通过将不同的地方用参数的方法传进去，主要代码如下：

/*
 * 前面的onmouseover和onmouseout事件中分别改为
 * startMove(10,0);
 * startMove(-10,-200);
 * 后面再将  startMove和startMove1两个函数进行合并，代码如下：     
 */
function startMove(speed,iTarget){
  clearInterval(timer);
  var oDiv = document.getElementById('div1');
  timer = setInterval(function(){
    if(oDiv.offsetLeft == iTarget){
      clearInterval(timer);
    }
    else{
      oDiv.style.left = oDiv.offsetLeft+speed+'px';
    }
  },30)
}

此时我们还是会发现一个问题，就是，在功能相同的情况下，参数越少越好，这时我们要对我们之前的代码做进一步修改，因为iTarget是目标值，所以我们考虑将speed参数去掉，代码如下：

//考虑参数越少越好原则，可以去掉speed，同时，前面的onmouseover和onmouseout事件也应相应改变
function startMove(iTarget){
  clearInterval(timer);
  var oDiv = document.getElementById('div1');
  timer = setInterval(function(){
    //定义一个speed
    var speed = 0;
    //对speed进行判断
    if(oDiv.offsetLeft > iTarget){
      //当oDiv.offsetLeft > iTarget时，应该向左移动
      speed = -10;
    }
    else{
      speed = 10;
    }
     
    if(oDiv.offsetLeft == iTarget){
      clearInterval(timer);
    }
    else{
      oDiv.style.left = oDiv.offsetLeft+speed+'px';
    }
  },30)
}

到这里，我们的匀速运动效果基本完成。在上面的demo中，我们改变的是left效果，同理我们还可以改变right，width和height效果。思考：在css3动画中有改变透明度的效果，在这里我们是否可以通过前面的方式来得到实现呢？
答案：大致可以用上面的方法去实现，但是有个小小的问题值得注意，无论是left，right还是width，height它们都有单位px（在上面的demo中，有一行代码就是这样：oDiv.style.left = oDiv.offsetLeft+speed+'px';），而透明度无论是opacity也好，是filter也好，它们都是没有单位的，故我们可以写如下代码：

alpha += speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>demo2</title>
    <style type="text/css">
      body,div{
        margin: 0px;
        padding: 0px;
      }
      #div1{
        width: 200px;
        height: 200px;
        background: red;
        filter: alpha(opacity:30);
        opacity: 0.3;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var oDiv = document.getElementById('div1');
        oDiv.onmouseover = function(){
          startMove(100);   //鼠标移入的时候，透明度为100%
        }
        oDiv.onmouseout = function(){
          startMove(30);   //鼠标移出的时候，透明度为30%
        }
      }
      var timer = null;
      var alpha = 30;
      function startMove(iTarget){
        var oDiv = document.getElementById('div1');
        clearInterval(timer);    //在运行之前，先关闭定时器
        //关了定时器后，现在运行时需要加定时器
        timer = setInterval(function(){
          var speed = 0;
          if(alpha > iTarget){
            speed = -10;
          }
          else{
            speed = 10
          }
          if(alpha == iTarget){
            clearInterval(timer);
          }
          else{
            alpha += speed;
            oDiv.style.filter = 'alpha(opacity:'+alpha+')';
            oDiv.style.opacity = alpha/100;
          }
        },30)       
      }
       
    </script>
  </head>
  <body>
    <div id="div1">
      要求：
      <p>鼠标移入，透明度为100%；鼠标移出，透明度为30%</p>
    </div>
  </body>
</html>

到这里，我们的速度动画就告一段落了。关于opacity和filter，详情请见这里

2、缓冲运动

回忆之前回到顶部效果，为了增加用户的体验效果，回到顶部时是先快后慢。有了前面的基础，这里句很好办了，以demo1为例，我们可以添加如下代码：

function startMove(iTarget){
        var oDiv = document.getElementById('div1');
        clearInterval(timer);
        timer = setInterval(function(){
          var speed = (iTarget - oDiv.offsetLeft)/20;
          speed = speed>0?Math.ceil(speed):Math.floor(speed);
          //注意这里的取整问题，不然运动后回不到原来的位置
//         if(speed > 0){
//           speed = Math.ceil(speed);
//         }
//         else{
//           speed = Math.floor(speed);
//         }
          if(iTarget == oDiv.offsetLeft){
            clearInterval(timer);
          }
          else{
            oDiv.style.left = oDiv.offsetLeft+speed+'px';
          }
        },30)
      }

在这段代码中，var speed = (iTarget - oDiv.offsetLeft)/20;通过控制被除数可以控制动画的速度，然后我们分别用Math.floor和Math.ceil分别进行向下和向上取整，如果没用取整，那么鼠标移入和移出都达不到想要的效果（计算机在进行计算时总是有误差的）。到这里，缓冲运动也介绍的差不多了。下面我们来介绍多物体运动。

3、多物体运动

有了前面的基础，我们来看多物体运动时就觉得简单了。在多物体运动中，我们将宽度变化和透明度变化分开来讲
【多物体宽度变化】
在多物体宽度变化中，我们用无序列表来实现。与单个物体宽度变化不同的是，我们要用for循环依次遍历我们想要的值，关键代码如下：

var aLi = document.getElementsByTagName('li');
for(var i = 0; i< aLi.length; i++){   //i=0
  aLi[i].onmouseover = function(){
    startMove(this,400);
  }
  aLi[i].onmouseout = function(){
    startMove(this,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;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        for(var i = 0; i< aLi.length; i++){   //i=0
          aLi[i].timer = null;
          aLi[i].onmouseover = function(){
            startMove(this,400);//this指向当前的aLi[i].onmouseover事件
          }
          aLi[i].onmouseout = function(){
            startMove(this,200);//this指向当前的aLi[i].onmouseout事件
          }
        }
         
      }
       
      //var timer = null;
      /*
       * 若该代码还是在这里，当鼠标依次缓慢经过时不会出现大的问题，但是当移动的速度比较快时，会发现有问题：可以变得越来越宽
       * 原因：timer并不是每次在鼠标经过每一个区域时为null
       * 解决办法：在前面的for循环中加上aLi[i].timer = null;这样每次执行前都是null开始
       */     
 
      function startMove(obj,iTarget){//因为li有多个，这里需要再传一个参数obj
        //var aLi = document.getElementsByTagName('li');
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
          var speed = (iTarget - obj.offsetWidth)/10;
          speed = speed>0?Math.ceil(speed):Math.floor(speed);
          if(iTarget == obj.offsetWidth){
            clearInterval(obj.timer);
          }
          else{
            obj.style.width = obj.offsetWidth+speed+'px';
            //是obj 不是 aLi
          }
        },30)
      }
    </script>
  </head>
  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>

【多物体透明度动画】
有了上面的例子，我们就能很容易的写出多物体透明度动画的代码，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>多物体透明度动画</title>
    <style type="text/css">
      body,div{
        margin: 0px;
        padding: 0px;
      }
      div{
        width: 200px;
        height: 200px;
        background: red;
        margin: 10px;
        float: left;
        filter:alpha(opacity:30);
        opacity:0.3;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var oDiv = document.getElementsByTagName('div');
        for(var i=0;i<oDiv.length;i++){
          oDiv[i].timer = null;
          oDiv[i].alpha = 30;
          oDiv[i].onmouseover = function(){
            startMove(this,100);
          }
          oDiv[i].onmouseout = function(){
            startMove(this,30);
          }
        }       
      }
      //var alpha = 30;
      function startMove(obj,iTarget){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
          var speed = 0;
          if(iTarget > obj.alpha){
            speed = 10;
          }
          else{
            speed = -10;
          }
          if(iTarget == obj.alpha){
            clearInterval(obj.timer);
          }
          else{
            obj.alpha +=speed;
            obj.style.filter = 'obj.alpha(opacity:'+obj.alpha+')';
            obj.style.opacity = obj.alpha/100;
          }
        },30)
      }
    </script>
  </head>
  <body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
  </body>
</html>

和之前的timer一样，alpha = 30;也需要写在for循环的后面。
到这里，简单的动画效果就告一段落了，慢慢的一步一步的去修改去尝试就会有新的发现。

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

Javascript动画效果（1）

- Author -

foodoir

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

Javascript 相关文章推荐
jquery批量控制form禁用的代码
Aug 06 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
vue实现短信验证码登录功能（流程详解）
Dec 10 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
原生JavaScript实现购物车
Jan 10 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 #Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 #Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 #Javascript
Node.js的文件权限及读写flag详解
Oct 11 #Javascript
最原始的jQuery注册验证方式
Oct 11 #Javascript
js正则表达式注册页面表单验证
Oct 11 #Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 #Javascript
win7(2) 滚动条(1) svg(1) 鸿蒙3.0(1) Sunmao(1) 声卡驱动(1) Debian(1) 鸿蒙(2) 输入法(2) 蓝屏(1)
You might like
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
js中开关变量使用实例
2017/02/24 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
详解vue-cli3使用
2018/08/14 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
初步认识Python中的列表与位运算符
2015/10/12 Python
python实现文本文件合并
2015/12/29 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
应届生自荐信范文
2014/02/21 职场文书
生态养殖创业计划书
2014/05/06 职场文书
社区两委对照检查材料
2014/08/23 职场文书
党的群众路线对照检查材料（个人）
2014/09/24 职场文书
夫妻分居协议书范本（有子女版）
2014/11/01 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript