# CSS-Sprite-Exporter

**Repository Path**: hubzyy/CSS-Sprite-Exporter

## Basic Information

- **Project Name**: CSS-Sprite-Exporter
- **Description**: An AE script to help generate css sprite animation from AE comps.
将AE动画导出为雪碧图动画的脚本。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 0
- **Created**: 2022-10-05
- **Last Updated**: 2025-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CSS-Sprite-Exporter  
An AE script to help generate css sprite animation from AE comps.  
将AE动画导出为雪碧图动画的脚本。
![](https://raw.githubusercontent.com/bigxixi/ReadMe-Resources/master/CSS-Sprite-Exporter/cssSpriteExporter.png)  
</br>

## 更新
1. 修复1.0第二针截取偏移导致最后一帧不显示的bug；
2. 优化自动获取画布宽度；
2. 新增画布铺全功能，以最后一帧补全空位；`新增功能`



# How to Install:
Download the [`JSX file`](https://raw.github.com/bigxixi/CSS-Sprite-Exporter/master/CSS-Sprite-Exporter.jsx).</br>
Run AE, click `File`->`Script`->`Run Script File...` and choose the `CSS-Sprite-Exporter.jsx` file.  
</br>
Or you can copy the `CSS-Sprite-Exporter.jsx` to your AE script folder:
>**Windows:**  
>`C:\Program Files\Adobe\Adobe After Effects <version>\Support Files\Script\ScriptUI Panels\`  
>**Mac:**  
>`/Applications/Adobe After Effects <version>/Scripts/ScriptUI Panels/`  
Then you can run it from the AE Window menu.  
</br>

#How to use:  
1.Open a composition in AE.  
2.Run the script.  
3.Make some config if needed.  
4.Hit generate button.  

Then you will get an "image" folder whitch contants the sprite image(png format) and a html page to show the animation.  
You can copy the css code from the show page. Surport transparency.  
I use [Clipboard.js](https://clipboardjs.com/) to make the "copy to clipboard" function.  
(Use Chrome to run the html if the layout crashes.)  

![](https://raw.githubusercontent.com/bigxixi/ReadMe-Resources/master/CSS-Sprite-Exporter/cssSpriteExporterDemo.gif)  


# License 

[MIT License](https://zenorocha.mit-license.org/) © Zeno Rocha