深浅模式
Keyframes 序列帧
支持多图序列帧模式以及精灵图序列帧（JSON格式）
支持离屏Canvas渲染以及Web Worker高性能渲染（默认自动开启，若浏览器不支持，将会自动降级处理）
提示
精灵图推荐使用TexturePacker进行制作,不过它是要收费的
如果你想使用免费的工具制作精灵图，有大佬制作了工具Flint，选择图集打包，图集格式采用PixiJS进行制作
另外需要注意：无论是TexturePacker还是Flint，都不要采用旋转，目前暂时不支持旋转属性;同时精灵图名称使用0、1、2、3...进行命名
安装
sh
npm install @poggi/keyframes
pnpm add @poggi/keyframes
yarn add @poggi/keyframes普通序列帧
基础用法，直接导入多张序列帧图片
loading
精灵序列帧
支持单张资源或多张资源组合的精灵图
loading
缩放
可以对序列帧设置缩放
loading
播放指定帧
可以对序列帧设置缩放
loading
API
Keyframes 类
Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| playing | 用于控制序列帧的播放状态 | boolean | true |
Methods
setOption(option: IKeyFramesOption)
设置渲染时的参数
reset
重置播放
setSource(option: IKeyframesSource)
设置资源
destroy
销毁
render(clock: number)
渲染函数
playFrame(index: number)
播放指定帧
Interfaces
IKeyframesSource
| 属性名 | 说明 | 类型 | 是否必选 | 默认值 |
|---|---|---|---|---|
| source | 序列帧资源 | HTMLImageElement[] | ISpriteData[] | 是 | - |
| sprite | 是否为精灵图数据 | boolean | 否 | - |
IKeyFramesConstructorOption extends IKeyframesSource
| 属性名 | 说明 | 类型 | 是否必选 | 默认值 |
|---|---|---|---|---|
| sprite | 是否为精灵图数据 | boolean | 否 | - |
| container | 容器 | HTMLCanvasElement | 是 | - |
| width | 每帧的宽度 | number | 是 | - |
| height | 每帧的高度 | number | 是 | - |
| dpr | 设备像素比 | number | 否 | devicePixelRatio |
| useWorker | 是否使用worker | boolean | 否 | true |
Loader 类
Methods
loadImagesData(options: ISourceOption)
加载序列帧图片资源
loadSpriteData(options: ISourceOption)
加载精灵图资源
Interfaces
| 属性名 | 说明 | 类型 | 是否必选 | 默认值 |
|---|---|---|---|---|
| dir | 图片目录 | string | 否 | - |
| urls | 图片URL列表 | string[] | 是 | - |
| headers | 额外请求头 | HeadersInit | 否 | - |
| progress | 加载中回调函数 | (progress: number) => void | 否 | - |
| loaded | 加载完成回调函数 | (imgs: HTMLImageElement[] | ISpriteData[]) => void | 是 | - |