在这个竞争激烈的环境中, 公司正在疯狂地寻找吸引和留住人们注意力的方法. 在我们的日常生活中, 街上的动画广告给我们带来无穷无尽的视觉刺激, 我们手机上的视频, 更别提我们的社交媒体了, 创造一种持续运动的感觉，争夺我们的注意力.

The split-second reaction to movement in our environment was developed out of the need to survive and triggered by environmental stimuli perceived as potentially threatening or harmful; people pay extra attention to things that move. 当我们看到某个东西从眼角快速移动时, 大脑会在瞬间提醒我们，因为在我们的意识有时间处理信息之前，我们的潜意识已经对危险做出了反应.

广告商知道这一点，这就是为什么我们要 街头动画广告 在公共汽车站和地铁站台, 在社交媒体流中弹出视频广告, 还有带全动态视频的电子广告牌. 这种技术是一种组合拳效应，旨在传递营销信息. 首先，抓住我们的注意力，其次， 使用视频和动画 把信息传达出去.

如果一张静态图片胜过千言万语，那么一个网站动画又有多少价值呢?

这就是网络动画的用武之地. 网页设计师 希望抓住并抓住我们的注意力，也许会增加意想不到的喜悦. 动画网页设计可以用来可视化在一个复杂的过程或想法的各个步骤, 为了说明一个简单的营销信息, 或者当人们再次滚动时，以自然流畅的方式移动网页上的内容, 引起注意:引起对某事的注意.

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

在万维网的早期，一切都是静态的、无聊的. 网页主要是基于平面设计和布局从印刷世界. 然而, 尽管存在技术和带宽方面的挑战，一些设计师还是做出了一致的努力，将早期的网络动画形式纳入其中，以使它们更具活力和吸引力. 第一个在网站上添加GIF动画的例子是on Jeffrey Zeldman1995年的《欧博体育app下载》. 迎接游客的是蝙蝠侠向他们飞来的动画画面.

《欧博体育app下载》宣传网站是当时最受欢迎的网站之一. 它启发了其他网页设计师和开发人员将GIF网页动画作为一种奇特的方式, 吸引眼球的元素进入他们的网站.

快进20年，gif动画现在无处不在. 他们在Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram和Facebook上. gif适用于短循环动画，图像序列，甚至短视频循环. An unfortunate shortcoming though is that the GIF file format doesn’t have variable transparency and doesn’t support an alpha channel; therefore, 所有像素不是完全不透明就是完全透明.

GIF动画是文艺复兴的开始 网页设计，但它们并不理想. 特别是在拨号上网和网速较慢的早期，动图是带宽的消耗. 结果是一个低分辨率、像素化的序列. 设计师必须将gif压缩到尽可能小的尺寸的缺点是有限的8位调色板, 这导致了很多犹豫. 这种情况随着高速互联网在21世纪变得越来越普遍而改变, 结果就是, 网络动画变得更好看数以百万计的颜色, 在更高的帧率下更流畅.

闪光网络动画的黎明

网络动画的大繁荣是随着 闪光 1996年 Macromedia 宣布了他们的网页插件和附带的基于帧的动画工具:Macromedia 闪光(在他们收购了 FutureSplash动画师，矢量动画程序). 闪光在为网络带来新功能方面发挥了主导作用. 从音频和动画到交互性和视频，闪光帮助推动了互联网的发展.

建立简单的机会, 精益, 包含交互的整个网站的基于矢量的网络动画, 创造了可以被称为网页设计的“巴洛克”时期，(太多)动画元素拥挤的景观. 尽管如此，闪光还是让我们看到了动态的可能性 网页设计，让设计师可以自由地进行实验，并开启了一段快速的网页设计进化时期.

闪光动画是轻量级的，相对容易制作. 大小只有几千字节, 它们以SWF文件格式分发，并使用带有清晰矢量图形的声音文件. 创建网页动画变成了一个精简的过程，不会增加太多的网页加载时间. 但尽管如此，一个明显的缺点仍然存在——它需要一个浏览器插件才能运行.

另外, ActionScript (AS)使闪光中的复杂交互成为可能, 一种类似于JavaScript的面向对象编程语言. ActionScript最初被设计用来控制简单的2D矢量动画，但后来演变成一个复杂的工具.

