1.1　JavaScript动画与CSS动画_JavaScript网页动画设计

1.1　JavaScript动画与CSS动画

收藏我要投稿

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

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

在本章中，我们将会对比CSS动画和JavaScript动画的优劣，同时介绍JavaScript动画的特点和工作流方面的优势。
简而言之，我们提供所需的背景知识，帮助你理解即将在本书中学到的JavaScript的任何知识。
在网页开发圈子里有一种误解，那就是认为CSS动画是网络中唯一可以实现高性能动画的方法。这种误解使很多开发人员干脆放弃了用JavaScript实现动画，而这会迫使他们做出以下行为。

在样式表中管理有关用户界面（UI）互动的所有内容，这样代码很快会变得难以维护。
牺牲实时动画的定时控制，因为它只能通过JavaScript实现。（在移动应用中会看到需要响应用户拖拽操作的UI。在为这些UI设计动画时，必须使用定时控制。）
放弃基于物理的动效设计，这会使网页上的元素无法表现得像真实世界中的物体一样。
不再支持旧浏览器版本，而实际上旧版本浏览器在世界范围内仍大量使用。

事实是，基于JavaScript的动画与基于CSS的动画一样快。之所以人们错误地认为CSS动画在性能上有显著优势，那是因为人们通常拿它与jQuery的动画性能对比，后者确实非常慢。然而，一些彻底绕开jQuery的JavaScript动画库通过与页面的顺畅交互表现出了非凡的性能。
注意 Velocity.js是一个著名的动画库，本书自始至终都在使用它。这是个轻量级的库，但是功能却异常丰富。另外，它与jQuery的动画语法类似，能够大幅降低学习难度。
当然，CSS非常适合实现悬停状态的动画效果（例如：当鼠标位于链接上方时，链接变成蓝色），这也是通常情况下基本的网页所包含的动画。CSS过渡效果可以直接在已有的样式表中实现，这样开发人员就可以避免使用冗余的JavaScript库，使页面不再臃肿。另外，CSS动画不费吹灰之力就可以呈现上佳表现。
但是，本书将会说明为什么JavaScript对于动画来说经常是更好的选择，简单的悬停效果除外。

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

分享到：更多

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

上一篇：1.3　功能

下一篇：1.5　小结

图文推荐

排行