18新利最新登入网络动画如何运作

木偶人的网络动画"width=
网络动画在过去的几年里已经取得了长足的进步,许多网站现在在他们的网站上都包含了它,以使浏览更有趣。akindo / Getty Images

如今,你可以在互联网上到处找到动画人物!网页设计师使用许多技术来创建动画,包括:

  • 动画gif
  • 动态HTML
  • Java
  • 冲击波和闪光

在本文中,我们将介绍所有这些技术是如何工作的,以及它们的优点和缺点。18新利最新登入我们还将看看将进一步扩展网络动画的最新创新!

广告

网络动画的演变

在其短暂的历史中,互联网一直在不断而迅速地发展。这种演变在很大程度上是由两种相反的力量驱动的:

  • 互联网作者和读者总是希望能够在互联网上传输更复杂的内容。
  • 为了达到大多数用户,Web内容的文件大小必须足够小,以便通过标准Internet连接(电话调制解调器)快速传输。

这些因素迫使互联网创新者想出了许多巧妙的方法,在有限的连接上传递复杂的内容。

广告

一个Flash动画从我们的核辐射文章.这是一个相当复杂的数字,但它的大小不到7000字节!

在下面的部分中,我们将了解每种技术以及它们如何处理这些相互竞争的力量。18新利最新登入

广告

动画gif

互联网历史上最大的创新之一是将照片和其他插图与网页上的文本整合在一起的能力。插图的形式是位图文件.位图文件简单地描述了每一个的颜色像素在图中。为了减小这些位图图像的文件大小,使用了几种不同的技术压缩图像数据。通常,Web站点发布这类图像的方式是任意一种JPEG文件或GIF文件。

动画只是按顺序显示的一系列静态图像,因此向Web站点添加动画的最明显的方法是发布用户浏览18新利最新登入器按顺序显示的一系列位图图像。这种动画叫做GIF动画,或GIF89它是第一个流行起来的网络动画,直到今天仍然很受欢迎。

广告

GIF动画的主要优点是操作起来非常简单,大多数Web浏览器都能自动识别它。使用共享软件程序,例如动图构造集对于Windows或Macintosh的GifBuilder,你所要做的就是提供组成动画帧的单个位图图像。然后发布文件并为图像编写标记,就像处理普通静态GIF一样。

缺点是,你必须保持动画非常简单,以保持文件大小较小。毕竟,每一帧都是一个完整的位图图像。4个简单的帧很容易传输给大多数用户,但当你达到20帧的时候,你的文件大小可能太大了。你甚至不能用20帧来完成很多事情——我们在电影中看到的流动动画每秒至少包含24张静止图像——所以动画gif是相当有限的。要制作任何长度的电影,你必须在每一帧之间进行相当大的跳跃,这意味着动画不是很流畅,就像你在下面的例子中看到的那样。

GIF动画中的单个帧。"width=
GIF动画中的单个帧。
最后的动画。"width=
最后的动画。

这是一个很好的方式来说明一个简单的概念,或只是添加一些引人注目的装饰你的网站;但网页设计者和网页用户发现,它完全不足以传达更复杂的思想,也无法为网站增添真正的动感。此外,你不能给GIF动画添加声音。

广告

动态HTML

正如我们所看到的,GIF动画的主要问题是“电影”的每一帧都大大增加了总文件大小。解决这个问题的一种方法是完全消除单个帧。相反,你只需告诉计算机取一张静止图像,然后在屏幕上移动它。从某种意义上说,当你用鼠标在屏幕上移动光标时,你一直在用你的电脑做这件事。

最初,Web页面在很大程度上是静态文件——也就是说,一旦加载了它们,它们就基本保持不变。这是与生俱来的超文本标记语言(HTML), Web页面的基本编程语言。超文本标记语言基本上由简单的标记组成,这些标记告诉Web浏览器在哪里显示Web页面元素。

广告

随着Internet的不断发展,Web设计人员发现这种静态的质量相当有限。他们想要补充动态内容到他们的网站——也就是说,一旦用户已经下载了一个特定的网页,内容就会发生变化。动态HTML,或dHTML,是使这成为可能的软件技术的术语。DHTML内容实际上是通过使用一些复杂的程序产生的脚本语言,例如Javascript,以访问称为文档对象模型在你的互联网浏览器上。基本上,文档对象模型(DOM)控制浏览器如何显示Web页面的一切。18新利最新登入现在,几乎所有用户的浏览器都将DOM公开给脚本语言,这样脚本就可以更改HTML元素(例如,当鼠标移动到一个单词上时更改文本颜色)。

DHTML创建时并没有考虑到动画,但它允许您以向Web页面添加运动的方式更改HTML元素。dHTML脚本可以简单地告诉浏览器不断更改页面上特定图像的位置,这样它就可以在屏幕上移动。如果您对几个不同的图像进行此操作,您可以将一系列图形元素相互移动,从而制作有趣的电影。

