JS教程Javascript实现缓动效果

《JS教程Javascript实现缓动效果》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、缓动，学名为Tween，缓冲移动的简称。要想页面内容切换起来舒服，就使用淡入淡出特效，要想让页面元素动起来自然，就要使用缓动效果。这两个混合起来，可以衍生多种特效的。感谢Flash开发人员为我们做了那么多先行研究，我们直接把它们拆出来装在各种菜单与相册中。我们先从最简单的东西做起，加速与减速。既然是缓动，它就一定涉及以下概念：距离，时间与速度。我们可以想象存在一条直线L，点A与点B就是L的起点与终点，有一个点C在直线L上移动，从点A到点B。所需的时间通常都是未知，但速度我们一定要制定。看下面的图，我们想让绿色的方块在淡紧色的滑动带上移动。滑动带左上角就相当于

2、点A，右上角就相当于B点，方块的左上角就相当于点C，移动距离为两者的宽度之差。由于我们移动的物体是存在宽度，也就是说点C永远不可能与点B重合。但一个准确的目的地（为了方便，我们把它称之为点D）是必须的，我们一定要计算它出来。因为在加速运动中，点C随时可能超过点D，当点超过它时，我们就要终止此移动，并把点C拉回到点D上。运行代码框[Ctrl+A全部选择提示：你可先修改部分代码，再按运行]为了获取它们在页面上的坐标与尺寸，getCoords()与getStyle()又到出场时间了。对不起，我实在没有意思来炫耀我的函数。更何况getStyle()被砍去了不少东西，

3、威力没有以前那么强大。//辅助函数1vargetCoords=function(el){  varbox=el.getBoundingClientRect(),  doc=el.ownerDocument,  body=doc.body,  html=doc.documentElement,  clientTop=html.clientTop

4、

5、body.clientTop

6、

7、0,  clientLeft=html.clientLeft

8、

9、body.clientLeft

10、

11、0,  top =box.top +(self.pageYOffset

12、

13、html.s

14、crollTop 

15、

16、 body.scrollTop)-clientTop,  left=box.left+(self.pageXOffset

17、

18、html.scrollLeft

19、

20、 body.scrollLeft)-clientLeft  return{'top':top,'left':left};};//辅助函数2vargetStyle=function(el,style){  if(!+"v1"){    style=style.replace(/-(w)/g,function(all,letter){      returnletter.toUp

21、perCase();    });    varvalue=el.currentStyle[style];    (value=="auto")&&(value="0px");    returnvalue;  }else{    returndocument.defaultView.getComputedStyle(el,null).getPropertyValue(style)  }}那么我们怎么移动呢？在javascript只有让它变为绝对定位对象，给它的top与left赋值。它就会立即移动到相应的坐标上。由于javascript处理位置变化太有效率，

22、根本不可能让你有“移动”的感觉，感觉是直接从点C直接跳到点D。我们必须让物体每移动一点点，就停一下，让眼睛有个残影。根据人眼睛的视觉停留效应，若前一幅画像留在大脑中的印象还没消失，后一幅画像就接踵而至，而且两副画面间的差别很小，就会有“动”的感觉。那么停留多么毫秒最合适呢？我们不但要照顾人的眼睛，还要顾及一下显示器的显示速度与浏览器的渲染速度。根据外国的统计，25毫秒为最佳数值。其实，这个数值我们应该当作常识来记住。联想一下，日本动画好像有个规定是1秒30张画，中国的，比较垃圾，是1秒24张。用1秒去除以张数，就得到每张停留的时间。日本的那个27.77毫秒已

23、经很接近我们的25毫秒了，因为浏览器的渲染速度明显不如电视机的渲染速度，尤其是IE6这个拉后腿的。要实现加速度，就是让它每次移动快一点点，让上一次移动的距离乘以一个大于1的数便可。//辅助函数3，相当于$()，不用$符号命名是因为博客园在用JQuery，会引起命名冲突//我新一代查代元素的方法，拥有缓存能力varcache=[]var_=function(id){  returncache[id]

24、

25、(cache[id]=document.getElementById(id));}//主函数：加速移动varaccelerate=function(el){  

26、el.style.position="absolut