sprite.js 介绍
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
下面以精灵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] }
],
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引擎友好，能够无缝使用
支持 服务器端渲染和 小程序
网站地址 : http://spritejs.org
GitHub: https://github.com/spritejs/spritejs
网站描述: 由360奇舞团开源的跨终端 canvas 绘图框架
sprite.js官方网站
官方网站： http://spritejs.org
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。