Web动画工作原理

在短暂的历史中，互联网一直在持续快速地发展。这种演变主要由两种对立的力量驱动：

这些因素迫使互联网创新者想出许多巧妙的技巧，以在有限的连接上传输复杂内容。

来自我们核辐射文章的Flash动画。这是一个相当复杂的图形，但它不到7,000字节！

在以下部分中，我们将了解每种技术以及它们如何处理这些相互竞争的力量。

互联网历史上最大的创新之一是能够在网页上将照片和其他插图与文本集成。这些插图以位图文件的形式出现。位图文件仅描述图像中每个像素的颜色。为了减小这些位图图像的文件大小，使用了几种不同的技术来压缩图像数据。通常，网站将这些图像作为JPEG文件或GIF文件发布。

动画只是一系列连续显示的静止图像，因此向网站添加动画最明显的方法是发布一系列位图图像，由用户的浏览器按顺序显示。这种动画，称为GIF动画或GIF89，是第一个流行起来的Web动画，至今仍然非常受欢迎。

GIF动画的主要优点是它非常易于使用，并且大多数Web浏览器都能自动识别。使用共享软件程序，例如Windows的GIF construction set或Macintosh的GifBuilder，您所要做的就是提供构成动画帧的单个位图图像。然后您发布文件并编码图像标签，就像您处理普通静态GIF一样。

缺点是您必须将动画保持得相当简单，以减小文件大小。毕竟，每个帧都是一个完整的位图图像。四个简单的帧很容易传输给大多数用户，但是当您达到大约20帧时，您的文件大小可能会太大。而且20帧也无法实现很多效果——我们电影中看到的流畅动画每秒至少包含24个静止图像——所以GIF动画相当有限。要创建任何实质性长度的影片，您必须在每个帧之间进行相当大的跳跃，这意味着动画不是很流畅，正如您在下面的示例中看到的那样。

这是一种说明简单概念或仅仅为您的网站添加引人注目的装饰的绝佳方式；但网页设计师和网页用户发现它完全不足以传达更复杂的想法或为网站添加真正的动感。此外，您无法向GIF动画添加声音。

正如我们所看到的，GIF动画的主要问题是“影片”的每个帧都会大大增加总文件大小。解决这个问题的一种方法是完全消除单个帧。相反，您只需告诉计算机拍摄一张静止图像并将其在屏幕上移动。从某种意义上说，您一直在使用计算机这样做，当您用鼠标在屏幕上移动光标时。

最初，网页在很大程度上是静态文件——也就是说，一旦您加载它们，它们就基本保持不变。这是超文本标记语言（HTML）固有的特性，它是网页的基本编程语言。HTML基本上由简单的标签组成，这些标签告诉Web浏览器在哪里显示网页元素。

随着互联网的不断发展，网页设计师发现这种静态特性相当受限。他们希望向网站添加动态内容——也就是说，用户下载特定网页后可以更改的内容。动态HTML（或dHTML）是使这成为可能的软件技术的术语。dHTML内容实际上是通过使用许多复杂的脚本语言（如Javascript）访问互联网浏览器上的所谓文档对象模型来生成的。基本上，文档对象模型（DOM）控制浏览器显示网页的一切。如今，几乎所有用户都拥有可以将DOM暴露给脚本语言的浏览器，这样脚本就可以修改HTML元素（例如，当鼠标移到某个单词上时改变文本颜色）。

DHTML并非为动画而创建，但它允许您以一种为网页添加动态效果的方式修改HTML元素。dHTML脚本可以简单地告诉浏览器不断更改页面上特定图像的位置，使其在屏幕上移动。如果您对几个不同的图像执行此操作，则可以将一系列图形元素相互移动以制作有趣的电影。

与GIF动画一样，dHTML动画也能被大多数Web浏览器自动识别，用户无需下载任何额外组件。但是，创建在所有浏览器上以相同方式工作的dHTML内容相当棘手，因此这种动画不像GIF动画那样简单。亲自编写动画程序非常困难，但有一些用户友好的软件应用程序，例如Macromedia的Dreamweaver，可以为您生成正确的脚本代码。

