# pngse

**Repository Path**: bottom_level_aided_rd/pngse

## Basic Information

- **Project Name**: pngse
- **Description**: 生成png关键帧序列的命令行工具
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-12-11
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 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文件夹

```javascript
import animationFrmaes from "./.compose";
```

* 将导入animationFrmaes设置到组件的frames属性上即可

```react
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)

```