javascript 45种缓动效果(一)
作者:司徒正美 来源:司徒正美blog 发布时间:2009-09-19 18:30:00
缓动,学名为Tween,缓冲移动的简称。要想页面内容切换起来舒服,就使用淡入淡出特效,要想让页面元素动起来自然,就要使用缓动效果。这两个混合起来,可以衍生多种特效的。感谢Flash开发人员为我们做了那么多先行研究,我们直接把它们拆出来装在各种菜单与相册中。我们先从最简单的东西做起,加速与减速。
既然是缓动,它就一定涉及以下概念:距离,时间与速度。我们可以想象存在一条直线L,点A与点B就是L的起点与终点,有一个点C在直线L上移动,从点A到点B。所需的时间通常都是未知,但速度我们一定要制定。看下面的图,我们想让绿色的方块在淡紧色的滑动带上移动。滑动带左上角就相当于点A,右上角就相当于B点,方块的左上角就相当于点C,移动距离为两者的宽度之差。由于我们移动的物体是存在宽度,也就是说点C永远不可能与点B重合。但一个准确的目的地(为了方便,我们把它称之为点D)是必须的,我们一定要计算它出来。因为在加速运动中,点C随时可能超过点D,当点超过它时,我们就要终止此移动,并把点C拉回到点D上。
为了获取它们在页面上的坐标与尺寸,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大神的缓动公式,我们就可以搞出花样繁多的缓动效果来。而这正是下部分要讲解的,敬请期待,也希望大家多多留言支持。
阅读下一篇:javascript 45种缓动效果(二)
猜你喜欢
- text-overflow这个属性真让Firefox折腾,虽然之前有写过Firefox通过XUL实现text-overflow:ellips
- Dump ALL MySQL Databasesmysqldump --user=XXXXXXXX --password=XXXXXXX -
- 本站收集的js实现的同步动态显示当前日期,时间和星期几的代码,我经常用在自己做的企业网站的后台,方便嘛。效果可以看看本站的首页,呵呵!而且代
- 简单的显示记录已经掌握,现在需要的就是通过ASP将信息内容插入到数据库中。一、拥有数据库cnbruce.mdb本数据库的作用就是用来 * 入数
- 最近在开发项目的过程中遇到一个问题,就是在插入一条记录的后要立即获取所在数据库中ID,而该ID是自增的,怎么做?在sql server 20
- 求英文字母、数字、下划线、汉字的js正则表达式英文字母或数字或下划线,英文字母数字下划线是:/^\w+$/汉字的是:/^[\u0391-\u
- 前一段时间碰到这样的的问题,Ajax从后台得到的中文信息怎么都是空。后来到网上搜资料,大多是以下这样。用AJAX来GET回一个页面时,RES
- 开放源代码社区为了扩展MySQL的使用范围,开发出了.Net框架(.NET Framework)中可以使用的数据库连接器。我们就来学习一下如
- 作者:Jim Ley(主页)译者:Sheneyan(子乌)时间:2006.1.29英文原文:http://jibbering.com/200
- YAHOO.util.Subscriber 与 YAHOO.util.CustomEvent。1. YAHOO
- 除了第一年外,谷歌每年母亲节都会更换主页的logo以向全世界的母亲致敬。虽然2000年和2001年母亲节的logo图片看起来没什么不同,但是
- 昨天在W3C看到,6月10日发布了新的 HTML 5 草案(Working Draft)。粗略的读了一下它提供的 新版本说明文档 ,作了一点
- jQuery的选择器是CSS 1-3,XPath的结合物。jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查
- 从MySQL 5.0.2开始,通过mysql_stmt_attr_set() C API函数实现了服务器端光标。服务器端光标允许在服务器端生
- 很多人可能认为门户网站首页设计只是把一些导航、资讯内容和广告堆积起来摆放得好看就可以了,虽然这个观点也并不是完全错误的,确实门户网站首页是由
- 原文地址:http://ilovetypography.com/2007/10/22/so-you-want-to-create-a-fon
- 雅虎的BrowserPlus在曝光了N久后终于发布了,一款类似于Google Gears的浏览器增强插件。在支持的操作系统方面,Gears明
- 如何在ADO中客户端利用好缓存技术?具体应用见下例:global.asa< !--METADATA TYPE=&q
- 介绍毫无疑问,任何一个试图使用 CSS 的网页设计师和开发人员都会发现不同的浏览器要求不同的样式声明。这些烦恼归咎于各浏览器及其各版本不同程
- 关于截取字符串指定长度的自定义函数很多,各式各样!不过大多原理都是一个样,循环字符串判断每一个字符的asc码!我这里也有一个,示例函数如下: