用DHTML制作动画一例

💁🏻‍♂️《软件世界》2001年第1期《用DHTML制作动画一例》福建农林大学童建平

以下为文字版，扫描版请详见文末图片：

          许多斑竹刻意修饰其首页，就是为了给访客良好的印象。动画是不可或缺的方法，但设计不错的动画，其文件大小也不菲，成了影响页面下载速度的瓶颈，这也是不少网友关闭浏览器显示图片、播放动画功能的原因。而今，当ASP、CGI、PHP等大放异彩时，动态HTML(DHTML)并未失去其生存空间，相反地，微软称将在IE 6.0中增入新的DHTML功能，足以证明这一点；本文这个DHTML制作动画的实例也可作为佐证。
          本例通过DHTML编程，实现小圆点〔如图1〕沿着预定轨迹〔如图2、图3〕运动，从而实现动画效果〔如图4〕。该动画用来修饰页面的右下角，主要由三张总计7KB大小的图片组合而成，各图文件大小都很小，拥有分割图片的快速下载优势；而对于相同功能的单张动画图片，其大小是不言而喻的，且就本例而言，还会影响其它网页内容的排版。用动态HTML制作动画，深入挖掘DHTML，您是否被DHTML的魄力所动？OK，让我们一起来用DHTML制作动画：
          首先，将下面代码加入<head>中：

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191


<SCRIPT language=JavaScript>
<!--
function PlayLine(LineName, LineID) 
{
var 
i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=fals
e;
if (document.LineXY == null)
LineXY();
tmLn = document.LineXY[LineName];
if (LineID == null)
{ LineID = ++tmLn.ID; firstTime=true;}
if (LineID == tmLn.ID)
{
setTimeout('PlayLine("'+LineName+'",'+LineID+')',tmLn.delay);
fNew = ++tmLn.curFrame;
for (i=0; i<tmLn.length; i++)
{
sprite = tmLn[i];
if (sprite.charAt(0) == 's')
{
if (sprite.obj)
{
numKeyFr = sprite.keyFrames.length; firstKeyFr = 
sprite.keyFrames[0];
if (fNew >= firstKeyFr && fNew <= 
sprite.keyFrames[numKeyFr-1])
{
keyFrm=1;
for (j=0; j<sprite.values.length; j++)
{
props = sprite.values[j];
if (numKeyFr != props.length)
{
if (props.prop2 == null) sprite.obj[props.prop] = 
props[fNew-firstKeyFr];
else sprite.obj[props.prop2][props.prop] = 
props[fNew-firstKeyFr];
}
else
{
while (keyFrm<numKeyFr && 
fNew>=sprite.keyFrames[keyFrm]) keyFrm++;
if (firstTime || 
fNew==sprite.keyFrames[keyFrm-1])
{
if (props.prop2 == null) 
sprite.obj[props.prop] = props[keyFrm-1];
else sprite.obj[props.prop2][props.prop] = 
props[keyFrm-1];
}
}
}
}
}
}
else if (sprite.charAt(0)=='b' && fNew == sprite.frame) 
eval(sprite.value);
if (fNew > tmLn.lastFrame) tmLn.ID = 0;
}
}
}
function MovingLine(LineName, fNew, ToLineXY) 
{
var 
i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,lastKeyFr,propNum,theObj;
if (document.LineXY == null)
LineXY();
tmLn = document.LineXY[LineName];
if (ToLineXY != null)
if (tmLn.gotoCount == null) tmLn.gotoCount = 1;
else if (tmLn.gotoCount++ >= ToLineXY)
{tmLn.gotoCount=0; return}
jmpFwd = (fNew > tmLn.curFrame);
for (i = 0; i < tmLn.length; i++)
{
sprite = (jmpFwd)? tmLn[i] :
tmLn[(tmLn.length-1)-i];
if (sprite.charAt(0) == "s")
{
numKeyFr = sprite.keyFrames.length;
firstKeyFr = sprite.keyFrames[0];
lastKeyFr = sprite.keyFrames[numKeyFr - 1];
if ((jmpFwd && fNew<firstKeyFr) || (!jmpFwd && lastKeyFr<fNew)) 
continue;
for (keyFrm=1; keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]; 
keyFrm++);
for (j=0; j<sprite.values.length; j++)
{
props = sprite.values[j];
if (numKeyFr == props.length) propNum = keyFrm-1
else propNum = 
Math.min(Math.max(0,fNew-firstKeyFr),props.length-1);
if (sprite.obj != null)
{
if (props.prop2 == null) sprite.obj[props.prop] = 
props[propNum];
else sprite.obj[props.prop2][props.prop] = 
props[propNum];
}
}
}
else if (sprite.charAt(0)=='b' && fNew == sprite.frame) 
eval(sprite.value);
}
tmLn.curFrame = fNew;
if (tmLn.ID == 0) eval('PlayLine(LineName)');
}
function LineXY() 
{
var ns = navigator.appName == "Netscape";
document.LineXY = new Array(1);
document.LineXY[0] = new Array(3);
document.LineXY["Timeline1"] = document.LineXY[0];
document.LineXY[0].MM_Name = "Timeline1";
document.LineXY[0].fps = 15;
document.LineXY[0][0] = new String("sprite");
document.LineXY[0][0].slot = 2;
if (ns)
document.LineXY[0][0].obj = document["Layer3"];
else
document.LineXY[0][0].obj = document.all ? document.all["Layer3"] : 
null;
document.LineXY[0][0].keyFrames = new Array(1, 60, 61, 62, 63, 64, 65, 66, 
67, 68, 69, 100);
document.LineXY[0][0].values = new Array(2);
document.LineXY[0][0].values[0] = new 
Array(165,176,187,198,210,221,232,243,254,265,277,288,299,310,321,332,344,355,
366,377,388,399,411,422,433,444,455,466,477,488,498,509,519,529,539,549,558,56
8,577,586,595,603,612,620,629,637,645,653,661,668,676,683,691,698,705,712,718,
725,732,738,745,743,738,732,712,706,701,706,717,717,717,718,718,718,718,718,71
8,718,718,718,718,718,718,718,718,718,718,718,718,718,718,718,718,718,718,718,
718,718,718,718);
document.LineXY[0][0].values[0].prop = "left";
document.LineXY[0][0].values[1] = new 
Array(467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,
467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,46
7,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,
467,467,467,473,478,489,490,496,494,484,473,462,456,450,444,437,431,424,417,41
0,402,394,386,378,369,360,351,341,332,322,312,302,291,281,271,261,251,241,231,
221,211,201,191);
document.LineXY[0][0].values[1].prop = "top";
if (!ns)
{
document.LineXY[0][0].values[0].prop2 = "style";
document.LineXY[0][0].values[1].prop2 = "style";
}
document.LineXY[0][1] = new String("sprite");
document.LineXY[0][1].slot = 3;
if (ns)
document.LineXY[0][1].obj = document["Layer3"];
else
document.LineXY[0][1].obj = document.all ? document.all["Layer3"] : 
null;
document.LineXY[0][1].keyFrames = new Array(101, 130, 131, 132, 133, 134, 
135, 136, 137, 138, 139, 140, 200);
document.LineXY[0][1].values = new Array(2);
document.LineXY[0][1].values[0] = new 
Array(718,718,718,718,718,718,718,718,718,718,718,718,718,718,718,718,718,718,
718,718,718,718,718,718,718,718,718,718,718,718,718,718,718,718,718,718,718,71
8,744,738,732,725,719,712,705,698,691,684,677,669,662,654,646,639,631,622,614,
606,597,588,580,571,561,552,543,533,523,513,503,493,482,472,461,450,439,428,41
7,406,395,384,373,362,351,340,329,318,308,297,286,275,264,253,242,231,220,209,
198,187,176,165);
document.LineXY[0][1].values[0].prop = "left";
document.LineXY[0][1].values[1] = new 
Array(191,202,214,225,236,247,259,270,281,292,304,315,326,337,349,359,370,379,
389,398,407,416,425,433,441,448,455,463,469,476,472,469,466,463,460,457,454,45
1,477,468,468,468,468,468,468,468,467,467,467,467,467,467,467,467,467,467,467,
467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,46
7,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,467,
467,467,467,467);
document.LineXY[0][1].values[1].prop = "top";
if (!ns)
{
document.LineXY[0][1].values[0].prop2 = "style";
document.LineXY[0][1].values[1].prop2 = "style";
}
document.LineXY[0][2] = new String("behavior");
document.LineXY[0][2].frame = 201;
document.LineXY[0][2].value = "MovingLine('Timeline1','1')";
document.LineXY[0].lastFrame = 201;
for (i=0; i<document.LineXY.length; i++)
{
document.LineXY[i].ID = null;
document.LineXY[i].curFrame = 0;
document.LineXY[i].delay = 1000/document.LineXY[i].fps;
}
}
//-->
</SCRIPT>

