第08章-利用JavaScript实现动画效果.ppt

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