DHTML在其动画应用方面相当有限，因为它所能做的只是在屏幕上移动静止图像。它比GIF动画流畅得多，但在许多应用中，它是一种显示变化图像效率低得多的方式。DHTML几乎是Web浏览器内置动画能力的极限。为了为互联网添加更复杂的动画能力，创新者必须开发补充用户浏览器的程序。

Java小程序

提供Web动画的另一种方式是通过通用、面向网络的编程语言，即Java。通过Java，程序员可以创建用户从互联网下载的应用程序。支持Java的浏览器使用虚拟机，这是一种识别Java语言并将其翻译给用户计算机系统（Windows、MacOS、Unix）的软件。虚拟机基本上是一种插件，必须随浏览器安装。

Java Web内容通常以称为小程序的程序形式创建。小程序不是完整的软件应用程序——它们只能与浏览器一起使用。网页设计师使用小程序可以做各种各样的事情，其中最流行的应用之一就是动画。Java的主要优点是它可以在所有操作系统上运行，并且非常灵活。您可以创建一个动画程序，为单个帧绘制简单的矢量形状，或者使用位图图像。Java特别适合创建交互式动画并将动画与其他网页元素结合。有关Java的更多信息，请查阅计算机程序如何工作。

20世纪90年代初，互联网真正开始普及，网站数量激增。突然间，有各种各样的人在制作网页，他们希望能够包含各种多媒体内容。与其试图改变浏览器以识别和显示这些许多不同形式的内容，互联网创新者提出了浏览器插件的概念。

插件是与您的浏览器协同工作的程序，用于读取和播放特定类型的文件。它们是相对较小的软件，因此用户下载它们不需要很长时间。它们专门设计用于处理特定类型的文件，因此它们可以完成许多基本浏览器无法完成的事情。

视频

流媒体视频通常采用插件方式，让您可以在网络上观看视频内容。网络视频可以包含声音和更复杂的动画。

如今，网页设计师可以使用dHTML脚本来检测您是否安装了特定的插件。如果您没有安装，您的浏览器将显示一条消息，告诉您如何下载该插件。这因应用程序而异，但通常需要很长时间才能完成整个过程，这是以这种方式处理动画的一个明显缺点。如果您已经安装了插件，大多数浏览器会在文件开始下载足够多后立即开始播放影片。

不同的插件工作方式不同。视频播放器应用程序，如QuickTime和Media Player，显示一系列静止图像，就像GIF动画或视频影片一样，但它们能够通过压缩和流媒体传输图像来更快地传输。压缩是简化构成图像的信息以减小文件大小的过程。流媒体传输仅仅意味着播放器在整个文件下载完成之前就开始显示内容。

即使具备这些功能，如果您的连接速度慢，这类电影文件下载时间也很长，或者质量很差。

Flash和Shockwave

目前最常用的动画插件是Flash和Shockwave，两者都来自Macromedia。它们是基于矢量的2D动画查看器。以下部分将详细讨论Flash和Shockwave。

 

来自我们回旋镖文章的Flash动画。

来自我们回旋镖文章的Flash动画。

Macromedia在两个密切相关的格式Flash和Shockwave上取得了巨大成功。Flash现在是Web上丰富动画的标准格式，而Shockwave是一种非常流行的呈现更复杂动画内容的格式。与Real Player和QuickTime文件不同，Flash和Shockwave影片实际上是网页的一部分，并包含高度的交互性，就像一个简单的HTML页面一样。Shockwave播放器不仅播放动画，还识别用户输入，然后控制浏览器如何响应。

 

我们潜艇文章中的互动Flash影片。点击按钮使潜艇浮出水面和潜入水下。

我们潜艇文章中的互动Flash影片。点击按钮使潜艇浮出水面和潜入水下。

Flash和Shockwave并不是这类动画的唯一格式，但它们比任何其他类似格式都更受欢迎。Flash尤其成功，因为它与大多数浏览器捆绑在一起，并且可以非常快速地传输流畅、吸引人的动画。

快速下载时间

