💁🏻♂️《软件世界》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>中：
<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的位置。
<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一份给本人(chinahacker@gnetpri.com)，让我共享您的喜悦。本文素材图及实例存于http://loveme1999.myrice.com/newgao.htm。有兴趣者可去看看。
图1
图2
图3
图4
扫描版请详见如下：
