Class: Action

Extends

• EventEmitter

Members

durationnumber

动画持续时间（ms）

注意：无论帧频是多少，都会在这个时间内完成动画

Default Value:

• 400

toobject number

动画需要达到的目标形态的属性

Methods

staticBling.Action.cleanup(ref)

bling/Action.js, line 132

清除某对象上的所有 Action

Name	Type	Description
ref	BlingComponent	要清除动作的对象

Example

const action = new Bling.MoveTo(10000, Bling.point(500));
ref.runAction(action);

onTap() {
  // 执行后，对象停下来了
  Bling.Action.cleanup(ref);
};

staticBling.Action.clone(action) ❯ {Bling.Action}

bling/Action.js, line 154

克隆某个 Action
如果要让某个 Action 被多个对象使用，请使用 clone 方法以避免因为东西的初始状态不一导致的动画冲突

Name	Type	Description
action	Bling.Action	要克隆的 action

Returns:

Type	Description
Bling.Action	克隆后的 action

Example

const action = Bling.MoveBy(1000, Bling.point(10));
ref.runAction(action);
ref.runAction(Bling.Action.clone(action));

getDelay() ❯ {number}

bling/Action.js, line 338

获取延迟值

Returns:

Type	Description
number

getEasing() ❯ {Bling.TWEEN.Easing}

bling/Action.js, line 286

获取缓冲动画

Returns:

Type	Description
Bling.TWEEN.Easing

getInterpolation() ❯ {Bling.TWEEN.Interpolation}

bling/Action.js, line 315

获取插值

Returns:

Type	Description
Bling.TWEEN.Interpolation

getName() ❯ {string}

bling/Action.js, line 249

Returns:

Type	Description
string

isPlaying() ❯ {boolean}

bling/Action.js, line 365

是否运动中

const action = Bling.MoveBy(1000, Bling.point(100, 200));
if (action.isPlaying()){
console.log('action is playing');
}

Returns:

Type	Description
boolean

pause()

bling/Action.js, line 400

暂停动画

Example

const action = Bling.MoveTo(1000, Bling.point(100, 200));
ref.runAction(Bling.RepeatForever(Bling.Back(action)));
// 绑定事件
onTap() {
 if (action.isPlaying()) {
   action.pause();
 } else {
   action.resume();
 }
}

resume()

bling/Action.js, line 408

继续暂停的动画

setDelay(delay)

bling/Action.js, line 328

设置延迟

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

Default Value:

• 0

Example

const action = Bling.MoveTo(500, Bling.point(200));
action.setDelay(3000);

setEasing(easing)

bling/Action.js, line 277

设置动画缓冲

内置的缓冲效果如下表：

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	Bling.TWEEN.Easing	缓存类型，值见上表

Default Value:

• Bling.TWEEN.Easing.Linear.None

Example

action.setEasing(Bling.TWEEN.Easing.Quartic.InOut);

setInterpolation(interpolation)

bling/Action.js, line 306

设置插值

内置的插值效果如下表：

Linear	Bezier	CatmullRom
start===end	start===end	start===end

Name	Type	Description
interpolation	Bling.TWEEN.Interpolation	插值类型，值见上表

Default Value:

• Bling.TWEEN.Interpolation.Linear

Example

action.setInterpolation(Bling.TWEEN.Interpolation.Bezier);

setName(name)

bling/Action.js, line 242

设置 action 的 name 值

Name	Type	Description
name	string	要设置的 name 值

Example

action.setName = 'MOVE_POISITION';

setRepeatDelay(delay)

bling/Action.js, line 351

设置重复延迟

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

Default Value:

• 0

Example

const action = Bling.MoveBy(1000, Bling.point(100, 200));
action.setRepeatDelay(3000);

stop()

bling/Action.js, line 380

停止动画

Example

const action = Bling.MoveTo(1000, Bling.point(100, 200));
action.stop();

Events

allComplete

bling/Action.js, line 89

Bling.Action 实例在 Bling.Repeat 在所有循环完成后触发
备注：Bling.RepeatForever 永远不会触发

Name	Type	Description
event	String | Symbol

Example

action.on('allComplete', () => {
  console.log('allComplete');
});

complete

bling/Action.js, line 51

Bling.Action 实例在完成动作后触发

Name	Type	Description
event	String | Symbol

Example

const moveToAction = Bling.MoveTo(1500, Bling.point(200));
const scaleToAction = Bling.ScaleTo(500, Bling.scale(2));

moveToAction.on('complete', () => {
  this.antBlingRef.runAction(Bling.FadeOut());
  this.einsteinBlingRef.runSequenceAction(Bling.FadeIn(), scaleToAction);
});
this.einsteinBlingRef.setOpacity(0);
this.einsteinBlingRef.setPosition(200);
this.antBlingRef.runAction(moveToAction);

eachComplete

bling/Action.js, line 75

Bling.Action 实例在 Bling.Repeat 每次循环后触发

Name	Type	Description
event	String | Symbol

Example

const action = Bling.MoveBy(1000, Bling.point(10, 20));

action.on('eachComplete', ({ count }) => {
  console.log('eachComplete', count);
});
this.blingRef.runAction(Bling.Repeat(3, action));

start

bling/Action.js, line 30

Bling.Action 实例在开始时触发

Name	Type	Description
event	String | Symbol

stop

bling/Action.js, line 69

Bling.Action 实例在停止时触发

Name	Type	Description
event	String | Symbol

update

bling/Action.js, line 36

Bling.Action 实例在每次变化后触发

Name	Type	Description
event	String | Symbol

Example

const scaleToAction = Bling.ScaleTo(500, Bling.scale(2));

scaleToAction.on('update', ({ scaleX, scaleY }) => {
  console.log('update:', 'scaleX:', scaleX, 'scaleY:', scaleY);
});
this.BlingRef.runAction(scaleToAction);