spriteJs 初尝试
简介
spriteJs 是一款由 360 奇舞团开源的跨终端 canvas 绘图框架,可以基于 canvas 快速绘制结构化 UI、动画和交互效果,是跨平台的2D绘图对象模型库,它能够支持web、node、桌面应用和微信小程序的图形绘制和实现各种动画效果。
canvas本身的api不就挺好用的吗,为什么要用 spriteJs 呢?后来做了下对比,有兴趣的小伙伴可以看一下这里:https://www.v2ex.com/t/464279 把为什么使用它介绍的挺详细的
官方文档:http://spritejs.org/#/zh-cn/index
github:https://github.com/spritejs/spritejs
特性(来自官方文档)
可以像操作dom一样操作画布上的图形元素(前端小伙伴的福音啊)
通过智能缓存大大提升渲染性能
支持多图层处理图形、文本、图像渲染
支持DOM事件代理、自定义事件派发
使用ES6+语法和面向对象编程
结构化对象树,对d3引擎友好,能够无缝使用
支持服务端渲染
支持微信小程序
支持Vue
支持React
废话不多说,下面就用 spriteJs 来做一个简单的动画demo,先奉上效果,我称其为"机器人下蛋"(机器人来之 spriteJs 官方):
spriteJs canvas
demo
demo效果:https://liuxiaochaogit.github.io/demo/spriteJs/index.html
源码:https://github.com/liuxiaochaoGit/demo/tree/master/spriteJs
安装 spriteJs,因为是demo,我这直接引入的CDN:
<script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
首先我们引入场景 Scene,利用它来管理Layer,派发事件,实现屏幕适配,具体的文档可以看这里,很详细:http://spritejs.org/#/zh-cn/doc/scene
const {
Scene} = spritejs;
// container 是容器
const scene = new Scene('#container')
然后引入Sprite,你可以将其理解为一个最基础的dom元素,有四种类型:分别是Sprite、Label、Path和Group,不多介绍,可以直接怼文档:http://spritejs.org/#/zh-cn/doc/sprite
const {
Scene, Sprite} = spritejs;
// 创建layer对象,一个layer对应一个canvas
const layer = scene.layer();
// 引入图片,可以是相对路径,也可以是绝对路径,也可以是cdn
const bg = new Sprite('./img/bg.png');
// 初始化设置
bg.attr({
anchor: [0, 0],
x: 0,
y: 0,
// size: [1000, 600]
});
// 将图片添加到layer(canvas)
layer.append(bg);
是不是很熟悉的api,像attr,append这些跟jquery里面的方法很像,这不就是jquery么?
现在一个简单的背景图片已经被添加到layer(canvas)上了