Robin's Space

基于彈性碰撞原理的抖動(dòng)式窗口

先看一下下面這張彈性碰撞圖

從圖中我可以看出，球在下落過程中由于受到摩擦力的作用，能量逐漸消耗，從物理上講，如果一個(gè)球從固定高度的高空下落，他所具備的勢(shì)能為1/2gh*h，好像是亞，但是在下落過程中，這些能量會(huì)逐步消耗在克服摩擦力上，下落過程中的受力圖示為：
由于能量逐漸消耗，彈球每次彈起高度會(huì)有所降低，因此有拉鋸式的下落過程。很有節(jié)奏感。
如果將上面的原理應(yīng)用到窗口中就可以產(chǎn)生很炫的抖動(dòng)效果，您的窗口可能就會(huì)與眾不同。下面就談一下如何實(shí)現(xiàn)這個(gè)非常有個(gè)性的窗口。
我們可以將瀏覽器的四周邊緣看作地面，將浮動(dòng)div圖層當(dāng)作彈球，它從從離某個(gè)邊緣處一定距離的位置開始接近邊緣，當(dāng)圖層某個(gè)點(diǎn)碰到邊緣的時(shí)候，認(rèn)為產(chǎn)生一次彈性碰撞。當(dāng)然每次接近或者遠(yuǎn)離邊緣都可以用一個(gè)定時(shí)器來觸發(fā)。直到往復(fù)固定次數(shù)或者當(dāng)回彈得高度小于固定值得時(shí)候，認(rèn)為圖層能量耗盡。才可以正常停靠。
下面是實(shí)現(xiàn)代碼:

1

<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

//落地了,準(zhǔn)備彈起，當(dāng)發(fā)現(xiàn)能量能支持的高度超過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

//全部結(jié)束
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

//超過了，則要降到最高點(diǎn)
68

high=h;
69

qiu.style.pixelLeft=h;
70

}
71

if(high==h)
72

{
73

//彈到了最高點(diǎn)
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
經(jīng)過大家提示，修改部分代碼，體現(xiàn)了動(dòng)態(tài)變化過程，望繼續(xù)評(píng)論。

posted @ 2007-03-06 17:37 Robin Zhang 閱讀(5034) 評(píng)論(37) 收藏舉報(bào)

刷新頁(yè)面返回頂部

Robin's Space

基于彈性碰撞原理的抖動(dòng)式窗口

公告