Tween 组件

Events

TweenEnd [property = {String}]
当补间动画完成时触发

组件通过随时间改变2D属性值来生成动画。

方法

Back to top

.cancelTween()

public this .cancelTween(String target)
target

要取消的属性

public this .cancelTween(Object target)
target

包含要取消的属性的对象。

停止补间指定的属性或属性集。传递启动补间的对象是第二个方法的典型用法。

Back to top

.pauseTweens()

public this .pauseTweens()

停止实体关联的所有补间动画

Back to top

.resumeTweens()

public this .resumeTweens()

恢复实体关联的所有补间动画。

Back to top

.tween()

public this .tween(Object properties, Number duration[, String|function easingFn])
properties

对象的数字属性集和它们动画结果的最终值

duration

属性动画花费的时间，用毫秒表示

easingFn

一个用于指定过渡动画的字符串或者自定义函数。(默认为线性动画) 更多信息，参见 Crafty.easing。

此方法将在指定的时间段对数字属性进行动画。这些包括 x, y, w, h, alpha 和 rotation.

传递的对象应该具有作为键的属性，并且值应该是属性的结果值。如果稍后调用对相同属性进行补间动画，则传递的对象可能会被修改。

例子

花费200毫秒移动对象到 100,100 并且 淡出。

Crafty.e("2D, Tween")
   .attr({alpha: 1.0, x: 0, y: 0})
   .tween({alpha: 0.0, x: 100, y: 100}, 200)

例子

旋转一个对象2秒，使用 "smootherStep" 过渡函数。

Crafty.e("2D, Tween")
   .attr({rotation:0})
   .tween({rotation:180}, 2000, "smootherStep")