dojo1.7翻译 动态效果(Dojo Effects)
原文地址:http://dojotoolkit.org/documentation/tutorials/1.7/effects/
难度:低
版本:1.7
?
在这个教程中,我们将了解一些dojo所提供了一点动态的效果,让我们的页面能更生动活泼。
?
开始到目前为止,我们已经学会了如何管理和操作DOM节点,但做这些操作时,页面的表现会很生硬。如你删除一个节点,这个节点就实然的不见了,这可能会让用户疑惑。使用dojo提供的动态效果后会使一些操作的效果很平滑,能非常好的提高用户的交互性。
?
dojo有两个模块dojo/_base/fx和dojo/fx
?
dojo/_base/fx提供了一些基础的效果,如animateProperty,anim,fadeIn,fadeOutdojo/fx提供了更多更高级的效果,包括chain,combine,wipeIn,wipeOut和slideTo渐变有一个效果我们以前已经用过了,那就是带有渐变效果的显示和消失,这个效果很常用,所有这个效果被放置于dojo的基础模块中。下面是示例
?
?
?运行示例
?
动画效果通过上面的介绍你已经知道,动画方法将返回的是dojo.Animation对象,这个对象不仅仅提供开始,暂停的一些功能,也提供了如监听事件等功能。两个比较重要的事件是beforeBegin和onEnd
?
?
?就如你所看到的,你在 fx.chain 中创建了多个动画,这些个动画将在chain的play触发时会被一个一个的执行
运行示例
?
混合动画还有一种 dojo/fx 提供的一种方法,是 combine 方法。这个方法将会在同一时间同时执行多个动画。在执行时间最长的那个动画完成后将会触发 onEnd 事件,直接看示例
?
?
?在这个示例里,几个动画是同时执行的,是同时渐变和移动,不是先再渐变移动。通过混合动画你可以做出非常复杂和完成的效果。
运行示例
?
结论使用dojo的dojo/_base/fx和dojo/fx动画效果可以使你的页面非常的绚,你可以很轻松的创建一些简单的动画,也可以使用多种动画结合做出非常复杂的动画效果。
但是如果你想要做很精细和复杂的效果,你还要去了解dojo.animateProperty