后Flash时代的网络动画

在这个竞争激烈的环境中，企业都在疯狂地寻找方法来吸引和留住人们的注意力。 随着我们的日常生活，街上的动画广告、手机上的视频，更不用说我们的社交媒体源，源源不断的视觉刺激向我们涌来，创造了一种不断运动的感觉，正在争夺我们的注意力。

对我们环境中的运动的瞬间反应是出于生存的需要，并由被认为具有潜在威胁或有害的环境刺激触发； 人们特别注意移动的东西。 当我们从眼角捕捉到快速移动的东西时，大脑会在瞬间提醒我们，因为我们的潜意识大脑在有意识的大脑有时间处理信息之前就已经对危险做出了反应。

广告商知道这一点，这就是为什么我们在公交车站和地铁站台上投放动画街头广告、在社交媒体流中弹出视频广告以及带有全动态视频的电子广告牌的原因。 该技术是一种一两拳效果，旨在传递营销信息。 首先，通过吸引我们的注意力，其次，使用视频和动画来传达信息。

如果一张静态图值一千字，那么一部动画值多少钱？

这就是网络动画的用武之地。网页设计师希望抓住并吸引我们的注意力，并可能会增加意想不到的愉悦感。 Web 动画可用于可视化复杂过程或想法中的各个步骤，说明简单的营销信息，或者在人们滚动时以自然流畅的方式移动网页上的内容——再次，以引起对某事的注意。

网络动画是如何开始的，GIF 的兴起

在万维网的早期，事情相当静态和无聊。 网页主要基于印刷界的图形设计和布局。 然而，一些设计师齐心协力——尽管存在技术和带宽挑战——将早期形式的网络动画包括在内，以使它们更具活力和吸引力。 1995 年，杰弗里·泽尔德曼 (Jeffrey Zeldman) 的《永远的蝙蝠侠》(Batman Forever) 是网站上最早添加的 GIF 动画之一。蝙蝠侠飞向他们，以动画形式向访客致意。

Batman Forever 促销网站是当时最受欢迎的网站之一。 它启发了其他网页设计师和开发人员将 GIF 网页动画作为一种古怪、引人注目的元素融入他们的网站。

快进 20 年，动画 GIF 现在无处不在。 他们在 Twitter、Messenger、iMessage、WhatsApp、Skype、Instagram 和 Facebook 上。 GIF 适用于短循环动画、图像序列，甚至短视频循环。 一个不幸的缺点是 GIF 文件格式不具有可变透明度并且不支持 Alpha 通道。 因此，所有像素要么完全不透明，要么完全透明。

GIF 动画是网页设计复兴的开端，但并不理想。 尤其是在拨号上网和网速较慢的早期，GIF 会占用大量带宽。 结果是一个低分辨率的像素化序列。 设计师必须将 GIF 压缩到尽可能小的尺寸的缺点是有限的 8 位调色板，这导致了很多抖动。 随着高速互联网在 21 世纪变得越来越普遍，这种情况发生了变化，因此，网络动画变得更好看，拥有数百万种颜色，并且随着更高的帧速率变得更流畅。

Flash Web 动画的黎明

1996 年，当 Macromedia 宣布了他们的网络插件和附带的基于帧的动画工具：Macromedia Flash（在他们收购了矢量动画程序 FutureSplash Animator 之后），随着 Flash 的推出，网络动画大热潮随之而来。 Flash 在将新功能引入网络方面发挥了主导作用。 从音频和动画到交互性和视频，Flash 帮助推动了互联网的发展。

在包括交互在内的整个网站上构建简单、精简、基于矢量的网络动画的机会，创造了可以称为网页设计的“巴洛克”时期，其中（太多）动画元素挤满了景观。 尽管如此，Flash 还是让我们得以一窥动态网页设计的可能性，让设计师可以自由地进行实验，并开启了一段网页设计快速发展的时期。

Flash 动画是轻量级的并且相对容易制作。 它们只有几千字节的大小，以 SWF 文件格式和带有清晰矢量图形的声音文件分发。 创建网络动画成为一个简化的过程，并没有增加网页加载时间。 但尽管如此，仍然存在一个明显的缺点——它需要一个浏览器插件才能运行。

此外，Flash 中的复杂交互由 ActionScript (AS) 实现，这是一种类似于 JavaScript 的面向对象的编程语言。 ActionScript 最初设计用于控制简单的 2D 矢量动画，但随后演变为复杂的工具。

不幸的是，Flash 动画并非旨在响应，在所有设备上都无法正常运行，最终从所有流行的移动设备中删除。 虽然文件大小相对较小，但 Flash 没有得到很好的优化，最终占用了 CPU，这在移动设备上也是一个问题。 在史蒂夫乔布斯决定不在 Apple 移动设备上支持 Flash 之后，Flash 时代结束了。

Flash 是在 PC 时代为 PC 和鼠标创建的。 但移动时代是关于低功耗设备、触摸界面和开放网络标准的——这些都是 Flash 的不足之处。

