Javascript实现自然加速滑动
文/zhengchuyu 出处/博客园
前两天在做一个JavaScript小游戏的时候，用到不少滑动效果，可能jQuery或者哪些库也有，但我还是自己试着写了一个通用的“自然滑动”函数，即初速为零的恒加速滑动，并且滑动的效果可以是 展开/收拢 或者 移动。
先看看实现效果：
附件:
您所在的用户组无法下载或查看附件动画效果请见：
http://www.cnblogs.com/zhengchuyu/archive/2008/07/27/1252378.html下面先看一下函数，我会就其中的某些技术细节稍微解释一下，大家有什么不同意见可以一起讨论～
Code
1 DDjs = function() {};
2 DDjs.slide = function() {};
3
4 /*
5 * 自然加速滑动
6 * @param
7 * 滑动元素，滑动特性，开始数值，结束数值[，滑动时间（毫秒），刷新时间间隔（毫秒）]
8 * 滑动特性可选值：'width' | 'height' | 'left' | 'top'
9 * @return
10 * 滑动事件句柄数组
11 */
12 DDjs.slide.naturalSlide = function(elem, slideWhat, startNum, endNum, time, interval) {
13 var which = elem;
14 var what = slideWhat;
15 var diff = endNum - startNum;
16 var t = time || 500; // 时间默认值：500ms
17 var itv = interval || 10; // 刷新间隔默认值：10ms
18 var handles = new Array; // 本函数所触发的所有函数句柄
19
20 for (var i = 0; i < t / itv; i++) {
21 (function(){
22 var step = i;
23 var temp = setTimeout(function(){
24 // 设t为总时间，T为当前时刻，则T = itv * step
25 // 恒加速运动 diff = 1/2 * a * (t * t)
26 // s = 1/2 * a * (T * T) = diff / (t * t) * (itv * step) * (itv * step)
27 var s = diff * step * step * itv * itv / t / t;
28 which.style[what] = (startNum + s) + 'px';
29 }, itv * step );
30 handles.push(temp);
31 })();
32 }
33 // 最后时刻位置校正
34 handles.push( setTimeout(function(){
35 which.style[what] = endNum + 'px';
36 }, t ));
37
38 return handles;
39 };
（关于函数的用法这里就不赘述了，相信在各个著名的库中都可以找到比这个优越许多的代码。）
其中涉及到三个比较重要的技巧，这里跟大家分享一下：
将自己的函数“打包”
首先看看1、2行，这是JavaScript一种“打包”的方式。通过这种方法，我们可以将自己写的一些库和其他引用库分割开，而不用担心函数或者变量命名重名的问题。
你可能会想到当我们要引用上述函数的时候有多么麻烦，我们需要书写 "DDjs.slide.naturalSlide" 这么长的一串才可以调用到这个函数。不用紧，你可以给它做“瘦身”：
slide = DDjs.slide.naturalSlide;
为原函数声明了一个引用，这样就可以通过这个引用（slide）调用函数了。
多态及兼容性
16、17行变量赋值的方式，关键在于“||”的用法。这一种方法常用于一些不确定的场合，经常用于解决浏览器兼容性问题。此处用于检测形参是否传入，如果没有传入，则使用默认值。
解决浏览器兼容问题的用法我在《JavaScript DOM笔记：获取及操作元素》一文中已经提到。
循环体中的闭包
21～31行，“闭包”的一种重要应用。首先明确一个机制：
“闭包范围内允许使用父函数中的变量，但提供的值并非该变量创建时的值，而是在父函数范围内的最终值。”
于是在for或者while等循环体中，如果出现函数闭包并且在闭包内使用了循环变量，此时的循环变量并不能取到你想要的值。于是我们必须创建另一个“非循环”的范围，并且在这个范围内捕获循环变量（上述函数中另用局部变量step进行存储），再将捕获的值传入下一个函数闭包之中。
| 感谢原创者的辛勤劳动，希望对您有所帮助，转载请注明原出处。 |
