无需登录 数据私有 本地保存

精灵帧动画生成器 - 多图播放及CSS动画

24
1
0
1

🎞️ 精灵帧动画生成器

上传多张图片，自动合成精灵图并生成CSS动画代码

帧数: 0 尺寸: -
拖拽图片到此处，或点击上传
支持 PNG / JPG / WebP / GIF（仅取首帧），可一次选择多张
帧序列 （可拖拽排序）
尚未上传图片
精灵图预览
上传图片后自动生成
动画预览
上传图片后预览动画
准备就绪
生成的 CSS 代码
// 请先上传图片并设置参数 // CSS 动画代码将在此显示...
常见问题 & 知识点
什么是精灵帧动画（Sprite Sheet Animation）？
精灵帧动画是将动画的所有帧合并到一张图片（精灵图/Sprite Sheet）中，通过CSS或JavaScript快速切换显示区域来实现动画效果。这种技术广泛应用于游戏开发、网页动画、图标动效等场景，能显著减少HTTP请求数量，提升加载性能。
CSS steps() 函数在帧动画中起什么作用？
steps(n) 是CSS动画的timing function，它将动画均匀分成n步，每步之间无过渡（阶梯式变化）。对于精灵帧动画，如果精灵图有8帧水平排列，使用 steps(8) 配合 background-position 的变化，就能实现逐帧切换的效果。这与普通的平滑过渡动画（ease/linear）完全不同。
水平排列和网格排列各有什么优缺点？
水平排列：所有帧排成一行，CSS动画实现最简单、最可靠，steps() 完美支持。适合帧数较少（通常≤30帧）的场景。
垂直排列：所有帧排成一列，同样完美支持CSS steps动画，适合宽度受限的布局。
网格排列：多行多列，节省图片面积，适合帧数较多的场景。但使用CSS steps时，背景位置沿斜线均匀变化，中间步骤可能无法精确对应每个帧的位置。对于网格排列，推荐使用JavaScript动画或确保帧按照逐行扫描顺序排列。
精灵图和GIF动图相比有哪些优势？
① 控制力更强：可通过CSS/JS精确控制播放、暂停、速度、方向，而GIF只能自动循环；② 画质更好：精灵图使用PNG格式支持全色彩和半透明，GIF仅支持256色和1位透明度；③ 性能更优：精灵图动画由浏览器GPU加速渲染，大尺寸动画比GIF流畅得多；④ 交互灵活：可以在hover、点击等事件触发动画，GIF无法响应交互。
如何优化精灵图的大小？
① 使用PNG-8或WebP格式压缩（可通过TinyPNG等工具）；② 去除帧之间的重复空白区域；③ 合理设置帧尺寸，避免过大；④ 对于简单图形，考虑使用SVG精灵图；⑤ 帧数较多时使用网格排列减少图片总面积；⑥ 在生产环境中使用CDN加速分发。
上传的图片尺寸不一致怎么办？
本工具默认将所有帧统一缩放到您设置的帧宽×帧高。如果图片宽高比不一致，系统会自动等比缩放并居中（保持宽高比，空白区域透明填充）。您可以在设置面板中调整帧宽度和帧高度来适配您的需求。建议在上传前将所有帧裁剪为相同尺寸，以获得最佳效果。
生成的CSS代码可以直接使用吗？
生成的CSS代码包含完整的 @keyframes 动画定义和使用示例。您需要：① 下载精灵图并上传到您的服务器或CDN；② 将CSS代码中的 url('sprite-sheet.png') 替换为实际的图片路径；③ 确保应用动画的元素宽高与单帧尺寸一致；④ 将代码粘贴到您的样式表中即可。
🔧 相关工具