与GIF动画一样,dHTML动画可以被大多数Web浏览器自动识别,用户无需下载任何额外的组件。18新利最新登入然而,创建在所有浏览器上以相同方式工作的dHTML内容是相当棘手的,因此这类动画远不如GIF动画简单。实际上,自己编写动画程序是相当困难的,但有用户友好的软件应用程序,如Macromedia Dreamweaver的,这将为您生成正确的脚本代码。

DHTML在其动画应用程序中是相当有限的,因为它真正能做的就是在屏幕上移动静止图像。它比GIF动画流畅得多,但对于许多应用程序来说,它是一种显示不断变化的图像的不太有效的方式。DHTML几乎是Web浏览器内置动画功能的极限。为了给互联网添加更复杂的动画功能,创新者们不得不开发出一些程序来补充用户的浏览器。

Java applet

提供Web动画的另一种方法是通过通用的、面向网络的编程语言Java.使用Java,程序员可以创建用户从互联网上下载的应用程序。支持java的浏览器使用虚拟机这是一款能够识别Java语言并将其翻译为用户语言的软件计算机系统(Windows, MacOS, Unix)。虚拟机基本上是一种插件,它必须安装在浏览器中。

Java Web内容通常创建为名为小应用程序.applet并不是完整的软件应用程序——它们只能与浏览器配合使用。Web设计人员可以用applet做各种各样的事情,其中最受欢迎的应用程序之一是动画。Java的主要优点是它可以在所有操作系统上运行,而且非常灵活。您可以创建一个动画程序,为单个帧绘制简单的矢量形状,或者使用位图图像。Java特别适合于创建交互式动画以及将动画与其他Web页面元素相结合。有关Java的更多18luck手机登录信息,请查看18新利最新登入计算机程序如何工作

广告

插件

在90年代早期,互联网真正开始流行起来,网站的数量激增。突然之间,各种各样的人都在制作网页,他们想要包含各种各样的多媒体内容。Web革新者并没有试图改变浏览器来识别和显示这些不同形式的内容,而是提出了浏览器插件

插件是与您的浏览器一起工作以读取和播放某种类型的文件的程序。它们是相对较小的软件,所以用户从互联网上下载它们不会花很长时间。它们是专门为处理特定类型的文件而设计的,因此它们可以完成许多基本浏览器无法完成的事情。

广告

视频

流媒体视频通常使用插件方式,让您可以在web上查看视频内容。网络视频可以包括声音和更精细的动画。

现在,Web设计人员可以使用dHTML脚本来检测您是否有特定的插件。如果没有,浏览器将显示一条消息,告诉您如何下载插件。18新利最新登入这因应用程序的不同而不同,但它通常需要很长一段时间来完成整个过程,这是这样处理动画的一个明显的缺点。如果您已经安装了插件,大多数浏览器将在开始下载足够多的文件时开始播放电影。

不同的插件以不同的方式工作。视频播放器等应用QuickTime而且媒体播放器显18新利最新登入示一系列静止图像,就像GIF动画或视频电影一样,但它们能够更快地传输图像压缩而且流媒体他们。压缩是简化组成图像的信息以减小其文件大小的过程。18luck手机登录流媒体仅仅意味着玩家在整个文件下载之前就开始显示内容。

即使有这些功能,这种类型的电影文件需要很长时间才能下载,如果连接速度慢,质量也很差。

闪光和冲击波

到目前为止,处理动画最常见的插件是Flash和Shockwave,它们都来自Macromedia。这些都是基于矢量的二维动画观看器.下面的章节将详细讨论Flash和Shockwave。

一个Flash动画从我们的回旋镖文章。

我们的Flash动画回飞棒的文章

广告

闪光和冲击波

Macromedia在Flash和?这两种密切相关的格式上取得了巨大的成功冲击波.Flash现在是Web上丰富动画的标准格式,而Shockwave是一种非常流行的格式,用于呈现更复杂的动画内容。不像真正的球员而且QuickTime文件、Flash和Shockwave电影实际上作为Web页面的一部分出现,并包括高度的交互性,就像一个简单的HTML页面一样。Shockwave播放器不仅可以播放动画,还可以识别用户输入,然后控制浏览器的响应方式。18新利最新登入

广告

来自我们潜艇文章的交互式Flash电影。点击按钮,使子表面和淹没。

来自我们潜艇文章的交互式Flash电影。点击按钮,使子表面和淹没。

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

快速下载时间

