在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:spriteJS开源软件地址:https://gitee.com/qihoo360/spriteJS开源软件介绍:简介SpriteJS 是跨平台的高性能图形系统,它能够支持web、node、桌面应用和小程序的图形绘制和实现各种动画效果。 SpriteJS Next 是SpriteJS的新版本,在浏览器端支持 webgl2 渲染,并可向后兼容降级为 webgl 和 canvas2d。 特性
更多特性,访问 spritejs.com 安装和使用如果你使用NPM进行包管理,可以直接使用npm命令安装 npm install spritejs 安装完之后可以使用ESModule加载: import * as spritejs from 'spritejs'; 由于spritejs是跨平台的,如果在node环境中跑,需要自行安装依赖库node-canvas npm install canvas@next 如果你在浏览器中直接使用,可以使用CDN版本 <script src="https://unpkg.com/spritejs@3/dist/spritejs.js"></script> 如果你要在node服务端使用spritejs渲染,你需要安装node-canvas 可能需要先安装一下依赖: sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++ 然后安装node-canvas 2.x: npm install canvas@next 3D 扩展SpriteJSNext 通过3D扩展库加载并渲染3D模型。 可以通过CDN加载扩展库: <script src="https://unpkg.com/spritejs@3/dist/spritejs.es.min.js"></script><script src="https://unpkg.com/sprite-extend-3d/dist/sprite-extend-3d.js"></script> 或通过NPM加载: import {Scene} from 'spritejs';import {Cube, shaders} from 'sprite-extend-3d'; 架构SpriteJS Next 提供若干类基础精灵元素,可以像操作DOM元素一样在图层上操作它们。 与旧版本主要差异增强
改变策略
弱化
基本用法const {Scene, Sprite} = spritejs;const container = document.querySelector('#stage');const scene = new Scene({container, width: 3080, height: 800, mode: 'stickyTop'});const layer = scene.layer();const robot = new Sprite('https://p5.ssl.qhimg.com/t01c33383c0e168c3c4.png');robot.attr({ anchor: [0, 0.5], pos: [0, 0],});robot.animate([ {pos: [0, 0]}, {pos: [0, 300]}, {pos: [2700, 300]}, {pos: [2700, 0]},], { duration: 5000, iterations: Infinity, direction: 'alternate',});layer.append(robot); |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论