计算机故障交流论坛
域名注册
当前位置：首页 >> 程序设计 >> javascript编程 >> 正文

javascript的缓动效果

发表时间：09-9-21   来源：chinaz.com   点击：

缓动，学名为Tween，缓冲移动的简称。要想页面内容切换起来舒服，就使用淡入淡出特效，要想让页面元素动起来自然，就要使用缓动效果。这两个混合起来，可以衍生多种特效的。感谢Flash开发人员为我们做了那么多先行研究，我们直接把它们拆出来装在各种菜单与相册中。我们先从最简单的东西做起，加速与减速。

既然是缓动，它就一定涉及以下概念：距离，时间与速度。我们可以想象存在一条直线L，点A与点B就是L的起点与终点，有一个点C在直线L上移动，从点A到点B。所需的时间通常都是未知，但速度我们一定要制定。看下面的图，我们想让绿色的方块在淡紧色的滑动带上移动。滑动带左上角就相当于点A，右上角就相当于B点，方块的左上角就相当于点C，移动距离为两者的宽度之差。由于我们移动的物体是存在宽度，也就是说点C永远不可能与点B重合。但一个准确的目的地（为了方便，我们把它称之为点D）是必须的，我们一定要计算它出来。因为在加速运动中，点C随时可能超过点D，当点超过它时，我们就要终止此移动，并把点C拉回到点D上。

运行代码

以下为引用的内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<BODY>
<STYLE type=text/css>#taxiway {
 BACKGROUND: #e8e8ff; WIDTH: 800px; HEIGHT: 100px
}
#move {
 BACKGROUND: #a9ea00; WIDTH: 100px; HEIGHT: 100px
}
</STYLE>
<DIV id=taxiway>
<DIV id=move onclick=move(this)></DIV></DIV>
<P class=notice display="text-align:center">点击可移动绿色方块</P>
<SCRIPT type=text/javascript>
  var getCoords = function(el){
    var box = el.getBoundingClientRect(),
    doc = el.ownerDocument,
    body = doc.body,
    html = doc.documentElement,
    clientTop = html.clientTop || body.clientTop || 0,
    clientLeft = html.clientLeft || body.clientLeft || 0,
    top  = box.top  + (self.pageYOffset || html.scrollTop  ||  body.scrollTop ) - clientTop,
    left = box.left + (self.pageXOffset || html.scrollLeft ||  body.scrollLeft) - clientLeft
    return { 'top': top, 'left': left };
  };

  var getStyle = function(el, style){
    if(!+"\v1"){
      style = style.replace(/\-(\w)/g, function(all, letter){
        return letter.toUpperCase();
      });
      var value = el.currentStyle[style];
      (value == "auto")&&(value = "0px" );
      return value;
    }else{
      return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
    }
  }
  //辅助函数3，相当于$()，不用$符号命名是因为博客园在用JQuery，会引起命名冲突
  //我新一代查代元素的方法，拥有缓存能力
  var cache = []
  var _ = function(id){
    return cache[id] || (cache[id] = document.getElementById(id));
  }

  var move = function(el){
    el.style.position = "absolute";
    var begin =  getCoords(el).left,
    distance = parseFloat(getStyle(_("taxiway"),"width")) - parseFloat(getStyle(el,"width")),
    end = begin  + distance,
    speed = 10,//第一次移动的速度，单位px/ms，隐式地乘以1ms
    delta = 1.5,
    change = true;
    el.onclick = function(){
      if(change){
        el.innerHTML = "加速";
        (function(){
          setTimeout(function(){
            el.style.left = getCoords(el).left + speed + "px";//移动
            speed *= delta;//下一次移动的距离
            if(getCoords(el).left >= end){
              el.style.left = end + "px";
              change = false;
              delta = 0.85,
              speed = 100;
            }else{
              setTimeout(arguments.callee,25);//每移动一次停留25毫秒
            }
          },25)
        })()
      }else{
        el.innerHTML = "减速";
        (function(){
          setTimeout(function(){
            el.style.left = getCoords(el).left - speed + "px";//移动
            speed = Math.ceil(speed * delta );//下一次移动的距离
            if(getCoords(el).left <= begin ){
              el.style.left = begin + "px";
              change = true;
              delta = 1.5,
              speed = 10;
            }else{
              setTimeout(arguments.callee,25);
            }
          },25)
        })()
      }
    }
  }
  window.onload = function(){
    move(_("move"))
  }
</SCRIPT>
</BODY></HTML> 

为了获取它们在页面上的坐标与尺寸，getCoords（）与getStyle（）又到出场时间了。对不起，我实在没有意思来炫耀我的函数。更何况getStyle（）被砍去了不少东西，威力没有以前那么强大。

以下为引用的内容：

