API Docs for: TWaver HTML5 5.7.5
Show:

twaver.Animate Class

动画对象

该类是用于实现各种动画效果。 在TWaver,可以使用new twaver.Animate({})构造一个动画,然后执行,动画的本质实际上是从一种状态(from),经过一定的时间(dur),变化到另外一种状态(to)。

其中

from:动画的起始值,这里为网元的起始位置{ x: 100, y: 100 } to:结束值,这里为网元的新位置{ x: 300, y: 200 } type:from和to的类型,point表示值是包含x和y属性的对象,或者包含两个number的数组 delay:延迟多少毫秒执行动画 dur:动画持续时间 easing:动画缓动类型,’easeNone’表示线性动画 onUpdate:动画期间执行的动作,其中参数为from到to的中间值

Constructor

twaver.Animate

(
  • animate
)
twaver.Animate

Parameters:

  • animate Object

    动画参数

Returns:

Example:

new twaver.Animate({ from: { x: 100, y: 100 }, to: { x: 300, y: 200 }, type: 'point', delay: 1000, dur: 1000, easing: 'easeNone', onUpdate: function (value) { node.setLocation(value.x, value.y); } }).chain(new twaver.Animate({ source: node, attr: 'location', to: { x: 100, y: 100 }, type: 'point', easing: 'bounceBoth' })).play();

Methods

twaver.Animate.chain

(
  • animate
)
twaver.Animate

将参数指定的动画链接到当前动画上,当前动画执行完毕后,会立即执行参数指定的动画,此方法返回当前动画对象。

Parameters:

Returns:

twaver.Animate:

返回动画本身

Example:

new twaver.Animate({ from: { x: 100, y: 100 }, to: { x: 300, y: 200 }, type: 'point', delay: 1000, dur: 1000, easing: 'easeNone', onUpdate: function (value) { node.setLocation(value.x, value.y); } }).chain(new twaver.Animate({ source: node, attr: 'location', to: { x: 100, y: 100 }, type: 'point', easing: 'bounceBoth' })).play();

twaver.Animate.clone

() twaver.Alarm

Returns:

twaver.Animate.getClassName

() String

Returns:

String:

twaver.Animate.isPaused

() Boolean

判断动画是否是暂停状态

Returns:

Boolean:

动画的状态

twaver.Animate.pause

()

动画执行后,可以用此方法暂停动画,等同于twaver.Util.pauseAnimate(animate)。

twaver.Animate.percent

(
  • percent
)
twaver.Animate

返回动画的进程,即value的值。

Parameters:

  • percent Number

Returns:

twaver.Animate.play

() twaver.Animate

通过new twaver.Animate({})构造动画后,动画不会立即执行,可以等需要动画执行时,运行twaver.Animate.prototype.play()或者twaver.Util.playAnimate(animate)语句来执行动画。

Returns:

twaver.Animate:

返回动画本身

twaver.Animate.resume

()

动画暂停后,可以用此方法恢复动画执行,等同于twaver.Util.resumeAnimate(animate)。

twaver.Animate.speed

(
  • speed
)
twaver.Animate

控制动画的速度

Parameters:

  • speed Number

Returns:

Example:

animate.speed(0.1);

twaver.Animate.stop

(
  • end
)
twaver.Animate

停止动画,end参数控制是否执行到结束状态,也即是否用to值运行onUpdate函数,默认值为true。 如果为end为true,动画会立即执行到结束状态;如果为false,动画会在当前状态停止。

Parameters:

  • end String

Returns: