乐趣区

关于动画:用-SpriteJS-来开发高性能的-web-图形和动画系统


一款跨终端 canvas 绘图框架,canvas 做动画素来没有这么简略过。

SpriteJS 介绍

SpriteJS 是跨平台的高性能图形动画零碎,通过封装好的简略办法实现在 web、node、桌面利用和小程序上的图形绘制和各种晦涩的动画成果。由 360 公司的前端团队 360 奇舞团开发以及保护。

最新的 SpriteJS Next 是 SpriteJS 的新版本,在浏览器端反对 webgl2 渲染,并可向后兼容降级为 webgl 和 canvas2d。

SpriteJS 技术个性

  • 操作简略,像操作 DOM 对象一样操作画布上的图形元素
  • 基于 canvas 绘制的文档对象模型,也反对高性能的 WebGL2 渲染
  • 反对多图层解决图形、文本、图像渲染
  • 四种根本精灵类型:Sprite、Path、Label、Group
  • 反对根底和高级的精灵属性,精灵盒模型、属性与 CSS3 具备高度一致性。
  • 简便而弱小的 Transition、Animation API
  • 反对雪碧图和资源预加载
  • 可扩大的事件机制
  • 高性能的缓存策略
  • 对 D3、Matter-js、Proton 和 其余第三方库敌对
  • 跨平台,反对 node-canvas、微信小程序
  • 反对在 Vue.js 中应用以及服务端渲染

SpriteJS 能用来做什么?

相熟 canvas 的开发者应该晓得,应用 canvas 语法去画图形和做动画十分繁琐,SpriteJS 最突出的特点就是通过封装简化了动画成果的开发难度,不仅节俭了代码量,也让代码更清晰易保护,同时实现的动画成果也十分好。

作为一款图形绘制以及动画零碎,SpriteJS 能实现很多离奇的成果,被使用在各种交互丰盛的动静图表、营销流动、小游戏场景中,甚至能够独自用来做游戏。

SpriteJS 反对在 Vue(衍生版为 SpriteVue)和微信小程序中应用,那些 CSS 难以实现的成果,试试用 SpriteJS 来实现吧。

SpriteJS 还反对在 node 服务端渲染,此类的利用场景个别是将绘制好的图形保留成 png 图片,或者将动画保留成 gif 输入给前端。

上手开发体验感触

SpriteJS 官网的文档写得很清晰,且配有大量所见即所得的代码范例,如果有应用专门的 H5 游戏框架的教训,上手齐全没难度,而且我感觉 SpriteJS 比游戏框架了解起来要更简略。

收费开源阐明

SpriteJS 由 360 奇舞团出品,基于 MIT 开源协定托管在 Github 上,能够收费应用并且凋谢了源码,任何集体和公司都能够收费用在本人的我的项目上。

相干网址:https://www.thosefree.com/spr…

退出移动版