javascript的缓动效果(第1部分)javascript

缓动,学名为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

现在函数的功能还很弱,主要是由于在抽象与制定上有所欠缺,如果克服这些缺点并配合robert penner大神的缓动公式,我们就可以搞出花样繁多的缓动效果来。而这正是下部分要讲解的,敬请期待,也希望大家多多留言支持。


======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/

你可能感兴趣的:(javascript,javascript,distance,function,浏览器,cache,jquery)