Namespace: BlingComponent

{
  "usingComponents": {
    "bling": "@alipay/bling-component/bling"
  }
}

<bling
  className="bling"
  ref="BlingRef"
>
  <image src="https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/ants/ant.png" />
</bling>

Page({
  BlingRef(ref) {
    this.blingRef = ref;
  },
  onReady() {
    const engine = Bling.Engine.getInstance();
    const action = Bling.MoveTo(3000, Bling.point(120, 240));

    engine.start();
    this.blingRef.setPosition(200, 50);
    this.blingRef.runAction(action);
  },
});

Methods

staticBlingComponent.getAnchor() ❯ {object}

bling/index.js, line 142

Returns:

Type	Description
object

staticBlingComponent.getOpacity() ❯ {number}

bling/index.js, line 117

Returns:

Type	Description
number

staticBlingComponent.getPosition() ❯ {Bling.point}

bling/index.js, line 71

Returns:

Type	Description
Bling.point

staticBlingComponent.getRotation() ❯ {Bling.rotation}

bling/index.js, line 105

Returns:

Type	Description
Bling.rotation

staticBlingComponent.getScale() ❯ {Bling.scale}

bling/index.js, line 91

Returns:

Type	Description
Bling.scale

staticBlingComponent.getVisible() ❯ {boolean}

bling/index.js, line 129

Returns:

Type	Description
boolean

staticBlingComponent.hide()

bling/index.js, line 60

staticBlingComponent.runAction(actions)

bling/index.js, line 148

让 action 们动起来吧

Tips: 多组action同时：runAction([action1, action2], action3)

Name	Type	Description
actions	array.<Bling.Action> | Bling.Action	action 数组或参数序列

Example

const action = Bling.MoveBy(1000, Bling.point(100, 100));
ref.runAction(action);
// ref 对象会在舞台的(0, 0)位置和(100, 100)位置做一次移动

staticBlingComponent.runSequenceAction(actions)

bling/index.js, line 163

有顺序的让 action 们动起来吧

Tips: runSequenceAction(action1, action2)

Name	Type	Description
actions	array.<Bling.Action> | Bling.Action	action 数组或参数序列

Example

const action1 = Bling.MoveTo(1000, Bling.point(100, 100));
const action2 = Bling.ScaleBy(1200, Bling.scale(0.25, 2));
const action3 = Bling.RotateTo(2000, Bling.rotation(135));
ref.runSequenceAction(action1, action2, action3);
// ref 对象先在 1000ms 内从坐标(0, 0)移动到(100, 100)，然后在 1200ms 内横向缩小0.25倍，纵向拉伸2倍，最后在 2000ms 内顺时针旋转 135 度

staticBlingComponent.setAnchor(x, y)

bling/index.js, line 135

Name	Type	Description
x	number
y	number	optional

staticBlingComponent.setOpacity(opacity)

bling/index.js, line 111

Name	Type	Description
opacity	number

staticBlingComponent.setPosition(x, y)

bling/index.js, line 77

Name	Type	Description
x	number | string
y	number | string	optional

staticBlingComponent.setRotation(rotate, rotateX, rotatey)

bling/index.js, line 97

Name	Type	Default	Description
rotate	number
rotateX	number	0	optional
rotatey	number	0	optional

staticBlingComponent.setScale(scaleX, scaleY)

bling/index.js, line 84

Name	Type	Description
scaleX	number
scaleY	number	optional

staticBlingComponent.setVisible(visible)

bling/index.js, line 123

Name	Type	Description
visible	boolean

staticBlingComponent.show()

bling/index.js, line 55