首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

dojo1.7通译 动态效果(Dojo Effects)

2012-10-24 
dojo1.7翻译动态效果(Dojo Effects)原文地址:http://dojotoolkit.org/documentation/tutorials/1.7/effect

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

热点排行