Class: Action

Tiny. Action

动作类

Action是对Tween.js做的一层封装,你可以很方便的制作动画;你也可以通过new Tiny.TWEEN.Tween(..)来直接使用Tween.js原生方法

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);
};

暂停动画

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

继续暂停的动画

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

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

设置 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);

停止动画

Version:
  • 1.0.2
Example
var action = Tiny.MoveTo(1000, Tiny.point(100, 200));
action.stop();
Documentation generated by JSDoc 3.4.3 on Mon Dec 03 2018 17:48:51 GMT+0800 (CST)