JavaScript语言与Ajax应用第08章 利用JavaScript实现动画效果.ppt

JavaScript语言与Ajax应用（第二版）,主编董宁陈丹中国水利水电出版社,第8章利用JavaScript实现动画效果,8.1动画效果的用途8.2构建动画对象8.3扩展动画对象8.4利用JavaScript库实现动画效果,2020年5月4日星期一,JavaScript语言与Ajax应用（第二版）,2,8.1动画效果的用途,在Web应用页面设计中，动画效果有时候会被认为华而不实，尤其是在被滥用的时候。但恰如其分的动画效果对页面设计是很有帮助的，而且动画效果还被用来提示用户页面上发生的事件。在传统的Web应用页面设计中，用户在页面上执行的操作都是有反馈的。单击一个提交按钮或单击一个链接，浏览器都会给出正在提交或正在跳转的提示，直到页面加载完毕。但是在引入Ajax技术之后，页面就可能在不刷新的情况从Web服务器获取数据，这时候就需要一种方式告诉用户执行了什么动作，或者正在执行什么动作。,2020年5月4日星期一,JavaScript语言与Ajax应用（第二版）,3,8.1动画效果的用途,提示性的动画效果告诉用户，当前页面还在听话的运行着，没有出现任何的错误。动画效果还适合用来展示或隐藏信息。如果只是简单的改变一些页面元素的可见性，用户很可能会忽略页面上发生的情况。如果在改变页面元素可见性的同时给元素加上动画效果，用户这马上能发现页面的改变，并且把自己的操作和这些改变联系起来。适当的动画效果还可以改善用户的浏览体验,2020年5月4日星期一,JavaScript语言与Ajax应用（第二版）,4,8.2构建动画对象,8.2.1回调8.2.2动画队列,2020年5月4日星期一,JavaScript语言与Ajax应用（第二版）,5,8.2.1回调,对于动画效果，我们需要关注3个时刻：动画效果开始：此时可以执行一些与动画效果开始相关的任务，比如在此时改变某个图片的显示。动画效果的每一步：此时可以执行代码跟踪动画效果相关元素的状态，也可以检测动画效果元素之间是否有交错。动画结束：此时可以执行一些元素操作或开始Ajax调用之类的代码。,2020年5月4日星期一,JavaScript语言与Ajax应用（第二版）,6,8.2.2动画队列,动画队列也就是按顺序执行的一组动画效果。,2020年5月4日星期一,JavaScript语言与Ajax应用（第二版）,7,8.3扩展动画对象,在Effect动画效果对象的基础上，我们可以针对不同的页面效果要求扩展出对应的动画效果类。接下来我们来创建一个新闻列表页面，页面上的内容按照新闻标题内容新闻标题内容的顺序依次排列下来。,2020年5月4日星期一,JavaScript语言与Ajax应用（第二版）,8,8.4利用JavaScript库实现动画效果,8.4.1jQuery8.4.2ExtJS,2020年5月4日星期一,JavaScript语言与Ajax应用（第二版）,9,8.4.1jQuery,jQuery是一个极其精简并且高效的库，我们可以使用它来快速完成许多动画效果。jQuery库提供的方法链非常适合用来快速添加动画效果，把任何一个获取到的DOM元素交给动画效果对象就可以了。,2020年5月4日星期一,JavaScript语言与Ajax应用（第二版）,10,8.4.2ExtJS,ExtJS是一套完整的界面部件库，它提供了构建富客户端Web应用程序所需要的全部功能。同时ExtJS库也提供了Ext.Fx对象，专门用于实现各种动画效果。同jQuery库一样ExtJS库也适合用来快速添加动画效果，把任何一个获取到的DOM元素交给动画效果对象就可以了。,2020年5月4日星期一,JavaScript语言与Ajax应用（第二版）,11,本章小结,本章主要说明了如何利用JavaScript实现页面上的动画效果，并且重点介绍了JavaScript动画对象的构建过程。通过本章，希望读者能够了解利用JavaScript实现页面动画的原理，并能够在Web应用开发中自己构建JavaScript对象来实现所需的动画效果。本章最后重点讲解了两个典型的JavaScript库jQuery与ExtJS在动画效果的实现上提供的便捷方法。在对jQuery与ExtJS库动画效果的举例说明中只涉及到了常用的一