//辅助函数1
var getCoords = function(el){ 
  var box = el.getBoundingClientRect(), 
  doc = el.ownerDocument, 
  body = doc.body, 
  html = doc.documentElement, 
  clientTop = html.clientTop || body.clientTop || 0, 
  clientLeft = html.clientLeft || body.clientLeft || 0, 
  top  = box.top  + (self.pageYOffset || html.scrollTop  ||  body.scrollTop ) - clientTop, 
  left = box.left + (self.pageXOffset || html.scrollLeft ||  body.scrollLeft) - clientLeft 
  return { 'top': top, 'left': left };
};
//辅助函数2
var getStyle = function(el, style){ 
  if(!+"\v1"){ 
    style = style.replace(/\-(\w)/g, function(all, letter){ 
      return letter.toUpperCase(); 
    }); 
    var value = el.currentStyle[style]; 
    (value == "auto")&&(value = "0px" ); 
    return value; 
  }else{ 
    return document.defaultView.getComputedStyle(el, null).getPropertyValue(style) 
  }
}

那么我们怎么移动呢？在javascript只有让它变为绝对定位对象，给它的top与left赋值。它就会立即移动到相应的坐标上。由于javascript处理位置变化太有效率，根本不可能让你有“移动”的感觉，感觉是直接从点C直接跳到点D。我们必须让物体每移动一点点，就停一下，让眼睛有个残影。根据人眼睛的视觉停留效应，若前一幅画像留在大脑中的印象还没消失，后一幅画像就接踵而至，而且两副画面间的差别很小，就会有“动”的感觉。那么停留多么毫秒最合适呢？我们不但要照顾人的眼睛，还要顾及一下显示器的显示速度与浏览器的渲染速度。根据外国的统计，25毫秒为最佳数值。其实，这个数值我们应该当作常识来记住。联想一下，日本动画好像有个规定是1秒30张画，中国的，比较垃圾，是1秒24张。用1秒去除以张数，就得到每张停留的时间。日本的那个27.77毫秒已经很接近我们的25毫秒了，因为浏览器的渲染速度明显不如电视机的渲染速度，尤其是IE6这个拉后腿的。要实现加速度，就是让它每次移动快一点点，让上一次移动的距离乘以一个大于1的数便可。

以下为引用的内容：

//辅助函数3，相当于$()，不用$符号命名是因为博客园在用JQuery，会引起命名冲突
//我新一代查代元素的方法，拥有缓存能力
var cache = []
var _ = function(id){ 
  return cache[id] || (cache[id] = document.getElementById(id));
}
//主函数：加速移动
var accelerate= function(el){ 
  el.style.position = "absolute"; 
  var begin =  getCoords(el).left, 
  distance = parseFloat(getStyle(_("taxiway"),"width")) - parseFloat(getStyle(el,"width")), 
  end = begin + distance, 
  speed = 10;//第一次移动的速度，单位px/ms，隐式地乘以1ms 
  (function(){ 
    setTimeout(function(){ 
      el.style.left = getCoords(el).left + speed + "px";//移动 
      speed *= 1.5;//下一次移动的距离 
      if(getCoords(el).left >= end){ 
        el.style.left = end + "px"; 
      }else{        
        setTimeout(arguments.callee,25);//每移动一次停留25毫秒 
      } 
    },25) 
  })()
}

明白了加速，减速就好办了。我们给第一次移动的距离一个很大的数，往后每次减少一点点，换言之乘以一个小于1的数。但这里有个注意点，如果有一次，它移动的距离少于1px怎么办？！它再往后也是少于1px。浏览器就会忽略这个值，当作0来处理。这样一来，它就会停在中途不动了。为了防止这样可怕的事发生，我们利用Math.ceil来确保其最小移动距离为1px，哪怕最后的匀速移动也要抵达终点。

以下为引用的内容：

//主函数：减速移动 
var decelerate = function(el){ 
   el.style.position = "absolute"; 
   var begin =  getCoords(el).left, 
   distance = parseFloat(getStyle(_("taxiway"),"width")) - parseFloat(getStyle(el,"width")), 
   end = begin + distance, 
   speed = 100;//第一次移动的速度，单位px/ms，隐式地乘以1ms 
   (function(){ 
     setTimeout(function(){ 
       el.style.left = getCoords(el).left + speed + "px";//移动 
       speed = Math.ceil(speed * 0.9);//下一次移动的距离 
       if(getCoords(el).left <= end){ 
         el.style.left = end + "px"; 
       }else{        
         setTimeout(arguments.callee,25); 
       } 
     },25) 
   })() 
}

现在函数的功能还很弱，主要是由于在抽象与制定上有所欠缺，如果克服这些缺点并配合Robert Penner大神的缓动公式，我们就可以搞出花样繁多的缓动效果来。而这正是下面要讲解的。

第1页:javascript的缓动效果(1)   第2页:javascript的缓动效果(2)  

上一篇:面向对象的JavaScript— 类及类的继承    下一篇:没有了
【收藏】  【推荐】  【返回顶部】  【打印本页】  【关闭窗口】

相关文章列表

最新文章

本月排行榜

文章推荐


关于我们 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助

© CopyRight 2008-2010, WWW.JSJGZ.CN All Rights Reserved

CopyRight 2008-2010 计算机故障网版权所有 闽ICP备09000710号