雪碧图又被称为精灵图或拼合图，是将一帧一帧多张图像文件集成为单一图像。
优势1．图片可无损压缩，落地效果清晰
2．支持Alpha通道，半透明过渡效果，颜色更细腻丰富
3．可通过代码可以控制播放、暂停、帧速率、动画时长等
．实现成本较低
劣势1．作为资源生成移动端安装包时，会出现安装包体积较大的情况
2．帧速率较高、时间较长的高精度动画，即使图片很小，在Web或H5上效果将受到设备或网络性能影响
落地方式插件CSSSpriteAnimation
①AE安装插件：
Win:桌面AE图标右击——属性——打开文件所在位置——复制CSS-Sprite-Exporter.jsx到SupportFiles\Scripts\ScriptUIPanels文件夹里
Mac：应用程序\AdobeAfterEffects\Scripts\ScriptUIPanels
②AE菜单栏编辑-首选项-常规/脚本和表达式：勾选上
③重启AE，在软件下拉框最后将出现
④设置相应的参数，特地从网上找了汉化版的对照表在旁边，一般默认选项，选择生成——设置导出的地址
等待一段时间，时长和文件大小相关，时间一般为几分钟，全部完成后会出现两个子文件夹，直接打包发给开发就可以啦～
images里面是完整的一张雪碧图，这里只截取了三张，担心密集恐惧症的朋友看了导致不适
右边的HTML文件用浏览器打开后可以看到，左边是动效预览，右边是插件生成的代码，开发只需一键复制就可以快速实现落地效果
总结雪碧图的动效落地方法能大大省去了我们设计师和开发的沟通，提升了我们的工作效率，不用担心开发因为工作量大、实现有难度将我们拒之门外，还能保证动画效果，也支持不透明度的动效，我真的超超超喜欢这落地方法！！
最后，特别感谢这款插件的开发者，就是他！！
想了解更多请持续