从一个像素开始,让画面动起来

像素动画制作工具 逐帧绘制,做出自己的小动图

为头像添加眨眼动作,为表情做出弹跳效果,或绘制简单的游戏角色动画。从空白画布开始,也可以导入PNG序列帧,调整动作与节奏,再下载真正会播放的GIF动图。

免费在线编辑 · 无需注册 · 图片在你的设备上处理

像素动画制作工具编辑区

画好第一帧,复制后修改几个像素,再点击播放查看动作。

画布每边1–128像素;最多64帧、总计1,048,576像素。导出包含放大与往返帧后,最多16,777,216像素。

像素绘制画布

用鼠标或触控绘制。键盘方向键移动光标,空格绘制;B画笔、E橡皮擦、F填色、I取色。Ctrl/⌘ Z撤销。

动画预览

动画时间轴

选择帧后编辑,可拖动排序,也可用前移、后移按钮调整。空白帧与复制帧插入在选中帧之后。

    每帧20–10,000毫秒,速度倍率统一调整各帧时长。预览与GIF均按10毫秒取整,最短20毫秒;不同查看器播放速度可能略有差异。

    导出动画作品

    GIF最多使用255种可见颜色加透明色。超出时使用固定色表;透明度通道值低于50%变为全透明,其余变为不透明。PNG导出保留完整颜色与透明通道。选择1×可减小文件。

    PNG帧和精灵图按时间轴顺序各包含一次原始帧,属于静态图片;GIF包含速度、循环与往返设置。

    准备就绪,可以绘制或导入图片帧。

    像素动画制作工具的素材准备

    开始制作前先准备尺寸一致、位置对齐的素材,让每一帧共享相同的像素网格。

    把图片转成像素画

    先生成一张静态像素画作为起点,再导入编辑器,手动绘制后续动作。

    准备素材
    转换图片

    拆分已有精灵图

    先从规则网格中提取独立PNG帧,再导入本页进行排序、逐帧修改和播放。

    导入准备
    切割精灵图

    统一画布尺寸

    调整像素画大小时保留清晰像素边缘,并确保导入的所有动画帧尺寸一致。

    清晰像素
    调整像素画大小

    像素动画制作工具的实用工作流

    从容易完成的短动作开始:眨眼、弹跳、挥手,再试着循环播放。下方配图为工作流示意,并非编辑器截图。

    每一帧只改变一点,让动作连贯

    在像素动画制作工具中复制已有姿势,不必从头重画。开启上一帧或下一帧的洋葱皮参考,调低透明度,借助半透明轮廓对齐眼睛、脚部和边缘。通过单独延长帧时长,让某个表情或动作停留得更久。

    像素猫连续跳跃帧与半透明洋葱皮参考的示意插画

    分享前检查真正导出的GIF

    网页画布能显示完整RGBA颜色,GIF则存在色表与透明处理限制。导出后检查实际文件预览,留意颜色变化和透明边缘。保存工程方便继续修改;需要半透明效果时,请保留PNG序列帧或透明精灵图。

    像素猫序列帧转为循环动画与六格精灵图的示意插画

    如何使用像素动画制作工具

    先做一个短循环,检查动作节奏,再保存可编辑备份。

    01

    创建小画布或导入同尺寸图片

    初次尝试可以选16×16或32×32画布。将静态PNG、JPG或WebP图片导入为动画帧;空白工程采用首张图片尺寸。混合尺寸的图片会整批拒绝,不会留下不完整的导入结果。

    • 角色素材优先使用透明PNG
    • 为文件名编号以保持预期顺序
    打开编辑器
    02

    绘制动作并调整时间轴

    使用画笔、橡皮擦、填色和取色绘制。插入空白帧或复制当前帧,再拖动调整顺序。撤销可恢复最近历史中的绘图、时长更改、删除和工程替换操作。

    03

    设置节奏并预览播放

    可以从每帧120毫秒开始,让停顿更长、过渡更快。统一速度倍率不会覆盖各帧原始时长。开启循环或往返播放,观察正向动作和返回动作是否衔接自然。

    04

    保存工程并导出作品

    关闭页面前下载可编辑工程。GIF适合播放动画,PNG帧压缩包适合继续编辑,按行排列的PNG精灵图适合游戏引擎。导出放大采用最近邻像素缩放,批量处理提供进度和取消操作。

    像素动画制作工具常见问题

    关于逐帧绘制、播放节奏、透明背景与工程保存的实用解答。

    如何把一张静态像素画做成动图?

    导入图片后复制第一帧,在每个副本中修改少量细节。例如眨眼可以先画睁眼、半闭眼和闭眼三个姿势。本工具播放的是你实际绘制的帧,不会自动补全动作,也不提供骨骼绑定。

    这个像素动画制作工具免费吗?图片会上传吗?

    编辑器免费使用,无需注册账号。绘制、图片解码和导出均在浏览器中完成。自动草稿保存在当前设备的浏览器配置中,分享页面链接不会发送你的作品或工程。

    怎么把PNG序列帧转GIF?

    可以。多选静态PNG图片,导入后检查时间轴顺序、设置每帧时长,再导出GIF。所有帧必须与画布尺寸一致。建议使用frame01、frame02等编号文件名,便于检查PNG序列帧转GIF时的动作顺序。

    像素动画制作工具适合多大的入门画布?

    建议从16×16或32×32画布、两到八帧的短动作开始,小画布更容易看清每次修改。上限为每边128像素、64帧、全部源帧总计1,048,576像素。导入时不会静默缩放或裁剪图片。

    帧时长、帧率和播放速度有什么区别?

    帧时长表示一张画面停留多久。各帧等长时,每帧100毫秒约为每秒10帧。2×速度会将各帧时长减半,并保留相对停顿关系。预览与GIF按10毫秒取整、最短20毫秒;图片查看器可能采用自己的计时规则。

    洋葱皮有什么用?参考画面会导出吗?

    洋葱皮将上一帧或下一帧以可调透明度叠加显示,帮助对齐轮廓、判断肢体位移。参考叠影、编辑网格和键盘光标只辅助绘制,不会出现在动画预览和下载文件中。

    能导出透明背景的像素GIF吗?

    可以,但GIF只支持全透明或不透明。本页导出器将透明通道值低于128的像素变为全透明,其余变为不透明。最多255种可见RGB颜色可精确保留,超过时使用固定精简色表。请检查导出GIF预览,需要平滑半透明时保留PNG文件。

    为什么导出的GIF颜色或边缘与网页预览不同?

    画布支持完整颜色和半透明,GIF使用色表和一个透明索引,渐变、柔和边缘及导入素材可能发生变化。导出后显示的是实际编码文件。使用少量颜色和清晰像素边缘更合适,需要完整RGBA数据时导出PNG序列帧。

    刷新页面后,还能继续编辑工程吗?

    像素动画制作工具会将完成的编辑自动保存到IndexedDB,并在再次打开时恢复最近草稿,请等待保存成功提示。无痕模式、空间限制或清理站点数据可能导致草稿丢失,建议下载.pixelanim.json备份,通过打开工程继续编辑。

    GIF、PNG序列帧与精灵图有什么区别?

    GIF是包含时长与循环设置的可播放动画。ZIP包含每个原始帧的独立PNG,精灵图则从左到右、从上到下排列原始帧。PNG保留透明通道,但属于静态图片,需要在游戏引擎或其他编辑器中另行设置播放时长。

    往返播放会重复停留在首尾帧吗?

    开启循环时,三帧按1–2–3–2反复播放,不会将首尾帧连续重复。关闭循环时按1–2–3–2–1播放后停止。GIF采用相同顺序,PNG帧与精灵图则始终各保留一次原始帧。

    能直接导入现有GIF,或取消耗时的导出吗?

    导入支持静态PNG、JPG和WebP帧,不支持直接拆解GIF、APNG或动态WebP,请先提取为静态帧。导入或导出过程中可点击取消处理。放大后输出超过16,777,216像素时,请降低倍率、减少帧数或关闭往返播放。

    用像素动画制作工具完成第一个循环

    从小画布和两个姿势开始,调整动作节奏,保存可编辑工程,再导出经过实际文件预览检查的GIF动图。

    手动逐帧编辑 · GIF、PNG序列帧与精灵图 · 不含自动动作生成