龙空技术网

SpriteJS - 360 奇舞团出品的高性能 web 图形和动画系统

那些免费的砖 2368

前言:

现时各位老铁们对“js判断360浏览器”大致比较关注,同学们都需要剖析一些“js判断360浏览器”的相关知识。那么小编也在网摘上收集了一些有关“js判断360浏览器””的相关知识,希望你们能喜欢,姐妹们一起来学习一下吧!

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

SpriteJS 介绍

SpriteJS 是跨平台的高性能图形动画系统,通过封装好的简单方法实现在 web、node、桌面应用和小程序上的图形绘制和各种流畅的动画效果。由 360 公司的前端团队 360 奇舞团开发以及维护。

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

spritejs 官方文档

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 能实现很多新奇的效果,被运用在各种交互丰富的动态图表、营销活动、小游戏场景中,甚至可以单独用来做游戏。

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

SpriteJS 还支持在 node 服务端渲染,此类的应用场景一般是将绘制好的图形保存成 png 图片,或者将动画保存成 gif 输出给前端。

上手开发体验感受

SpriteJS 官方的文档写得很清晰,且配有大量所见即所得的代码范例,如果有使用专门的 H5 游戏框架的经验,上手完全没难度,而且我觉得 SpriteJS 比游戏框架理解起来要更简单。

大量代码范例

免费开源说明

SpriteJS 由 360 奇舞团出品,基于 MIT 开源协议托管在 Github 上,可以免费使用并且开放了源码,任何个人和公司都可以免费用在自己的项目上。

关注我,持续分享高质量的免费开源、免费商用的资源。

↓↓点击查看本次分享的网址。

SpriteJS - 360 奇舞团出品的高性能 web 图形和动画系统|那些免费的砖

标签: #js判断360浏览器 #360js库