Javascript动画效果（1）

2024-10-19 13:20:40

前面我们介绍了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循环的后面。
到这里，简单的动画效果就告一段落了，慢慢的一步一步的去修改去尝试就会有新的发现。

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

原生js仿jquery animate动画效果

jquery animate动画效果: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{margin:0;padding:0;} .box{width: 400px;height: 300px;background: #000;margin:40
使用ngView配合AngularJS应用实现动画效果的方法

AngularJS 提供了一个很棒的方式来创建单页app.正是由于这个原因,使得我们的站点看起来更像是一个原生的手机程序.为了使它看起来更像是原生的程序,我们可以使用 ngAnimate module 为它添加过渡和动画效果. 这个模块可以使我们创建漂亮的程序.今天,我们将要看一下如何为 ng-view 添加动画效果. 我们要构建什么我们假设我们有一个单页面的程序,并且想为这个页面添加动画效果.点击某一个链接会将一个试图滑出,同时将另一个试图滑入. 我们将会使用: 使用 ngRoute 来为我
JavaScript实战之带收放动画效果的导航菜单

虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! 今天是第一战:带收放动画效果的菜单,效果如下图:(样式有点丑(-^-)) ( 由于在写本文时,用的编辑器不同,暂时添加不了演示效果,这里有:最终完整代码和演示 ) 动画效果:鼠标hover改变所有目标的背景和字体颜色,鼠标移动到'首页导航',显示下面的分组菜单,分组菜单有子菜单,点击可缩放,带动画过度效果!而且,可以随便添加和删除导航菜单和子菜单,不
原生javascript实现匀速运动动画效果

本文向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码: <html> <head> <meta charset="gb2312"> <head> <title>javascript实现的简单动画</title> <style type="text/css"> #mydiv { width:50px;
九种原生js动画效果

在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果说明:匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit
在AngularJS应用中实现一些动画效果的代码

在Angular当中,CSS和JavaScript之间唯一的区别就是它们的定义.没有什么区别妨碍到被定义的动画被使用.首先,我们需要加载ngAnimate模块到我们应用的root模块当中. angular.module('coursesApp', ['ngAnimate']); 而所有将被处理的JavaScript动画事件依然保持不变.以下是一个直接支持的动画列表和它们对应的不同行为: 指令事件集 ng-view ng-include ng-switch ng-if enter leave n
javascript制作loading动画效果 loading效果

复制代码代码如下: /*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); //wraperid : 显示loding图片的容器元素//ms:表示loding图标显示的时长,毫秒//envent:表示出发事件的事件源对象,用于获得出发事件的对象//callback:表示动画结束后执行的回掉方法//stop()方法表示在回掉方法执行成功后执行的隐藏动画的操作AjaxLoding.load = function(lodingid,ms,event,left
JS动画效果代码3

慢慢来,这次实现了向任意方向扩展! 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &l
图片的左右移动，js动画效果实现代码

图片的左右移动,动画效果的实现 =(xk+xp)/2) { if (smer == 1) step--; else step++; } else { if (smer == 1) step++; else step--; } if (x >= xk) { x = xk; smer = -1; } if (x [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
JavaScript仿flash遮罩动画效果

本文实例为大家分享了JavaScript仿flash遮罩动画的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿flash遮罩动画</title> <meta name="keywords" content=""> <meta name="

Javascript动画效果（1）

相关推荐

随机推荐