在这个竞争激烈的环境中, companies are frantically looking for ways to capture and retain people’s attention. 在我们的日常生活中, the endless stream of visual stimulation gushing at us from animated ads on the street, 我们手机上的视频, 更别提我们的社交媒体了, creates a sense of constant movement that is vying for our attention.
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. As we catch something moving fast out of the corner of our eye, 大脑会在瞬间提醒我们，因为在我们的意识有时间处理信息之前，我们的潜意识已经对危险做出了反应.
广告商知道这一点，这就是为什么我们要 街头动画广告 在公共汽车站和地铁站台, 在社交媒体流中弹出视频广告, 还有带全动态视频的电子广告牌. The technique is a one-two punch effect designed to deliver marketing messages. 首先，抓住我们的注意力，其次， 使用视频和动画 把信息传达出去.
If a static picture is worth a thousand words, 如何 much is a website animation worth?
这就是网络动画的用武之地. 网页设计师 希望抓住并抓住我们的注意力，也许会增加意想不到的喜悦. Animation 网页设计 can be used to visualize various steps in a complex process or idea, 为了说明一个简单的营销信息, or to move things on a web page in a natural and fluid way as people scroll—again, 引起注意:引起对某事的注意.
During the early days of the World Wide 网络, things were rather static and boring. 网络pages were mostly based on graphic design and layouts from the print world. 然而, 尽管存在技术和带宽方面的挑战，一些设计师还是做出了一致的努力，将早期的网络动画形式纳入其中，以使它们更具活力和吸引力. One of the first additions of a GIF动画 to a website was on Jeffrey Zeldman1995年的《欧博体育app下载》. Visitors were greeted by Batman’s flight towards them, animated as a picture sequence.
The Batman Forever promo site was one of the most popular sites at the time. 它启发了其他网页设计师和开发人员将GIF网页动画作为一种奇特的方式, 吸引眼球的元素进入他们的网站.
快进20年，gif动画现在无处不在. They’re on Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram, and Facebook. GIFs are suitable for short loop animations, image sequences, and even short video loops. 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位调色板, 这导致了很多犹豫. This changed with high-speed internet becoming more commonplace in the 21st Century, 结果就是, 网络动画变得更好看数以百万计的颜色, 在更高的帧率下更流畅.
网络动画的大繁荣是随着 闪光 1996年 Macromedia 宣布了他们的网页插件和附带的基于帧的动画工具:Macromedia 闪光(在他们收购了 FutureSplash动画师，矢量动画程序). 闪光 played a leading role in bringing new capabilities to the web. 从音频和动画到交互性和视频，闪光帮助推动了互联网的发展.
建立简单的机会, 精益, vector-based web animations across entire sites that included interactions, 创造了可以被称为网页设计的“巴洛克”时期，(太多)动画元素拥挤的景观. Nevertheless, 闪光 offered a glimpse into the possibilities of dynamic 网页设计，让设计师可以自由地进行实验，并开启了一段快速的网页设计进化时期.
闪光动画是轻量级的，相对容易制作. 大小只有几千字节, 它们以SWF文件格式分发，并使用带有清晰矢量图形的声音文件. 创建网页动画变成了一个精简的过程，不会增加太多的网页加载时间. 但尽管如此，一个明显的缺点仍然存在——它需要一个浏览器插件才能运行.
另外, sophisticated interaction in 闪光 was enabled by ActionScript (AS), an object-oriented programming language similar to JavaScript. ActionScript最初被设计用来控制简单的2D矢量动画，但后来演变成一个复杂的工具.
不幸的是, 闪光动画并不是用来响应的, 并不是在所有设备上都能正常运行, 并最终从所有流行的移动设备上删除. 而文件大小相对较小, 闪光没有得到很好的优化，最终消耗了大量CPU, 这在手机上也是一个问题. 在史蒂夫·乔布斯之后，闪光时代结束了 决定不支持闪光 在苹果移动设备上.
闪光诞生于PC时代，专为PC和鼠标设计. 但移动时代是低功耗设备的时代, 触摸界面, 以及开放的网络标准——这些都是闪光的不足之处.
史蒂夫•乔布斯
Today, as 闪光 is obsolete, we have different needs for web animation. 工具必须灵活轻便. 网页设计师 必须创建 响应 以及适用于不同设备(桌面)的内容, 平板电脑, 和移动), 考虑到各种屏幕尺寸, 吃嫩叶的动物。, 高宽比, 像素密度, 和更多的. Our web animation masterpieces have to work on a 5-inch, 720px mobile through to a 9.7英寸QXGA平板电脑，配32英寸Retina 6K显示屏.
技术已经成熟到一个地步，即使是性能不佳的移动设备也有足够的带宽和处理能力来处理非常苛刻的网络动画和高分辨率视频内容. 这并不意味着网站应该超级“繁忙”.一如既往, 这是关于在动画之间取得适当的平衡, 动态交互, 静态元素. 事实上，我们今天可以实现许多花哨的网络动画并不意味着我们应该这样做.
网页设计师/animators must also consider cross-platform support. 十年前, 设计师不必确保他们的作品在如此广泛的设备上看起来很好. Different 高宽比, portrait, and landscape orientations, as well as various 像素密度 观看距离也要考虑在内. 这个难题给网页设计师带来了一系列新的挑战和潜在的陷阱. 用户测试 浪费宝贵的时间, 在众多平台上可能会出现更多问题, and animations for websites have to be more detailed than ever.
HTML5、CSS3、JavaScript和SVG(可缩放图形)似乎是网页动画的最佳解决方案. Using these modern web technologies and languages will help tackle most, 但并非全部, 以上问题. 但谨慎行事总是个好主意, 尤其是在未知的领域, 广泛的QA和测试是必须的.
网络动画比静态网页更能吸引人们的注意力，更能清晰有效地传达一个想法或概念. Excellent web animation conveys a story behind every bit of movement. 这是 all about bringing an animation to life with meaning and “soul” (lat. 神圣之灵).
网络 animation should be smooth, meaningful, and support the visitor’s journey. The 网页设计er/animator needs to be aware of 如何 the animation fits into the 用户体验, try to predict likely user flows, and then support it in a meaningful way.
网页设计师 mustn’t look at web animation from a purely technical perspective; they need to look at it from the user’s perspective.
关于动画，最重要的一点就是时间. Proper timing gives physical and emotional meaning to an animation. 体验应该是无缝的和合乎逻辑的. 如果动画不流畅(有计时问题), people could perceive it as a bug and lose all motivation to explore the website further.
The animator needs to use appropriate timing to provide the intended effect. 动画中应该使用多少关键帧? What kind of dynamic change in the animation is due to visitor interaction, 互动后的反应有多快? 动画是异想天开的，严肃的，娱乐性的?
From a logical point of view, we can divide web animation into two basic types:
动态动画的最佳例子是 一个游戏，用户可以在其中操作屏幕上的内容. 另一个简单的例子是改变网站访问者的某些元素的位置 通过滚动 一个视差滚动网站. The animation is 不 passive, it varies depending on user actions.
Dynamic web animation is often used to present animated infographics on a website, 所以人们在滚动页面的时候会把更多的注意力放在特定的区域——这是一种突出显示相关信息的强大方式.
以下是网络动画技术的一些优点和缺点, 包括不再使用的遗留解决方案.
| 技术 | 优点 | 缺点 |
| GIF | 它很简单，每个人都可以使用. 不需要浏览器插件. 它可以实现图像序列动画，它可以像视频. | gif动画文件的大小可能很大. 不透明度控制是不存在的，没有alpha通道. 它的压缩率很低. 它可以像素化. |
| APNG | 支持alpha通道. | 大多数web浏览器不支持. |
| 闪光 | 导出的swf文件可能非常小. 它速度快，可以互动，并且使用矢量动画. | 大多数平台不再支持. |
| HTML / CSS3 | 简单易学. 对于转换和转换很有用. HTML/CSS3动画在移动设备上运行良好. 它允许矢量或像素动画. 还可以操作可缩放矢量图形(SVG). | 并不是所有的SVG属性都可以用CSS动画化. 它对动画的可能性有限，通常需要使用JavaScript或SMIL. It can不 respond to new inputs or a changing environment (dynamic animation). |
| SMIL | It's compact and capable of animating properties that CSS can't handle. 在作为图像嵌入时保留SVG. | 并非所有浏览器都支持. |
| JavaScript | 当使用生成图像序列的SVG动画库时，使web动画变得容易(.png序列) | 作为图像嵌入时不保留SVG. |
一般来说，网页动画的利弊是什么呢? 执行良好的网页动画仍然会显得不合时宜, 因此，在将动画整合到网站设计中之前，问一些关键问题(以及测试客户和其他团队成员)总是一个好主意.
首先，我们需要检查一下 如何 动画会影响用户体验. 它会 改善 网站的用户体验? 设计师 应该:
这是 不 a good idea to use web animation on a site to simply follow trends.
The decision to use web animation should be treated as any other design decision; 网页设计师 must weigh the pros and cons and make sure that the 用户体验 is 不 compromised. 他们还应该与开发人员一起确定代码需求，并确保他们不会被低效的代码所困扰，而这些代码可能不得不在以后进行调整.
现代 网页动画技术 在过去的20年里有了明显的成熟, 可用带宽, 渲染质量也提高了. 然而, 设计师应该谨慎行事，只有在有意义地增强用户体验的情况下才添加动画.
网页动画用于各种网页. 它们可以是在访问者滚动网页时发生的小型网络动画，以吸引人们对某个元素的注意, 演示产品的动画, or a promotional web animation that s如何s off something entertainingly and engagingly.
网页动画可以用来吸引注意力, 更好地吸引人们, 更清晰有效地沟通. It can engage and hold people’s attention longer than just a static web page. 网络 animation should be smooth, meaningful, and support the visitor’s journey.
The basic types of web animation are CSS and JavaScript animation, 可缩放矢量图形(SVG), SMIL, GIF, canvas, 和视频. Each web animation type is best used for what it’s intended for. 例如，CSS过渡和动画应该理想地用于UI和基本过渡.
闪光是一个动画工具，也是Adobe的浏览器插件. 它使用基于框架的时间轴来构建web动画，并且可以通过使用称为ActionScript的脚本语言来实现交互性. 大多数移动设备不支持它，所有的web浏览器也逐渐停止对它的支持.
瓦拉ž喧嚣,克罗地亚
2015年1月23日成为会员
世界级的文章，每周发一次.
世界级的文章，每周发一次.
