奇舞团出品-spritejs入门

简介

sprite.js 是跨平台的2D绘图对象模型库，它能够支持web、node、桌面应用和微信小程序的图形绘制和实现各种动画效果。

快速开始

一个应用可以有多个场景，每个场景可以有多个图层，每个图层上可以有多个元素

// 导出你要用到的对象
const { Scene, Sprite, Label } = window.spritejs;
// 初始化场景scene，它不是canvas，只是一个用来包裹canvas的div元素
this.scene = new Scene('#myCanvas', {
  viewport: ['auto', 'auto'],
  resolution: [750, 1008],
  stickMode: 'top'
});
// 创建背景图层layer，这个就是真正意义上的canvas了
this.bglayer = this.scene.layer('bg'); // bg 只是图层的别名，可以理解为canvas的id
复制代码

下面以精灵Sprite为例

// 1.创建Sprite
const s = new Sprite('http://xxx.com/a.png');
// 2.设置属性，精灵的属性等同于css3的样式，很好理解
s.attr({
  anchor: [0.5, 0.5], // 锚点，你可以理解为css3中的transform-origin
  pos: [0, 0], // 位置，最大为 750 * 1008 也就是场景的大小
  size: [100, 100], // 大小，默认为图片的宽高
  scale: [0.9, 0.9] // 缩放，默认 1 1
});
// 3.添加到图层
this.bglayer.append(s);
// 4.创建动画
s.animate([
  { x: 100, y: 100 }, // 先运动到 100，100 位置
  { scale: [0.2, 0.2] } // 再缩小到 0.2 0.2
], {
  duration: 2000, // 时间2s
  delay: 1000, // 延时1s后执行
  fill: 'both' // 保留在最后状态
})
复制代码

如何创建连续的过程动画？

// 先移动到 100，100
await s.animate([
  { x: 100, y: 100 }
], {
  duration: 1000,
  fill: 'both'
}).finished;
// 停顿2s后，缩小到 0.2 0.2
await s.animate([
  { scale: [0.2, 0.2] }
], {
  duration: 1000,
  delay: 2000,
  fill: 'both'
}).finished;
复制代码

预加载

大家都知道，如果在canvas中直接使用网络图片，会因无法读取到图片大小而绘制失败。一般会先进行预加载，spritejs帮我们封装了预加载方法。

// 预加载
await this.scenne.preload(
  { id: 'bg', src: 'http://xxx.com/bg.png' },
  { id: 's', src: 'http://xxx.com/s.jpeg' },
)
// 使用
const s = new Sprite('s'); // 这个时候可以使用id来取到图片
复制代码

总结

• 像操作DOM对象一样操作画布上的图形元素
• 通过智能缓存大大提升渲染性能
• 支持多图层处理图形、文本、图像渲染
• 支持DOM事件代理、自定义事件派发
• 使用ES6+语法和面向对象编程
• 结构化对象树，对d3引擎友好，能够无缝使用
• 支持服务器端渲染和小程序

spritejs算是一个新秀，它在api方面高度吻合css3，降低了开发者的理解成本。本次分享没有涉及到事件，毕竟在动画上也用不到事件。体验下来，在动画上看来还不错，至于能否进行更深入的游戏开发，期待···