sprite.js

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

小编说

以上是编程之家为你收集整理的sprite.js全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。