Javascript的缓动结果（第1部门）

缓动，学名为Tween，缓冲移动的简称。要想页面内容切换起来惬意，就行使淡入淡出殊效，要想让页面元素动起来天然，就要行使缓动结果。这两个殽杂起来，可以衍生多种殊效的。感激Flash开拓职员为我们做了那么多先行研究，我们直接把它们拆出来装在各类菜单与相册中。我们先从最简朴的对象做起，加快与减速。

既然是缓动，它就必然涉及以下观念：间隔，时刻与速率。我们可以想象存在一条直线L，点A与点B就是L的出发点与终点，有一个点C在直线L上移动，从点A到点B。所需的时刻凡是都是未知，但速率我们必然要拟定。看下面的图，我们想让绿色的方块在淡紧色的滑动带上移动。滑动带左上角就相等于点A，右上角就相等于B点，方块的左上角就相等于点C，移动间隔为两者的宽度之差。因为我们移动的物体是存在宽度，也就是说点C永久不行能与点B重合。但一个精确的目标地（为了利便，我们把它称之为点D）是必需的，我们必然要计较它出来。由于在加快行为中，点C随时也许高出点D，当点高出它时，我们就要终止此移动，并把点C拉回到点D上。

<style type="text/css"> #taxiway{ width:800px; height:100px; background:#E8E8FF; } #move{ width:100px; height:100px; background:#a9ea00; }</style></p> <div id="taxiway"> <div id="move" onclick="move(this)"></div> </div> 点击可移动上面的绿色方块 <center>本代码来自猛火网，更多教程请会见：<a href=http://www.veryhuo.com/ target="new" _fcksavedurl="http://www.veryhuo.com/ target="new"">http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

为了获取它们在页面上的坐标与尺寸，getCoords()与getStyle()又到进场时刻了。对不起，我其实没故意思来夸耀我的函数。更况且getStyle()被砍去了不少对象，威力没有早年那么强盛。

那么我们怎么移动呢？在javascript只有让它变为绝对定位工具，给它的top与left赋值。它就会当即移动到响应的坐标上。因为javascript处理赏罚位置变革太有服从，基础不行能让你有“移动”的感受，感受是直接从点C直接跳到点D。我们必需让物体每移动一点点，就停一下，让眼睛有个残影。按照人眼睛的视觉逗留效应，若前一幅画像留在大脑中的印象还没消散，后一幅画像就接踵而至，并且两副画面间的不同很小，就会有“动”的感受。那么逗留何等毫秒最吻合呢？我们不单要照顾人的眼睛，还要顾及一下表现器的表现速率与赏识器的渲染速率。按照外国的统计，25毫秒为最佳数值。着实，这个数值我们应该看成知识来记着。遐想一下，日本动画仿佛有个划定是1秒30张画，中国的，较量垃圾，是1秒24张。用1秒去除以张数，就获得每张逗留的时刻。日本的谁人27.77毫秒已经很靠近我们的25毫秒了，由于赏识器的渲染速率明明不如电视机的渲染速率，尤其是IE6这个拉后腿的。要实现加快度，就是让它每次移动快一点点，让上一次移动的间隔乘以一个大于1的数便可。

大白了加快，减速就好办了。我们给第一次移动的间隔一个很大的数，今后每次镌汰一点点，换言之乘以一个小于1的数。但这里有个留意点，假若有一次，它移动的间隔少于1px怎么办？！它再今后也是少于1px。赏识器就会忽略这个值，看成0来处理赏罚。这样一来，它就会停在半途不动了。为了防备这样可骇的事产生，我们操作Math.ceil来确保其最小移动间隔为1px，哪怕最后的匀速移动也要抵达终点。

此刻函数的成果还很弱，首要是因为在抽象与拟定上有所短缺，假如降服这些弱点并共同Robert Penner大神的缓动公式，我们就可以搞出格式繁多的缓动结果来。而这正是下部门要讲授的，敬请等候，也但愿各人多多留言支持。

转自：http://www.cnblogs.com/rubylouvre/

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!