PNG序列生成器
-
不依赖gulp
-
完美搭配canvas
-
基于spritesmith
-
基于png序列或者jpg序列
-
兼容css的vw单位,真正实现响应式适配
如果是全局安装则运行
pngse init
pngse create
如果是局部安装则运行
npx pngse init
npx pngse create
命令介绍
命令 | 备注 |
---|---|
pngse create | 创建图片序列 |
pngse init | 初始化动画 |
pngse | pngse create的简化版 |
使用说明
-
在当前文件夹下新建.imglist文件夹,
-
将png序列放在.imglist文件夹中
-
确保当webpack配置中设置有file-loader
-
然后在当前文件下运行
npx pngse
命令,即可生成.compose文件夹,.compose文件夹中包含关键帧信息(index.js)文件和png序列合成文件(source.png)
PNGSequence组件简介
- 先引入.compose文件夹
import animationFrmaes from "./.compose";
- 将导入animationFrmaes设置到组件的frames属性上即可
import React from "react"
import ReactDOM from "react-dom";
import PNGSE from "@yushicheng/PNGSE";
const mountNode=document.getElementById("root");
ReactDOM.render(<PNGSE frames={animationFrmaes}/>,mountNode)