有几个不同的因素使得快速下载成为可能。首先，是许多Flash文件和Shockwave文件的性质。与GIF动画不同，Flash和Shockwave文件主要基于矢量。这意味着，作者软件程序不是将图片保存为一系列像素值，而是将图像描述为一系列线条和形状，并将其记录为数学值。例如，一条直线由其上升角度、相对于其他形状的坐标位置以及相对于其他形状的长度来描述。以这种方式描述图像可以使程序保存图像的宽广部分——这些部分在位图文件中可能包含数百个像素——只需几个数字。Shockwave和Flash也可以使用位图图像，网站管理员可以对其进行压缩和缩小以保持文件大小较小。这些位图图片还可以通过路径在屏幕上移动，很像dHTML动画中移动的静止图像，这有助于减小总文件大小。然而，大多数Flash文件完全基于矢量，这使得它们加载速度特别快。

当您的图像以这种方式生成时，动画师需要创建的帧数就会减少。Flash和Shockwave技术可以通过计算两个图像之间几何信息的变化，在基于矢量的关键帧之间非常容易地创建补间帧。这比直接的位图动画节省了大量空间，后者必须将每个帧存储为唯一的图像。

另一个主要创新是文件实际传输的方式。Flash和Shockwave文件通过互联网流式传输，因此浏览器可以在整个文件下载完成之前开始播放“影片”。就像服务器先发送网页文本再发送图片文件一样，Flash网站可以配置为在Flash内容其余部分加载时发送一个介绍影片。网站管理员可以对文件进行编码，以便浏览器在下载一定量文件后开始播放影片。这计时精确，以确保在影片播放到该点之前，文件的每个部分都已传输。流媒体视频的工作方式也是如此。

可用性

Flash和Shockwave之所以能被如此多的网络用户和网页设计师接受，很大程度上归功于Macromedia的传播策略。如今，这些插件随主要的互联网浏览器和计算机操作系统一起提供，如果您还没有，也很容易免费获取。所有安装过程都在后台进行，因此用户无需退出浏览器程序进行漫长的下载。尽管作者软件价格昂贵，但它易于获取。

插件也易于更新，这使得Macromedia能够不断开发和分发新技术。该公司有意将Flash和Shockwave播放器设计为适应未来的修改，因此用户无需进行任何操作即可更新播放器，只需下载文件即可。由于这些文件大小相对较小，因此无需花费太多时间。此外，如果某个网站检测到您没有最新版本的插件，您的浏览器会告诉您，并引导您前往Macromedia网站下载更新。

Web上不同的动画格式都有其特定的优缺点。但许多网站管理员最终仍会使用Flash，即使另一种格式可能更适合他们的需求，仅仅因为他们知道大多数Web用户已经具备Flash功能；如果他们没有，也很容易获得。Flash和Shockwave的普遍性导致更多网站管理员加入Flash内容，这进一步扩大了这些格式的接受度。

Flash和Shockwave软件应用程序有很多重叠之处，并且都由同一家公司生产，但它们之间存在一些显著差异。其中大部分直接与这两种文件格式的起源有关。用于创建Shockwave文件的软件应用程序Director已经存在很长时间了，比目前形式的互联网还要久。它最初是为CD-ROM创建动态内容而开发的，并且至今仍用于此目的。然而，随着动态内容在互联网上变得越来越流行，Director的更新版本包含了更多功能，这些功能使Shockwave文件更适合在Web上使用。

另一方面，Flash是从零开始为网络使用而构建的。Macromedia将Flash改编自Future Splash Animator，一个矢量艺术动画程序。Macromedia的版本专门为通过电话线连接传输而定制。因此，Flash和Shockwave的核心具有两种不同的专业。因此，它们具有许多对比鲜明的优缺点

随着每次软件更新，这两种格式都越来越接近。Shockwave的Web功能在每个版本中都得到提升，Flash也变得更加通用。最终，这两种格式可能会合并为一种综合格式，囊括各自的最佳特性。

来自我们燃料电池文章的Flash电影。