不幸的是, 闪光动画并不是用来响应的, 并不是在所有设备上都能正常运行, 并最终从所有流行的移动设备上删除. 而文件大小相对较小, 闪光没有得到很好的优化，最终消耗了大量CPU, 这在手机上也是一个问题. 在史蒂夫·乔布斯之后，闪光时代结束了 决定不支持闪光 在苹果移动设备上.

闪光诞生于PC时代，专为PC和鼠标设计. 但移动时代是低功耗设备的时代, 触摸界面, 以及开放的网络标准——这些都是闪光的不足之处.

史蒂夫•乔布斯

今日网络动画

今天，由于闪光已经过时，我们对网页动画有了不同的需求. 工具必须灵活轻便. 网页设计师 必须创建 响应 以及适用于不同设备(桌面)的内容, 平板电脑, 和移动), 考虑到各种屏幕尺寸, 吃嫩叶的动物。, 高宽比, 像素密度, 和更多的. 我们的网页动画杰作必须在5英寸，720px到9英寸的移动设备上工作.7英寸QXGA平板电脑，配32英寸Retina 6K显示屏.

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

网页设计师/动画师还必须考虑跨平台支持. 十年前, 设计师不必确保他们的作品在如此广泛的设备上看起来很好. 不同的长宽比，肖像，和景观方向，以及各种 像素密度 观看距离也要考虑在内. 这个难题给网页设计师带来了一系列新的挑战和潜在的陷阱. 用户测试 浪费宝贵的时间, 在众多平台上可能会出现更多问题, 网站的动画必须比以往任何时候都更加详细.

HTML5、CSS3、JavaScript和SVG(可缩放图形)似乎是网页动画的最佳解决方案. 使用这些现代网络技术和语言将有助于解决大多数问题, 但并非全部, 以上问题. 但谨慎行事总是个好主意, 尤其是在未知的领域, 广泛的QA和测试是必须的.

为什么要使用网络动画?

网络动画比静态网页更能吸引人们的注意力，更能清晰有效地传达一个想法或概念. 优秀的网络动画传达了一个故事背后的每一个动作. 这一切都是为了让动画具有意义和“灵魂”. 神圣之灵).

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

网页设计师 mustn’t look at web animation from a purely technical perspective; they need to look at it from the user’s perspective.

关于动画，最重要的一点就是时间. 适当的时机赋予动画物理和情感意义. 体验应该是无缝的和合乎逻辑的. 如果动画不流畅(有计时问题), 人们可能会认为这是一个错误，并失去进一步探索网站的所有动力.

动画师需要使用适当的时间来提供预期的效果. 动画中应该使用多少关键帧? 什么样的动画动态变化是由于访问者的互动, 互动后的反应有多快? 动画是异想天开的，严肃的，娱乐性的?

从逻辑的角度来看，我们可以将网络动画分为两种基本类型:

• 静态的、非交互式的web动画，例如 GIF动画.
• 具有用户参与和交互性的动态web动画，可根据用户输入进行更改.

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

动态网页动画通常用于在网站上呈现动画信息图表, 所以人们在滚动页面的时候会把更多的注意力放在特定的区域——这是一种突出显示相关信息的强大方式.

网络动画的利弊

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

一般来说，网页动画的利弊是什么呢? 执行良好的网页动画仍然会显得不合时宜, 因此，在将动画整合到网站设计中之前，问一些关键问题(以及测试客户和其他团队成员)总是一个好主意.

首先，我们需要检查一下 如何 动画会影响用户体验. 它会 改善 网站的用户体验? 设计师 应该:

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

这是 不 在网站上使用网络动画来跟随趋势是一个好主意.

使用网页动画的决定应该像对待其他设计决策一样对待; 网页设计师 必须权衡利弊，确保用户体验不受影响. 他们还应该与开发人员一起确定代码需求，并确保他们不会被低效的代码所困扰，而这些代码可能不得不在以后进行调整.

现代 网页动画技术 在过去的20年里有了明显的成熟, 可用带宽, 渲染质量也提高了. 然而, 设计师应该谨慎行事，只有在有意义地增强用户体验的情况下才添加动画.