史蒂夫乔布斯

今天的网络动画

如今，随着 Flash 的淘汰，我们对网络动画有不同的需求。 工具必须灵活轻便。 网页设计师必须为不同的设备（台式机、平板电脑和移动设备）创建响应性和适应性强的内容，同时考虑到各种屏幕尺寸、浏览器、纵横比、像素密度等。 我们的网络动画杰作必须在 5 英寸、720 像素的手机、9.7 英寸 QXGA 平板电脑和 32 英寸 Retina 6K 显示器上运行。

技术已经成熟到一个地步，即使动力不足的移动设备也有足够的带宽和处理能力来处理要求非常高的网络动画和高分辨率视频内容。 这并不意味着网站应该超级“繁忙”。 与往常一样，它是关于在动画、动态交互和静态元素之间取得适当的平衡。 我们今天可以实现很多花哨的网络动画这一事实并不意味着我们应该这样做。

网页设计师/动画师还必须考虑跨平台支持。 十年前，设计师不必确保他们的作品在如此广泛的设备上看起来不错。 必须考虑不同的纵横比、纵向和横向以及各种像素密度和观看距离。 这个难题给网页设计师带来了一系列新的挑战和潜在的陷阱。 用户测试会消耗宝贵的时间，在众多平台上可能会出现更多问题，并且网络动画必须比以往更加详细。

HTML5、CSS3、JavaScript 和 SVG（可缩放图形）似乎是 Web 动画的最佳解决方案。 使用这些现代网络技术和语言将有助于解决上述大部分问题，但不是全部。 但谨慎行事总是一个好主意，尤其是在未知领域，并且必须进行广泛的 QA 和测试。

为什么使用网络动画？

网络动画可以比静态网页更长时间地吸引和吸引人们的注意力，并且更清晰有效地传达想法或概念。 优秀的网络动画传达了每一个动作背后的故事。 这一切都是为了让动画充满意义和“灵魂”（lat. anima）。

网络动画应该流畅、有意义，并支持访问者的旅程。 网页设计师/动画师需要了解动画如何融入用户体验，尝试预测可能的用户流，然后以有意义的方式支持它。

网页设计师不能从纯粹的技术角度来看待网页动画； 他们需要从用户的角度来看待它。

动画的基本要素之一是时间安排。 适当的时机赋予动画以物理和情感意义。 体验应该是无缝的和合乎逻辑的。 如果动画不流畅（有时间问题），人们可能会将其视为错误并失去进一步探索网站的动力。

动画师需要使用适当的时间来提供预期的效果。 动画中应该使用多少个关键帧？ 动画中的什么样的动态变化是由于访客互动，互动后反应有多快？ 动画是否异想天开、严肃、有趣？

从逻辑上看，我们可以将网络动画分为两种基本类型：

• 静态的、非交互式的网络动画，例如 GIF 动画。
• 具有用户参与度和交互性的动态网络动画，会随着用户输入而变化。

动态动画的最佳示例是游戏，用户可以在其中操纵屏幕上的内容。 另一个简单的示例是在网站访问者滚动浏览视差滚动网站时更改某些元素的位置。 动画不是被动的，它会根据用户操作而变化。

动态网页动画通常用于在网站上呈现动画信息图表，因此人们在滚动页面时会更加关注特定区域——这是一种突出相关信息的有效方式。

网络动画的优缺点

以下是网络动画技术的一些优缺点，包括不再使用的遗留解决方案。

一般而言，网络动画的优缺点如何？ 执行良好的网络动画仍然会显得格格不入，因此在继续将动画集成到网站设计中之前，询问一些关键问题（以及测验客户和其他团队成员）总是一个好主意。

首先，我们需要检查动画将如何影响用户体验。 它会改善网站的用户体验吗？ 设计师应该：

• 检查现有的网站设计（如果有）
• 检查目标受众和他们使用的硬件平台
• 检查站点加载时间和 CPU 负载
• 探索其他选择
• 关注可用性

在网站上使用网络动画来简单地跟随趋势并不是一个好主意。

使用网络动画的决定应被视为任何其他设计决定； 网页设计师必须权衡利弊，并确保不影响用户体验。 他们还应该与开发人员一起确定代码要求，并确保他们不会被低效的代码卡住，这些代码可能需要在未来进行调整。

现代网络动画技术在过去 20 年中已经显着成熟——性能、可用​​带宽和渲染质量都有所提高。 但是，设计师应该谨慎行事，只有在有意义地增强用户体验的情况下才向网站添加动画。

进一步阅读 Toptal 设计博客：

• 如何创建自定义加载动画以降低跳出率
• 立即使用 Sketch 和 Looper 创建令人费解的插图
• 使用原理和草图的 UI 动画分步指南
• 标志动画灵感，使您的品牌更具相关性
• 创建动画产品说明视频的分步指南