有几个不同的因素使得快速下载成为可能。首先,有许多Flash文件和Shockwave文件的性质。不像GIF动画,Flash和Shockwave文件很大程度上是基于矢量的.这意味着authorware程序不是将图像保存为一系列像素值,而是将图像描述为一系列线条和形状,并将其记录为数学值。例如,直线可以用上升的角度、相对于其他形状的坐标位置以及相对于其他形状的长度来描述。以这种方式描述图像允许程序将图像的宽部分(位图文件中可能包含数百个像素的部分)保存为一对图形。Shockwave和Flash都可以使用位图图像,网站管理员可以将其压缩并缩小以保持文件大小较小。这些位图图片也可以在屏幕上移动路径,就像dHTML动画中移动的静止图像一样,这有助于减小文件的总大小。然而,大多数Flash文件都是完全基于矢量的,这使得它们加载起来特别快。18新利最新登入

当你的图像以这种方式生成时,它减少了动画师必须创建的帧数。闪光和冲击波技术可以创造渐变帧之间很容易以矢量为基础关键帧,通过计算两幅图像之间几何信息的变化。18luck手机登录这比直接位图动画占用的空间要少得多,位图动画必须将每一帧存储为唯一的图像。

另一个主要创新是文件实际传输的方式。Flash和Shockwave文件是这样浏览器就可以在整个文件下载之前开始播放“电影”。就像服务器先发送Web页面的文本,然后再发送任何图片文件一样,Flash站点可以配置为在加载其余Flash内容时发送介绍电影。网站管理员可以对文件进行编码,这样一旦下载了一定数量的文件,浏览器就会开始播放电影。这是计时的,以便在电影播放到那个点之前传输文件的每个部分。这也是流媒体视频的工作方式。

可用性

Flash和Shockwave受到如此多的Web用户和Web设计师的欢迎,很大程度上是因为Macromedia的传播策略。现在,插件都是随主要的Internet浏览器和计算机操作系统打包的,如果您还没有免费插件,很容易获得。所有安装过程都在后台进行,因此用户不必退出浏览器程序进行漫长的下载过程。写作软件很贵,但很容易买到。

更新插件也很容易,允许Macromedia不断地开发和分发新技术。该公司特意设计了Flash和Shockwave播放器,以适应未来的修改,所以用户不需要做任何事情来更新播放器,而是下载文件。由于这些文件的大小相当小,这样做并不花费太多时间。此外,如果站点检测到您没有最新版本的插件,您的浏览器会告诉您,并引导您到Macromedia站点下载更新。

网络上的不同动画格式都有各自的优点和缺点。但是许多网站管理员最终使用Flash,即使另一种格式可能更适合他们的需求,只是因为他们知道大多数Web用户已经具有Flash功能;如果他们不这样做,他们就很容易得到它。Flash和Shockwave的通用性使得更多的网站管理员使用Flash内容,这进一步扩大了对这种格式的接受程度。

广告

闪光和冲击波的区别

Flash和Shockwave软件应用程序涵盖了很多相同的领域,它们是由同一家公司生产的,但也有一些显著的区别。其中大部分与这两种文件格式的起源直接相关。用于创建Shockwave文件的软件应用程序Director已经存在了很长时间,比目前形式的互联网还要长。它最初是用来创建动态内容的只读光盘存储器,至今仍用于此目的。然而,随着动态内容在Internet上变得越来越流行,更新版本的Director包含了更多的特性,可以为在Web上使用定18新利最新登入制Shockwave文件。

另一方面,Flash是为在Web上使用而建立的。Macromedia从Future Splash Animator改编Flash,这是一个矢量艺术动画程序。Macromedia的版本是专门为通过电话线传输而定制的。所以在本质上,Flash和Shockwave有两种不同的专长。因此,他们有许多相互对比的优点和缺点:

广告

  • Flash文件比Shockwave文件加载更快。
  • Shockwave的用途更广。你可以创造更复杂的游戏,更精细的交互性和更精细的动画。
  • 您可以使用Shockwave使用更多类型的文件。例如,你可以将一个Flash文件导入到Shockwave电影中,但它不能反过来工作。
  • Flash更加通用。超过90%的Web用户安装了Flash插件,而只有不到60%的用户安装了Shockwave插件。
  • Flash创建软件更便宜。Director的成本略低于1,000美元,而Flash的成本约为400美元。
  • Flash是开源格式。任何人都可以看到它是如何工作的,18新利最新登入并可以自由地为自己的目的进行调整。总监使用编译文件格式,所以修改程序极其困难。

随着软件的每一次更新,这两种格式越来越接近。Shockwave的每个版本都有更好的Web功能,Flash也变得更加通用。最终,这两种格式可能会合并为一种综合格式,其中包含了各自的优点。

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

广告

创建Flash和冲击波电影