再将<body>改为<BODY onload="PlayLine('Timeline1')">。然后，在<body>后加入如下代码，其中的Layer1中有两张图，两个<img>标签之间不可断行，否则影响效果；Layer1中newgaogif为笔者编辑的修饰图，读者可自己更改，最好不要改变图片尺寸，否则要重新更改三个Layer的位置。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<DIV id=Layer1 style="HEIGHT: 38px; LEFT: 24px; POSITION: absolute; TOP: 
453px; WIDTH: 680px; Z-INDEX: 4">
<IMG src="newgao.gif" width=135 height=28><IMG src="图2.jpg" width=542 
height=19></DIV>
<DIV id=Layer2 style="HEIGHT: 335px; LEFT: 700px; POSITION: absolute; TOP: 
180px; WIDTH: 48px; Z-INDEX: 5">
<IMG src="图3.jpg" width=63 height=331></DIV>
<DIV id=Layer3 style="HEIGHT: 15px; LEFT: 165px; POSITION: absolute; TOP: 
467px; WIDTH: 15px; Z-INDEX: 6">
<IMG src="图1.gif" width=9 height=9></DIV>

最后，预览一下，是不是看到了生动活泼地跳动着的小圆点？仿照本文方法，相信聪明的读者也能创造出别具一格的DHTML动画来，可别忘了把你的成果E-mail一份给本人([email protected])，让我共享您的喜悦。本文素材图及实例存于http://loveme1999.myrice.com/newgao.htm。有兴趣者可去看看。

图1

图2

图3

图4

扫描版请详见如下：

用DHTML制作动画一例An example of animation using DHTML