序_JavaScript网页动画设计_红黑联盟读书频道

序

收藏我要投稿

本文所属图书 > JavaScript网页动画设计

本书由业界最先进的动画库Velocity js的作者所著，书中内容共分为8章，简明扼要地总结了在网页上使用动画的技术技巧，让读者掌握如何有效利用动画实现无与伦比的用户体验。具体内容包括：JavaScript动画优势，Ve立即去当当网订购

开发人员首次发现jQuery的.animate()函数时是个特别的时刻。我记得自己一发现这个函数就尝试给页面上任何主内容区以外的东西都加上动画效果。我实现了手风琴效果（accordion）、飞出菜单（fly-out menu）、悬停效果（hover effect）、滚动过渡动画（scroll transition）、神奇显示（magical reveal）和视差滚动幻灯片（parallax slider）。这些动画为我原本冷冰冰、静止不动的页面带来了动态的视觉体验，使我感觉作为网页设计师，自己又更上一层楼了。但这些只不过是华而不实的把戏罢了。时至今日，我意识到那时添加的那么多动画并没有真正提高网站的用户体验。
尽管如此，我当时仍是激动不已。究竟是什么让动画如此激动人心？
从我的公寓向外望去，可以看到布鲁克林市中心。我见到下面的街道行人攒动；烟缕从烟囱里向外冒，就好像滚滚巨浪；鸽子振动双翅，飞到窗台上歇息；一台起重机高高吊起建筑物的一部分；一个孤零零的心形气球升向布鲁克林的天空（听上去有些老土，这我知道，不过我确实见到过两次）；汽车在威廉斯堡大桥上穿梭；头上云朵轻轻飘过。
世界在不停地运动。
这也是我们脑中整个宇宙的运作状态。事物在运动。正如窗外这些移动的事物，它们每个都在讲述短短一句话的故事。然而它们合在一起，又在讲述着一个更大的、正在发生的故事。
但是，数字界面却不是这样运作的，它缺少了那些短短的故事。当事情在发生变化时，得自己添补缺漏的情节。比如，点击ATM机上的“下一页”按钮以后，屏幕突然改变了。它成功进入下一页了吗？还是出现错误了？你必须重新读屏并理解上面的信息，才能了解自己的行为带来怎样的结果。这就造成互动与互动之间产生理解的空白。如果使用了动效，就可以消除这种理解的空白，因为动效自然而然地告诉了人们什么东西发生了变化。这就好像在一种状态到另一种状态之间填补上许多小故事一样。
当滑动过渡效果带你来到下一屏时，动画帮助你更好地理解了刚刚发生的事情。正是这种力量使动画格外令人兴奋。就像布局、色彩和字体一样，动画帮助你塑造和引导用户的体验。它不仅仅是让东西运动起来，更需要有效的设计和精心的实现。
不幸的是，在网页动画的历史当中，人们并不总是认为深思熟虑是至关重要的。作为开发人员，我们用过各式各样的方法实现动画，比如Flash、动画GIF、Java小程序、marquee标签，直至最近的CSS、JavaScript和SVG。但是，那些动画充其量只不过是页面上的锦上添花；在最坏的情况下，它们甚至沦为哗众取宠的把戏。动画既要高性能又要人性化，这还是一种相对较新的理念。
因此，有这本书在你面前是一件幸事。Julian Shapiro是网页动画领域最重要的专家之一。在编写与维护Velocity.js期间，他积累了大量一手知识，包括在网站上使用动效的所有窍门和优势。本书不仅会带给你在网页上实现动画的技术诀窍，更重要的是，它蕴含了对动画的深刻见解，只有理解了这些，才能有效地利用动画带来无与伦比的用户体验。
各种动画库和技术已经使动效设计变得空前容易。但并不是每一位开发人员都遵从最佳实践。在过去的几年间，有几种时髦的反模式风行一阵之后又消失无踪。滚动行为被用来实现别样的用途。移动设备上的导航被挤到菜单里面，只有通过手势才能访问。尽管任何偶然知晓.animate()函数的开发人员都能轻而易举地添加动画效果，但只有那些能用其提升用户体验的开发人员才可以称为真正具有奉献精神的专业开发人员。本书将助你成为其中一员。

David DeSandro
2015年2月于纽约布鲁克林
David DeSandro是Metafizzy的创始人，也是Mansonry和
Isotope这两款jQuery插件的作者/开发人员

点击复制链接与好友分享!回本站首页

分享到：更多

您对本文章有什么意见或着疑问吗？请到论坛讨论您的关注和建议是我们前行的参考和动力

上一篇：1.3　功能

下一篇：1.5　小结

图文推荐

排行