Tiny.js

帧动画

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

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

// 声明一个数组，用于存放序列帧图的纹理
var textures = [];
for (var i = 0; i < 4; i++) {
  // 将帧图挨个添加到纹理数组中
  textures.push(Tiny.Texture.fromImage('https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/hao/hao' + i + '.png'));
}

// 这个纹理数组就是类初始化的入参
var mc = new Tiny.AnimatedSprite(textures);
// 设置动画速度，值越大速度越快
mc.animationSpeed = 0.08;
// 立即播放
mc.play();

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

静态创建

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

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

另外，也可以通过 frame 来创建：

// 创建一个加载器
var loader = new Tiny.loaders.Loader();
loader
    // 添加 tileset 文件
  .add('https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/tiles/mole_tile.json')
    // 加载完成回调
  .load(function () {
    // 将 tileset 文件中定义的 frame 名放到数组 frames 中
    var frames = ['ali_mole.png', 'ali_mole_hit.png'];
    // 调用 Tiny.AnimatedSprite 的静态方法 fromImages 来创建帧动画，入参就是上面的 frames 数组
    var mc = Tiny.AnimatedSprite.fromImages(frames);
  });

播放&暂停

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

mc.play();

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

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

mc.stop();

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

速度控制

设置实例化对象的属性 animationSpeed 可以控制动画的速度：

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

// 这里的 1 相当于每秒 60 帧
mc.animationSpeed = 1;

反转

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

mc.reverse();

当前帧

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

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

监听帧变化

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

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

← 简单使用 →