基于弹性碰撞原理的抖动式窗口

先看一下下面这张弹性碰撞图

从图中我可以看出，球在下落过程中由于受到摩擦力的作用，能量逐渐消耗，从物理上讲，如果一个球从固定高度的高空下落，他所具备的势能为1/2gh*h，好像是亚，但是在下落过程中，这些能量会逐步消耗在克服摩擦力上，下落过程中的受力图示为：
由于能量逐渐消耗，弹球每次弹起高度会有所降低，因此有拉锯式的下落过程。很有节奏感。
如果将上面的原理应用到窗口中就可以产生很炫的抖动效果，您的窗口可能就会与众不同。下面就谈一下如何实现这个非常有个性的窗口。
我们可以将浏览器的四周边缘看作地面，将浮动div图层当作弹球，它从从离某个边缘处一定距离的位置开始接近边缘，当图层某个点碰到边缘的时候，认为产生一次弹性碰撞。当然每次接近或者远离边缘都可以用一个定时器来触发。直到往复固定次数或者当回弹得高度小于固定值得时候，认为图层能量耗尽。才可以正常停靠。
下面是实现代码:

<html>
2

<head>
3

var qiu;
5

var high;
6

var speed=0;
7

var stillHigh=2;
8

var downInterval;
9

var upInterval;
10

var nl;
11

var haosun=2500;
12

var timeout=10;
13

var haosunrate = 0;
14

window.onload=function(){
15

qiu = document.getElementById('qiu');
16

high = qiu.style.pixelLeft;
17

nl = Math.ceil(high*high*10/2);
18

downInterval = window.setInterval("down()",timeout);
19

}
20

function down()
21

{
22

speed+=Math.ceil(timeout*10/1000);
23

if(high>0)
24

{
25

high=qiu.style.pixelLeft-speed;
26

qiu.style.pixelLeft = high;
27

}
28

else if(high<0)
29

{
30

high=0;
31

qiu.style.pixelLeft=0;
32

}
33

else if(high==0)
34

{
35

//落地了,准备弹起，当发现能量能支持的高度超过stillHigh，就可以再次弹起
36

haosun+=haosunrate;
37

if(haosunrate>0)
38

{
39

haosunrate+=80;
40

}
41

nl=nl-haosun;
42

var h =Math.ceil(Math.sqrt(Math.round(2*nl/10)));
43

if(h>stillHigh)
44

{
45

//弹起
46

window.clearInterval(downInterval);
47

upInterval = window.setInterval("up()",timeout);
48

}
49

else
50

{
51

//全部结束
52

end();
53

}
54

}
55

}
56

function up()
57

{
58

speed-=Math.ceil(timeout*10/1000);
59

var h =Math.ceil( Math.sqrt(Math.round(2*nl/10)));
60

if(high<h)
61

{
62

high = qiu.style.pixelLeft+speed;
63

qiu.style.pixelLeft = high;
64

}
65

else if(high>h)
66

{
67

//超过了，则要降到最高点
68

high=h;
69

qiu.style.pixelLeft=h;
70

}
71

if(high==h)
72

{
73

//弹到了最高点
74

window.clearInterval(upInterval);
75

haosun+=haosunrate;
76

nl-=haosun;
77

downInterval = window.setInterval("down()",timeout);
78

}
79

}
80

function end()
81

{
82

window.clearInterval(downInterval);
83

window.clearInterval(upInterval);
84

qiu.style.pixelStyle = 0;
85

}
86

</script>
87

</head>
88

<body>
89

<div id='qiu' style='position:absolute;background-image:url(qiu.jpg);width:63px;height:56px;left:250px;background-color:red;'></div>
90

</body>
91

</html>
92

源文件:/Files/jillzhang/1.rar
经过大家提示，修改部分代码，体现了动态变化过程，望继续评论。

posted on 2007-03-06 17:37 jillzhang 阅读(1221) 评论(30) 编辑收藏引用网摘所属分类: Asp.Net

基于弹性碰撞原理的抖动式窗口

jillzhang得专栏

公告

常用链接

留言簿(4)

我参与的团队

随笔分类(90)

随笔档案(104)

文章分类

相册

.Net技术站点

我的好友

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

60天内阅读排行