帧动画

逐帧播放动画应该使用的很广泛，在 Bling 里，可以使用 Bling.MovieClip 类来创建帧动画。

假设我们有四个序列帧，如下：

index.axml

在 index.axml 中使用 <bling /> 组件：

<bling
  mode="movieclip"
  ref="BlingRef"
/>

app.js

App({
  onLaunch() {
    const { Bling } = $global;

    // 获取引擎单例并启动，用于帧调度（一个 App 只需创建并共用一个）
    Bling.Engine.getInstance().start();
  },
});

index.js

const { Bling } = $global;

Page({
  BlingRef(ref) {
    this.blingRef = ref;
  },
  onReady() {
    // 声明一个数组，用于存放序列帧图
    const images = [];

    for (let i = 0; i < 4; i++) {
      // 将帧图挨个添加到数组中
      images.push('https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/hao/hao' + i + '.png');
    }

    // 这个图片数组就是类初始化的入参
    const mc = new Bling.MovieClip(images);
    // 和 ref 绑定关系
    this.blingRef.bindMovieClip(mc);
    // 设置动画速度，值越大速度越快
    mc.setSpeed(0.08);
    // 立即播放
    mc.play();
  },
});

上面代码的预览效果如下：

静态创建

前面介绍了通过 Bling.MovieClip 类来创建帧动画，也可以通过它的静态方法 fromImages 来创建：

const mc = Bling.MovieClip.fromImages(images);

播放&暂停

调用 Bling.MovieClip 实例化对象的 play 方法，就会立即播放帧动画，也可以使用 gotoAndPlay 方法从某帧开始播放：

mc.play();

// 从第 0 帧开始播放
mc.gotoAndPlay(0);

可以使用 gotoAndPause 方法直接停止到某帧，再调用 play 可以从暂停帧继续播放：

// 直接到达第二帧，并暂停
mc.gotoAndPause(2);
// 从第二帧开始继续播放
mc.play();

停止就是 stop 方法，也可以使用 gotoAndStop 方法直接停止到某帧：

mc.stop();

// 直接到达第三帧，并停止
mc.gotoAndStop(3);

速度控制

使用实例化对象方法 setSpeed 可以控制动画的速度：

// 动画的速度是，值越大速度越快，这里的 1/60 相当于每秒一帧
mc.setSpeed(1 / 60);

// 这里的 1 相当于每秒 60 帧
mc.setSpeed(1);

反转

调用实例化对象的 reverse 方法就可以反转播放动画：

mc.reverse();

当前帧

调用实例化对象的 currentFrame 属性，就可以获取当前播放的帧：

console.log(mc.currentFrame);
//=> 7

监听帧变化

设置实例化对象的 onFrameChange 方法可以监听帧变化：

mc.onFrameChange = function () {
  console.log(new Date()).toLocaleTimeString());
};
//=> ..
//=> 下午8:32:12