Animation - 人人网开放平台Wiki

[编辑] 功能描述

XNJS提供的Animation对象，供app开发者使用JavaScript完成各种CSS动画特效。

[编辑] Animation API

Animation对象提供了一系列函数可供调用，如下列出。

函数	参数描述	返回值	函数描述
Animation(Element obj)	obj是要绑定的一个XNJS Dom对象。	返回一个新创建的Animation对象。	创建一个Animation对象，绑定obj对象。任何一次动画播放都以此调用开始。
go()	无参数。	返回当前Animation对象。	开始播放动画。任何一次动画播放都以此调用结束。
stop()	无参数。	返回当前Animation对象。	停止播放动画。
from(String style,String value)	style表示要设置的CSS属性名，value是属性值。	返回当前Animation对象。	设置动画起始状态。如果与to配合使用，可以省略style参数，但要求先调用to再调用from。
to(String style,String value)	style表示要设置的CSS属性名，value是属性值。	返回当前Animation对象。	设置动画结束状态。如果与from配合使用，可以省略style参数，但要求先调用from再调用to。
by(String style,String value)	style表示要设置的CSS属性名，value是属性值。	返回当前Animation对象。	为style属性增加由value指定的值。
duration(Number duration)	参数duration表示动画播放持续时间。	返回当前Animation对象。	设置动画播放的持续时间。
hide()	无参数。	返回当前Animation对象。	隐藏绑定对象。
show()	无参数。	返回当前Animation对象。	显示绑定对象。
blind()	无参数。	返回当前Animation对象。	防止hide或show时文字滚动。
ondone(Function callback)	要注册的callback函数。	返回当前Animation对象。	注册一个callback函数，当动画完成后调用。
checkpoint(Number stagger, Function callback)	stagger是前后动画的交错参数，callback是要注册的回调函数。	返回当前Animation对象。	设置检查点，将前后两段动画割开，并可注册一个callback函数，当动画播放至检查点时调用。详细信息参见checkpoint。
ease(Function easing)	要设置的easing函数。	返回当前Animation对象。	设置easing函数，用来表示动画的渐变方式。详细信息参见ease。

[编辑] 示例

下面的例子改变链接的背景和文字颜色，耗时3秒。

<a href="#" onclick="Animation(this).to('background', '#ffff4b').from('#fff').to('color', '#ff0000')
.from('#000').duration(3000).go(); return false;">同时改变背景和文字颜色，过程花3秒时间</a>

更多详细的代码示例见XNJS Animation演示。

取自"http://dev.xiaonei.com/wiki/Animation"