使用 Dojo 动画效果

核心提示： dojo.fx.slideTo实现飞入的动画效果，通过迭代 DOM 节点的 left 和 top 值实现，使用 Dojo 动画效果(7)，使用方式如下：清单 10.飞入效果dojo.fx.slideTo({node:"foo",left:"40",top:

dojo.fx.slideTo

实现飞入的动画效果，通过迭代 DOM 节点的 left 和 top 值实现。使用方式如下：

清单 10.飞入效果

　dojo.fx.slideTo({　
　node:　"foo",　
　left:"40",　
　top:"50",　
　unit:"px"　
　}).play();　

dojo.fx.wipeIn/dojo.fx.wipeOut

wipeIn 实现将 DOM 节点从上往下展开显示的动画效果，wipeOut 实现将节点从下往上收缩直至隐藏的动画效果，通过迭代其高度属性值实现。其使用非常简单，只需设置持续时间即可。

清单 11.wipeIn 和 wipeOut 效果

　dojo.fx.wipeIn({　
　node:　"foo",　
　duration:　1000　
　}).play();　
　dojo.fx.wipeOut({　
　node:　"foo",　
　duration:　1000　
　}).play();　

组合动画效果

除了可以使用 dojo.animateProperty，以及基于 dojo.animateProperty 的标准动画效果创建动画外，Dojo 动画库还提供了组合这些动画效果的方式，能够以串行或并行的方式一次执行多个动画效果。dojo.fx.chain 用来将多个动画效果组合起来顺序执行，dojo.fx.combine 则同时执行多个动画效果，它们都接受一个动画对象数组作为参数。如下面的例子：

清单 12.组合动画效果

　dojo.fx.chain([　
　dojo.fx.wipeOut({　node:"foo"　}),　
　dojo.fx.wipeIn({　node:"foo1"　})　
　]).play();　
　dojo.fx.combine([　
　dojo.fx.wipeOut({　node:"foo"　}),　
　dojo.fx.wipeIn({　node:"foo1"　})　
　]).play();　

dojo.fx.Toggler

一个经常使用动画的场景是在 DOM 节点显示和隐藏，我们需要分别为显示和隐藏创建动画对象，保存它们的引用以便在需要的时候调用，如此一来我们需要为同一个 DOM 节点保存两个动画对象。使用 dojo.fx.Toggler 可以保存 DOM 节点的显示和隐藏动画，通过调用 show 或 hide 方法来调用动画效果，从而达到简化使用的目的。

清单 13.Toggler 的应用

　var　t　=　new　dojo.fx.Toggler({　
　　node:　"foo",　
　　showDuration:　1000,　
　hideDuration:　1000,　
　　showFunc:　dojo.fx.wipeIn,　
　　hideFunc:　dojo.fx.wipeOut　
　});　
　t.show(100);　
　t.hide();　

如上，node 指定 DOM 节点的 id，showDuration 和 hideDuration 分别指定显示和隐藏的持续时间，默认值均为 200. showFunc 和 hideFunc 分别指定显示和隐藏的动画效果对象，默认值分别为 dojo.fadeIn 和 dojo.fadeOut。然后就可以调用 show 和 hide 方法来显示和隐藏 DOM 节点。show 和 hide 方法也可以指定延迟时间。

小结

Dojo 动画效果库是通过动态改变 DOM 节点的样式属性来实现的，我们可以通过 dojo.animateProperty 来对 DOM 节点的一组属性值进行迭代来创建动画效果，也可以通过预定义的 fadeIn，fadeOut, wipeIn, wipOut, slideTo 等标准函数创建动画效果，还能够通过 dojo.fx.chain 或 dojo.fx.combine 组合多个动画效果来串行或并行执行。另外，可以使用 dojo.fx.Toggler 封装针对一个 DOM 节点的显示和隐藏动画，简化编程。