Flash和Director的设计宗旨是易于使用且充满乐趣——它们都拥有直观的界面和许多自动化任务。这两个程序处理电影创作的方式有所不同，几乎所有东西都有不同的名称，但它们共享一些基本组件。要制作电影，您需要以三种不同的方式操作电影元素。您需要

Flash和Shockwave都提供了导入、生成和编辑电影元素的方法。在Flash中，您将这些元素存储在库中；在Shockwave中，它们则存储在演员表中。在这两个程序中，您都可以为这些元素分配任何动态特性，并将它们排列在舞台上。舞台代表最终电影中实际显示的内容。您可以使用舞台创建关键帧，并按顺序放置这些关键帧来布局电影。在Flash中，用于排列帧的区域称为时间轴，而在Shockwave中则称为乐谱。

您今天在Web上看到如此多的Flash动画的一个原因是它出奇地容易生成。Flash程序以及Director将一个功能齐全的动画工作室直接放在您的桌面上，并自动化了多媒体中许多复杂的任务。例如，如果您想让一个地球仪从屏幕的一侧滚动到另一侧，您无需为地球仪移动的每个帧都制作动画；您只需告诉Flash地球仪的起点和终点，并在这些帧之间为其指定一个滚动动作。有关如何制作Flash影片的良好介绍，请查阅Webmonkey的动画教程。

来自我们发动机文章的Flash动画。

Web动画的下一个大事件是3D Web图形。这为Web用户提供了与在线内容交互的另一个层面。在2D动画中，Web设计师决定您看到什么，就像动画师在您看电视卡通时决定您看到什么一样。在3D图形中，您实际上可以访问3D模型，因此您可以控制显示。您可以旋转模型，激活某些功能，在某些情况下甚至可以改变其尺寸。How Stuff Works已经展示了一些此类3D模型。

与Flash和Shockwave 2D动画一样，您需要下载一个插件才能查看3D Web图形。已经有许多公司开发了此软件。Viewpoint取得了一些成功，NxView在其网站上提供了一个插件。7月，Macromedia和英特尔宣布他们正在为Shockwave开发3D功能。用户只需下载更新即可为其Shockwave播放器添加3D功能。英特尔选择与Macromedia合作开展此项目，是因为该公司在多媒体播放器传播方面已取得成功。两家公司希望Shockwave 3D格式能成为3D图形的Web标准。

Shockwave技术能够缩放3D图形，使其能很好地适应不同的连接速度。基本上，如果您的连接速度较慢，Shockwave播放器将下载一个多边形较少的模型，多边形是构成3D模型的几何形状。这意味着您会丢失一些细节，但不会损失任何图像清晰度或运动流畅度。

这种3D网络技术允许各种有趣的网站内容。其中最有前景的应用之一是电子商务。在线购物者不再仅仅根据静止图片选择产品，他们将能够从各个角度查看商品，就像他们在商场商店里购物一样。一些网站还使用3D图形创建“虚拟试衣间”。用户可以创建自己身体形状的3D模型，并查看不同衣服穿在身上时的效果。

这项技术还可以为How Stuff Works等教育网站增加新的内容层次。我们已经发布了一些使用NxView生成的3D图形的文章，并计划未来开发更多3D内容。这些图形让用户能够更清晰地了解技术和流程——他们可以从任何角度查看发动机，就像发动机真实地摆在他们面前一样。

这项技术确实令人惊叹，它很可能会彻底改变互联网的外观和感觉，就像静止图片和Flash动画迄今为止改变了一切一样。在未来的文章中，我们将深入探讨这项技术的工作原理及其功能，并特别关注Macromedia和英特尔如何将Shockwave播放器发展成为网络标准。

随着越来越多的网络用户获得高带宽连接，未来的网络动画肯定会发生一些重大变化。其中一个想法是让网络更像一个视频游戏，而不是一本书——您将在一个三维、交互式的世界中访问信息。另一个想法是让它更像电视，拥有大量高质量的动画和视频。这一切实际上都取决于网页设计师想要在他们的网站中包含什么，而这反过来又取决于网络用户想要看到什么。无论如何，有各种迹象表明互联网将继续以惊人的速度发展。