［返回］
微电脑世界1997年第11期
刘达顷
在Web 上 实 现 固 定 路
径 和 点 对 点 动 画， 是 通 过 如 下 两 个 嵌 入 到 浏 览 器 中 的
技 术CSS 和JavaScript 实 现 的。
一、 动 画 实 现 语 句
主 页 中 的 多 个 动 画 对 象 是 采 用 定 时 线（timeline） 方
法 组 织 在 一 起 的， 定 时 线 确 定 动 画 各 个 动 作 的 发 生 时
间， 如 动 画 变 为 可 见、 某 个 动 画 的 启 动 等。 定 时 线 是
通 过 矩 阵 用 数 字 来 编 号 定 义 的。 动 画 对 象 和 定 时 线 有
如 下 方 法 和 函 数：
1.show( ) 和hide( )， 显 示 或 隐 藏 动 画 对 象；
2.animate( )， 启 动 动 画；
3.move( )， 把 动 画 对 象 移 到 主 页 中 的 指 定 坐 标 处；
4.start Timeline( ) 和stop Timeline( )， 启 动 或 终 止 定 时 线， 需
要 给 这 些 函 数 指 定 定 时 线 的 数 目。
二、 创 建 动 画 程 序 段
首 先 为 动 画 对 象 创 建 一 个 固 定 坐 标 位 置 的HTML 程 序
段， 如 下：
< DIV ID="hairl"
STYLE="position:absolute;left:160;top:50;visibility:hidden;" >
< IMG
SRC="hair.gif"NAME="hairg"HEIGHT="33"WIDTH="136"
>
< /DIV >
程 序 段 的 名 为hairl。 接 着 需 要 定 义 一 个JavaScript 函 数，
此 函 数 将 对 所 有 的 动 画 对 象 和 定 时 线 初 始 化。 函 数 名
为initAnimations( )， 放 在 主 页 文 档 的 最 前 面， 代 码 如 下：
< head >
< script language="JavaScript" >
function initAnimations( ){
layerObj=(isNS)?'document':'document.all';
styleObj=(isNS)?'':'.style':
animationTimeline=new Array( );//timeline array
animationTime=new Array( );//current time array
animatedObjects=new Array( );//animated objects array
}
< /script >
< /head >
此 函 数 首 先 检 测 是Navigator 4 还 是IE 4 浏 览 器（ 前 两
行）， 然 后 为 动 画 定 时 线、 定 时 线 中 的 当 前 时 间 及 动
画 对 象 创 建 矩 阵。
三、 创 建 动 画 对 象
下 面 利 用 动 画 对 象 构 造 函 数 为 每 个 动 画HTML 程 序 段
创 建 动 画。 每 个 动 画 对 象 的 性 质 定 义 了 动 画 的 运 行 方
式。 下 面 创 建 一 个 新 的animatedObject 对 象：
hair=new animatedObject(
'hairl',//对应的程序段名
'no',//是否让对象循环
20,//每帧动画的延时，单位为毫秒
25,//动画在两点间移动的步数。对固定路径动画，设为零
'alert("Finnito"),
'18,338,17,340,15,339,15,333,13,332');
对 象 名 为hair， 它 不 能 与 对 应 的 程 序 段 同 名。 函 数
中，alert( ) 内 包 括 了 动 画 运 行 时 要 执 行 的 函 数 或 代 码。
函 数 中 最 后 一 行 定 义 了 动 画 对 象 移 动 的 坐 标 位 置（x,y），
即 从 点（18，338） 到 点（17，340）， 再 到 点（15，339）， 然 后
到 点（15，333）， 最 后 到 点（13，332）， 可 见 此 函 数 定 义 了
一 个 固 定 路 径 动 画 对 象。
运 行 如 下 动 画 对 象 的animate( ) 方 法 即 可 启 动 动 画：
hair.animate( )；
还 可 运 行hide( ) 和show( ) 方 法 隐 藏 或 显 示 动 画。
四、 用 定 时 线 组 织 多 个 动 画 对 象
为 了 组 织 多 个 动 画 对 象， 需 要 创 建 定 时 线， 为 此
创 建 一 个 矩 阵， 即：
animation Timeline[0]=new Array( );
语 句 中 的0 表 示 这 是animation Timeline 矩 阵 的 第 一 个 函
数。 因 此 这 个 定 时 线 的 数 目 为1。 然 后 加 入 如 下 语 句：
animation Timeline[0][30]='hair.show( );hair.animate( );';
30 个1/10 秒 后， 执 行 方 法hair.show( )（ 显 示 动 画 对 象） 和hair.animate(
)（ 动 画 运 行 开 始）。 创 建 定 时 线 后， 加 入 如 下 语 句：
startTimelime(0);
即 可 运 行 上 面 创 建 的 一 号 定 时 线， 由0 标 识。
如 上 所 述， 定 时 线 不 是 必 需 的， 但 它 们 能 使 动 画
的 控 制 和 定 时 更 精 确， 特 别 是 在 相 对 复 杂 的 场 合， 这
成 了 一 个 必 须 的 工 具。