Bling

# 简单使用

你可以像这样创建一个动画：

// 创建一个引擎，用于帧调度（一个 Page 只需创建并共用一个）
const engine = Bling.Engine.getInstance();
// 新建 action，时长是2000ms，旋转360度
const action = Bling.RotateTo(2000, Bling.rotation(360));
// 启动引擎
engine.start();
// 执行 action 并 repeat forever（此处 ref 是小程序自定义组件，使用 ref 获取的组件实例）
ref.runAction(Bling.RepeatForever(action));

使用 MoveTo 可以让显示对象从当前位置移动到指定的位置，下面的代码会让显示对象在 1000ms 内移动到 x=100rpx，y=100rpx 的位置：

Bling.MoveTo(1000, Bling.point(100, 100));

Tips

  • Bling.point 是一个静态方法，用于快速创建一个坐标对象，Bling.point(100, 100) 相当于 { x: 100, y: 100 }；
  • Bling.scale 也是一个静态方法，用于快速创建一个缩放值，Bling.scale(0.5, 0.5) 相当于 { scaleX: 0.5, scaleY: 0.5 }；
  • Bling.rotation 也是一个静态方法，用于快速创建一个旋转值，Bling.rotation(45) 相当于 { rotate: 45, rotateX: 0, rotateY: 0 }
  • 如果两个入参一样，可以直接传一个，如：Bling.point(100) 和 Bling.point(100, 100) 一样，Bling.scale(0.5) 和 Bling.scale(0.5, 0.5) 一样

# 批量执行

runAction 可以接收多个 Action，让多个动画同时运行：

ref.runAction(action1, action2, ...);

注意

  • 显示对象同时执行多个动画可能会有冲突，以实际展现效果为准

# 顺序执行

那么，如何让多个动画按顺序执行呢？使用 Bling 组件的 runSequenceAction 方法：

const moveToAction = Bling.MoveTo(1500, Bling.point(100, 150));
const rotateTo360Action = Bling.RotateTo(2000, Bling.rotation(360));
ref.runSequenceAction(moveToAction, rotateTo360Action);

运行上面的代码，显示对象就会先向右下移动，然后旋转360度。

# 手动移除

追求极致的你，一定希望节约每一块内存空间，所以，在需要的时候，你可以使用 Action 的静态方法 cleanup 移除对象上的所有 Action：

Bling.Action.cleanup(ref);

# 自动移除

每一个 Bling 组件（显示对象）在 卸载（didUnmount） 时都会自动清除其所有的 actions。

← 重复 →