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
.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")