频道栏目
读书频道 > 网站 > 网页设计 > JavaScript网页动画设计
1.3 功能
2015-12-29 16:17:35     我来说两句
收藏   我要投稿

本文所属图书 > 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.2 强大的性能
下一篇:1.4 易维护的工作流
相关文章
图文推荐
排行
热门
最新书评
特别推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站