CSS-Sprite-Exporter

KO | EN

gitlite — search

#ai #golang #go #android #machine-learning #docker #nodejs #macos #kubernetes #awesome-list #vue #pytorch #ios #open-source

CSS-Sprite-Exporter

(★ 119)

A script can help generate css sprite animation from AE comps.

File Explorer

Download Latest Version (.zip)

CSS-Sprite-Exporter.jsx
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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>
# 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)

## Donation - 求打赏:
如果您觉得本插件好用，欢迎打赏，感谢您的支持！

[<img src="https://raw.githubusercontent.com/bigxixi/bigxixi.github.io/master/donate/index.hyperesources/wechat.png" width="30%" height="30%">](http://bigxixi.com/donate/index.html)
[<img src="https://raw.githubusercontent.com/bigxixi/bigxixi.github.io/master/donate/index.hyperesources/alipay%402x.jpg" width="30%" height="30%">](http://bigxixi.com/donate/index.html)

也欢迎使用 PayPal：

[<img src="https://raw.githubusercontent.com/bigxixi/bigxixi.github.io/master/donate/index.hyperesources/paypal.png" width="30%" height="30%">](https://www.paypal.me/bigxixi/)  
# License

CSS-Sprite-Exporter

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

CSS-Sprite-Exporter

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README