[导入]DDjs发布：自然加速滑动

最新推荐文章于 2024-09-11 17:09:49 发布

weixin_30781775

最新推荐文章于 2024-09-11 17:09:49 发布

阅读量304

点赞数

文章标签： javascript 游戏 ViewUI

原文链接：http://www.cnblogs.com/zhengyulu-2008/archive/2008/07/28/1254278.html

版权

前两天在做一个JavaScript小游戏的时候，用到不少滑动效果，可能jQuery或者哪些库也有，但我还是自己试着写了一个通用的“自然滑动”函数，即初速为零的恒加速滑动，并且滑动的效果可以是展开/收拢或者移动。

先看看实现效果：

下面先看一下函数，我会就其中的某些技术细节稍微解释一下，大家有什么不同意见可以一起讨论～

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行，“闭包”的一种重要应用。首先明确一个机制：