Flash和Director的设计相当简单,使用起来也很有趣——它们都有简单的界面和许多自动化任务。这两个程序处理电影创作的方式有些不同,它们几乎所有的东西都有不同的名称,但它们共享一些基本组件。要制作一部电影,你需要用三种不同的方式来操纵电影元素。你需要:

  • 创建和编辑组成电影的单个图像。
  • 排列这些图像,因为它们将出现在电影的单独帧中。
  • 把这些帧按顺序排列,这样它们就形成了一部电影。

Flash和Shockwave都有导入、生成和编辑电影元素的方法。在Flash中,你存储这些元素图书馆;在Shockwave中,他们进去了演员.在这两个程序中,您为这些元素分配任何动态特性并对它们进行排列在舞台上.舞台代表了最终电影中真正出现的东西。利用舞台,你创造关键帧你要按顺序排列电影。在Flash中,用于安排帧的区域被称为时间轴在Shockwave中叫做分数

广告

今天在Web上看到如此多的Flash动画的一个原因是它非常容易生成。Flash程序,以及导演,把一个功能动画工作室就在你的桌面上,并自动化了许多复杂的任务涉及多媒体。例如,如果你想让一个地球仪从屏幕的一边滚动到另一边,你不必在它移动的时候对它的每一帧都进行动画化;你只需告诉Flash地球仪在哪里开始,在哪里停止,并在这些帧之间分配一个滚动运动。要了解如何制作Flash电影,请查看Webmonkey18新利最新登入的网站动画教程

一个Flash动画从我们的引擎文章。

广告

网络动画的未来

网络动画的下一件大事是3d网络图形。这给了Web用户与在线内容的另一个层次的交互。在2-D动画中,Web设计人员决定你看到什么,就像动画师决定你在电视上看动画片时看到什么一样。在三维图形在美国,你可以访问一个3d模型,所以你可以控制显示。您可以翻转模型,激活某些函数,在某些情况下实际上还可以改变它的尺寸。18新利最新登入《物质工作原理》已经推出了一些这类的3d模型。

与Flash和Shockwave 2-D动画一样,您需要下载一个插件来查看3-D Web图形。已经有很多公司开发了这种软件。的观点取得了一些成功,然后呢NxView在他们的站点上有一个插件。7月,Macromedia和英特尔宣布他们正在为Shockwave开发3d功能。用户只需下载更新版本,就可以将3d功能添加到Shockwave播放器中。英特尔选择与Macromedia在这个项目上合作,是因为该公司在传播多媒体播放器方面已经取得了成功。两家公司希望Shockwave 3-D格式将成为3-D图形的网络标准。

广告

冲击波技术有办法扩展三维图形,以便它们在不同的连接速度下都能正常工作。基本上,如果你有一个较慢的连接,Shockwave播放器将下载较少的模型多边形这些几何图形结合在一起形成了一个三维模型。这意味着你会失去一些细节,但你不会失去任何图像的清晰度或流动性的运动。

这种3d网络技术允许各种有趣的网站内容。最有前途的应用之一是在电子商务.网上购物者将不再根据静态图片来选择产品,而是可以从各个角度观察商品,就像他们在商场的商店里购物一样。一些网站还使用3d图形来创建“虚拟试衣间”。用户可以为自己的体型创建一个3d模型,看看不同的衣服适合自己的身材。18新利最新登入

这项技术还可以为教育网站(如How Stuff Works)增加一个新的内容层次。18新利最新登入我们已经发表了一些使用NxView生成的3-D图形的文章,并且我们计划在未来开发更多的3-D内容。这些图形可以让用户更清楚地了解技术和流程——他们可以从任何角度观察发动机,就像一台真正的发动机就在他们面前一样。

这项技术真的很神奇,它很可能会彻底改变互联网的外观和感觉,就像静态图片和Flash动画改变了迄今为止的一切一样。在以后的文章中,我们将进一步研究这项技术是如何工作的以及它可以做什么,并特别关注Macrom18新利最新登入edia和Intel在开发Shockwave播放器作为Web标准方面所做的工作。

随着越来越多的网络用户获得高带宽连接,网络动画在未来肯定会有一些大的变化。其中一个想法就是让网络不那么像书本,而更像电子游戏——你可以在一个3d的交互式世界中访问信息。18luck手机登录另一个想法是让它更像电视,有很多高质量的动画和视频。这实际上完全取决于Web设计者想要在他们的网站上包含什么内容,而这又取决于Web用户想要看到什么。无论如何,种种迹象表明,互联网将继续以惊人的速度发展。

广告

常见问题解答

动画对网站有好处吗?
是的,动画对网站有好处。它有助于吸引注意力,以更吸引人的方式解释事物,并使整体体验更愉快。18新利最新登入然而,只有在真正有效的情况下,才需要谨慎地使用动画。过度使用动画会让网站看起来很忙,让人不知所措,这可能会让人们离开。
特色

广告

加载……
Baidu