new Tiny.Action(duration, to)
Name | Type | Description |
---|---|---|
duration |
number |
动作持续时间(ms) |
to |
object |
运动到的状态 |
Example
var action = new Tiny.Action(600, Tiny.point(100, 120));
action.yoyo = true;
//重复4次
action.repeatTimes = 4;
//延迟500ms开始
action.setDelay(500);
//设置动画缓冲为`Quadratic.InOut`
action.setEasing(Tiny.TWEEN.Easing.Quadratic.InOut);
//运动中更改精灵的坐标
action.onUpdate = function (tween, object) {
sprite.setPosition(tween.x, tween.y);
};
//运动完成后的回调
action.onComplete = function (tween, object) {
console.log('complete');
};
Members
-
durationnumber
-
动画持续时间(ms)
注意:无论帧频是多少,都会在这个时间内完成动画
-
repeatTimesnumber
-
重复次数
- Default Value:
- 1
-
toobject
-
动画需要达到的目标形态的属性
Methods
-
staticTiny.Action.cleanup(sprite)
-
清除某对象上的所有 Action
Name Type Description sprite
Tiny.DisplayObject 要清除动作的精灵对象
Example
var sprite = Tiny.Sprite.fromImage('https://gw.alipayobjects.com/zos/rmsportal/feRRHmdAYifYMyChbUbC.png'); var action = new Tiny.Action(10000, {x: 300}); action.onUpdate = function (tween, object) { sprite.setPositionX(tween.x); }; sprite.runAction(action); // 设置精灵可交互 sprite.setEventEnabled(true); sprite.on('pointerdown', function () { // 执行后,精灵停下来了 Tiny.Action.cleanup(sprite); });
-
staticTiny.Action.clone(action) ❯ {Tiny.Action}
-
克隆某个 Action
如果要让某个 Action 被多个精灵使用,请使用 clone 方法以避免因为精灵的初始状态不一导致的动画冲突Name Type Description action
Tiny.Action 要克隆的 action
- Version:
- 1.0.2
Returns:
Type Description Tiny.Action 克隆后的 action Examples
var action = Tiny.MoveBy(1000, Tiny.point(10)); sprite1.runAction(action); sprite2.runAction(Tiny.Action.clone(action)); sprite3.runAction(Tiny.Repeat(5, Tiny.Action.clone(action)));
var action1 = Tiny.ScaleTo(500, Tiny.scale(0.5)); var action2 = var action = Tiny.RotateBy(1000, {rotation: Tiny.deg2radian(-75)}); sprite1.runAction(action1); sprite2.runSequenceAction(Tiny.Action.clone(action1), action2);
-
isPlaying() ❯ {boolean}
-
是否运动中
var action = Tiny.MoveBy(1000, Tiny.point(100, 200));
if (action.isPlaying()){
console.log('action is playing');
}- Version:
- 1.0.2
Returns:
Type Description boolean -
onComplete(tween, object)
-
动画完成的回调
Name Type Description tween
Tiny.TWEEN.Tween object
object Example
var moveByAction = Tiny.MoveBy(1000, Tiny.point(2)); moveByAction.onComplete = function (tween, object) { console.log('completed!'); // 还原 MoveBy 行为,一般用在 Repeat/RepeatForever 的情况 this._onComplete.call(this, tween, object); }; sprite.runAction(Tiny.RepeatForever(moveByAction));
-
onStart(tween, object)
-
动画开始时的回调
Name Type Description tween
Tiny.TWEEN.Tween object
object Example
var action = new Tiny.Action(100, {scaleX: 2}); action.onStart = function(tween, object) { console.log('action started'); };
-
onStop(tween, object)
-
动画停止的回调
Name Type Description tween
Tiny.TWEEN.Tween object
object -
onUpdate(tween, object)
-
动画更新时的回调
注意:如果使用 Tiny 提供的静态 actions(eg: MoveBy, ScaleTo..) 同时又要使用
onUpdate
,需要调用_onUpdate
来还原原 action,也可以自己重写 action。Name Type Description tween
Tiny.TWEEN.Tween object
object Example
var moveByAction = Tiny.MoveBy(1000, Tiny.point(100, -200)); moveByAction.onUpdate = function (tween, object) { console.log('update'); // 还原 MoveBy 行为 this._onUpdate.call(this, tween, object); };
-
pause()
-
暂停动画
- Version:
- 1.0.2
Example
var sprite = Tiny.Sprite.fromImage('https://gw.alipayobjects.com/zos/rmsportal/feRRHmdAYifYMyChbUbC.png'); var action = Tiny.MoveTo(1000, Tiny.point(100, 200)); sprite.runAction(Tiny.RepeatForever(Tiny.Back(action))); // 设置精灵可交互 sprite.setEventEnabled(true); // 绑定事件 sprite.on('pointerdown', function () { if (action.isPlaying()) { action.pause(); } else { action.resume(); } });
-
resume()
-
继续暂停的动画
- Version:
- 1.1.0
-
setDelay(delay)
-
设置延迟
Name Type Description delay
number 延迟时长(ms)
- Default Value:
- 0
Example
var action = Tiny.MoveTo(500, Tiny.point(200)); action.setDelay(3000);
-
setEasing(easing)
-
设置动画缓冲
内置的缓冲效果如下表:
Linear.None Quadratic.In Quadratic.Out Quadratic.InOut Cubic.In Cubic.Out Cubic.InOut Quartic.In Quartic.Out Quartic.InOut Quintic.In Quintic.Out Quintic.InOut Sinusoidal.In Sinusoidal.Out Sinusoidal.InOut Exponential.In Exponential.Out Exponential.InOut Circular.In Circular.Out Circular.InOut Elastic.In Elastic.Out Elastic.InOut Back.In Back.Out Back.InOut Bounce.In Bounce.Out Bounce.InOut Name Type Description easing
Tiny.TWEEN.Easing 缓存类型,值见上表
- Default Value:
- Tiny.TWEEN.Easing.Linear.None
Example
var action = new Tiny.Action(150, {x: 100}); action.onUpdate = function (tween, object) { console.log(tween.x); }; action.setEasing(Tiny.TWEEN.Easing.Quartic.InOut);
-
setFPS(fps)
-
设置此 Action 执行时的帧率,结束后自动恢复到默认帧率
用于动态调帧Name Type Default Description fps
number 60 帧率(取值:10/20/30/40/50/60)
- Version:
- 1.3.0
- Default Value:
- 60
-
setInterpolation(interpolation)
-
设置插值
内置的插值效果如下表:
Linear Bezier CatmullRom start===end start===end start===end Name Type Description interpolation
Tiny.TWEEN.Interpolation 插值类型,值见上表
- Default Value:
- Tiny.TWEEN.Interpolation.Linear
Example
var action = new Tiny.Action(150, {x: 100}); action.onUpdate = function (tween, object) { console.log(tween.x); }; action.setInterpolation(Tiny.TWEEN.Interpolation.Bezier);
-
setName(name)
-
设置 action 的 name 值
Name Type Description name
string 要设置的 name 值
Example
var action = new Tiny.Action(200, {x: 100}); action.setName = 'MOVE_POISITION';
-
setRepeatDelay(delay)
-
设置重复延迟
Name Type Description delay
number 延迟时长(ms)
- Default Value:
- 0
Example
var action = Tiny.MoveBy(1000, Tiny.point(100, 200)); action.setRepeatDelay(3000);
-
stop()
-
停止动画
- Version:
- 1.0.2
Example
var action = Tiny.MoveTo(1000, Tiny.point(100, 200)); action.stop();