JavaScript语言与Ajax应用（第二版）课件第08章 利用JavaScript实现动画效果

8.1动画效果的用途提示性的动画效果告诉用户，当前页面还在听话的运行着，没有出现任何的错误。动画效果还适合用来展示或隐藏信息。如果只是简单的改变一些页面元素的可见性，用户很可能会忽略页面上发生的情况。如果在改变页面元素可见性的同时给元素加上动画效果，用户这马上能发现页面的改变，并且把自己的操作和这些改变联系起来。适当的动画效果还可以改善用户的浏览体验25十二月2023JavaScript语言与Ajax应用（第二版）18.2构建动画对象8.2.1回调8.2.2动画队列25十二月2023JavaScript语言与Ajax应用（第二版）28.2.1回调对于动画效果，我们需要关注3个时刻：动画效果开始：此时可以执行一些与动画效果开始相关的任务，比如在此时改变某个图片的显示。动画效果的每一步：此时可以执行代码跟踪动画效果相关元素的状态，也可以检测动画效果元素之间是否有交错。动画结束：此时可以执行一些元素操作或开始Ajax调用之类的代码。25十二月2023JavaScript语言与Ajax应用（第二版）38.2.2动画队列动画队列也就是按顺序执行的一组动画效果。25十二月2023JavaScript语言与Ajax应用（第二版）48.3扩展动画对象在Effect动画效果对象的基础上，我们可以针对不同的页面效果要求扩展出对应的动画效果类。接下来我们来创建一个新闻列表页面，页面上的内容按照新闻标题→内容→新闻标题→内容的顺序依次排列下来。25十二月2023JavaScript语言与Ajax应用（第二版）58.4利用JavaScript库实现动画效果8.4.1jQuery8.4.2ExtJS25十二月2023JavaScript语言与Ajax应用（第二版）68.4.1jQueryjQuery是一个极其精简并且高效的库，我们可以使用它来快速完成许多动画效果。jQuery库提供的方法链非常适合用来快速添加动画效果，把任何一个获取到的DOM元素交给动画效果对象就可以了。25十二月2023JavaScript语言与Ajax应用（第二版）78.4.2ExtJSExtJS是一套完整的界面部件库，它提供了构建富客户端Web应用程序所需要的全部功能。同时ExtJS库也提供了Ext.Fx对象，专门用于实现各种动画效果。同jQuery库一样ExtJS库也适合用来快速添加动画效果，把任何一个获取到的DOM元素交给动画效果对象就可以了。25十二月2023JavaScript语言与Ajax应用（第二版）8

本章小结本章主要说明了如何利用JavaScript实现页面上的动画效果，并且重点介绍了JavaScript动画对象的构建过程。通过本章，希望读者能够了解利用JavaScript实现页面动画的原理，并能够在Web应用开发中自己构建JavaScript对象来实现所需的动画效果。本章最后重点讲解了两个典型的JavaScript库jQuery与ExtJS在动画效果的实现上提供的便捷方法。在对jQuery与ExtJS库动画效果的举例说明中只涉及到了常用的一些函数与对象。如果需要全面了解jQuery