@yushicheng/pngse

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)

  可供@yushicheng/pngse-react中的PNGSE组件使用

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)