扫一扫分享
sprite.js 是跨平台的2D绘图对象模型库,它能够支持web、node、桌面应用和微信小程序的图形绘制和实现各种动画效果。sprite.js基于 canvas 快速绘制结构化 UI、动画和交互效果,并发布到任何拥有canvas环境的平台上(比如浏览器、小程序和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
// 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;
// 预加载
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来取到图片
手机预览