Class: Action

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)

tiny/actions/Action.js, line 477

清除某对象上的所有 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}

tiny/actions/Action.js, line 506

克隆某个 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}

tiny/actions/Action.js, line 402

是否运动中

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)

tiny/actions/Action.js, line 229

动画完成的回调

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)

tiny/actions/Action.js, line 191

动画开始时的回调

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)

tiny/actions/Action.js, line 239

动画停止的回调

Name	Type	Description
tween	Tiny.TWEEN.Tween
object	object

onUpdate(tween, object)

tiny/actions/Action.js, line 210

动画更新时的回调

注意：如果使用 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()

tiny/actions/Action.js, line 443

暂停动画

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()

tiny/actions/Action.js, line 452

继续暂停的动画

Version:

• 1.1.0

setDelay(delay)

tiny/actions/Action.js, line 373

设置延迟

Name	Type	Description
delay	number	延迟时长（ms）

Default Value:

• 0

Example

var action = Tiny.MoveTo(500, Tiny.point(200));
action.setDelay(3000);

setEasing(easing)

tiny/actions/Action.js, line 334

设置动画缓冲

内置的缓冲效果如下表：

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)

tiny/actions/Action.js, line 301

设置此 Action 执行时的帧率，结束后自动恢复到默认帧率
用于动态调帧

Name	Type	Default	Description
fps	number	60	帧率（取值：10/20/30/40/50/60）

Version:

• 1.3.0

Default Value:

• 60

setInterpolation(interpolation)

tiny/actions/Action.js, line 359

设置插值

内置的插值效果如下表：

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)

tiny/actions/Action.js, line 175

设置 action 的 name 值

Name	Type	Description
name	string	要设置的 name 值

Example

var action = new Tiny.Action(200, {x: 100});
action.setName = 'MOVE_POISITION';

setRepeatDelay(delay)

tiny/actions/Action.js, line 387

设置重复延迟

Name	Type	Description
delay	number	延迟时长（ms）

Default Value:

• 0

Example

var action = Tiny.MoveBy(1000, Tiny.point(100, 200));
action.setRepeatDelay(3000);

stop()

tiny/actions/Action.js, line 419

停止动画

Version:

• 1.0.2

Example

var action = Tiny.MoveTo(1000, Tiny.point(100, 200));
action.stop();