使用 Dojo 动画效果

核心提示： dojo.animateProperty 函数提供了同时对多个属性值进行迭代的能力，如下面的例子实现了同时对 width、height 和 padding-top 进行迭代，使用 Dojo 动画效果(5)，注意连字符“-”不能作为 hash 的键名，所以采用 paddin

dojo.animateProperty 函数提供了同时对多个属性值进行迭代的能力，如下面的例子实现了同时对 width、height 和 padding-top 进行迭代。注意连字符“-”不能作为 hash 的键名，所以采用 paddingTop 代替 padding-top。

清单 6.多个属性的动画效果

　dojo.animateProperty({　
　node:　“foo”,　
　duration:2000,　
　　properties:　{　
　　　　width:　{　start:　'200',　end:　'400',　unit:"px"　},　
　　　　height:　{　start:'200',　end:　'400',　unit:"px"　},　
　　　　paddingTop:　{　start:'5',　end:'50',　unit:"px"　}　
　　}　
　}).play();　

dojo._Animation 对象

dojo.animateProperty 函数返回的是 dojo._Animation 对象，通过调用该对象方法我们可以自由控制动画播放的行为以及查询播放状态。

play (delay, gotoStart)：播放动画，delay：整型，指定延迟播放的时间，缺省为 0. gotoStart： 布尔值，为真则从头开始播放动画，否则从当前位置开始播放。缺省为 false。

pause()：暂停播放。

gotoPercent (percent, andPlay)：设置动画的当前位置，percent 指定当前位置在总长度中的百分比，andPlay：布尔值，为真的时候在设置位置之后接着播放动画。

stop(gotoEnd)：停止播放，gotoEnd：布尔值，为真时会将当前位置设置为 1%。

status()：返回动画对象的当前状态，取值范围为"paused"，"playing"和"stopped"。

处理动画事件

在动画播放的过程中，我们可能需要对一些事件进行处理，如在动画开始之前做一些初始化工作，动画暂停时显示继续播放按钮，在动画结束后跳转到其他页面等。 Dojo 动画提供了事件处理扩展机制，我们可以指定要处理事件的回调函数，事件触发后会调用对应的回调函数。目前可以使用的事件有："beforeBegin", "onBegin", "onPlay", "onAnimate", "onPause"和"onStop"。