1.3　功能_JavaScript网页动画设计

1.3　功能

收藏我要投稿

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

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

追求速度当然不是使用JavaScript的唯一理由，它还具有一大堆其他同等重要的功能。让我们大致看几个JavaScript所独有并值得关注的动画功能。
1.3.1　页面滚动
页面滚动是基于JavaScript的动画最为流行的应用之一。最近，网页设计的趋势是创建很长的页面。随着页面向下滚动，让每一部分新的内容自动滚到可视区域中来。
例如Velocity这样的JavaScript动画库提供了一种将元素滚动至可视区域的简单函数：
$element.velocity("scroll", 1000);
以上代码通过使用Velocity的"scroll"命令让浏览器用1000毫秒的时间滚动至$element的上方边缘位置。注意，Velocity的语法与jQuery的$.animate()函数几乎一模一样，这会在本章后面的部分进行详述。
1.3.2　动画反转
动画反转是用于撤消元素前一个动画的简便方法。通过调用反转命令，你会使元素以动画形式变动回上一个动画开始之前的值。反转的常见用途是动态显示一个模态对话框，然后在用户点击“关闭”后再将其隐藏起来。
如果想实现动画反转，但却没有优化工作流程的话，你会这么做：把上次在每个元素上动态显示的特定属性跟踪记录下来，以备后续反转动画之用。但是在UI代码中跟踪之前的动画状态很快就会变得难以控制。与之形成鲜明对比的是Velocity，通过reverse命令就可以记住一切。
与Velocity中scroll命令的语法相似，reverse命令也是通过将"reverse"作为Velocity的第一个参数传入而调用的：
// 第一个动画：设置元素的opacity属性变动至0的动画
$element.velocity({ opacity: 0 });
// 第二个动画：设置元素的opacity属性值变动回初始值1的动画
$element.velocity("reverse");
当谈到JavaScript的动画定时控制时，就不仅仅是反转那么简单了：JavaScript还允许对全部正在运行的动画进行全局减速或加速。第4章会介绍这一强大功能的相关知识。
1.3.3　基于物理的动效
动效设计中的物理原则反映了成就优秀用户体验（UX）的核心原则：那就是伴随着用户的输入，界面出现自然的反应。换言之，界面设计遵从物体在真实世界中的运动规律。
在Velocity中有一个简单且强大的入门级物理动效，即基于弹簧运动原理的缓动类型。（我们会在下一章详细探讨缓动的概念。）使用典型的缓动选项，可以传入一个与预先定义的缓动曲线（例如，"ease"或"easeInOutSine"）相对应的字符串。相反，弹簧物理缓动类型接受一个含有两个项的数组作为参数。
// 使用500个张力单位和20个摩擦力单位的弹簧物理缓动，设置将元素的宽度变动至"500px"的动画
$element.velocity({ width: "500px" }, { easing: [ 500, 20 ] });
缓动数组中的第一项代表弹簧的张力，而第二项代表摩擦力。张力值越大，动画的总体速度就越快，总体反弹幅度就越大。摩擦力值越低，动画尾部振动的速度就越快。通过调整这些数值，可以为页面上每一个动画实现独特的运动效果，这有助于强化不同行为之间的差异。

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

分享到：更多

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

上一篇：1.3　功能

下一篇：1.5　小结

图文推荐

排行