企业官网建设流程全解析

PixiEditor 动画导出完整指南：GIF、MP4 与 APNG 参数怎么选

【免费下载链接】PixiEditorPixiEditor is a Universal Editor for all your 2D needs项目地址: https://gitcode.com/GitHub_Trending/pi/PixiEditor

PixiEditor 是一款跨平台 2D 像素编辑器，画完动画后可以直接导出为 GIF、MP4 或 APNG。很多人第一次导出就会遇到两个问题：GIF 又糊又大，MP4 压出来色彩发灰。这篇文章拆一下 FFMpegRenderer.cs 里这套导出逻辑是怎么工作的，再给出每种场景该选哪个格式和哪档质量。

PixiEditor 的时间轴与关键帧编辑界面，导出动画前可先逐帧检查

为什么导出的动画文件总是又大又卡

先说结论：文件大小主要由三个变量决定——帧率、画布尺寸、格式本身的压缩能力。

• 帧率：导出时直接沿用时间轴上设置的帧率（代码里取值来自 AnimationDataViewModel），渲染器内部默认上限是60fps。一个 32 帧的循环动画，按 60fps 导出就是 0.5 秒的片，按 12fps 就是近 3 秒，但像素画面完全相同。
• 画布尺寸：导出对话框里的宽高校验的就是最终输出分辨率。像素画放大导出，细节没增加多少，体积倒是成倍涨。
• 格式：GIF 每帧最多 256 色，MP4 走有损视频编码，APNG 是无损的"会动的 PNG"。同一份帧序列，三者的体积差好几倍。

下面看 PixiEditor 内部是怎么处理每种格式的。

导出时渲染器在做什么

PixiEditor 把渲染好的帧序列通过内存管道喂给随程序一起分发的 FFmpeg（二进制放在 ThirdParty 目录，首次运行自动补执行权限），按格式走三条不同的参数路径：

GIF：两遍调色板

-f "[0:v]fps={FrameRate},scale={w}:{h}:flags=lanczos[x];[x][1:v]paletteuse" -vsync 0

第一遍先跑palettegen从所有帧里统计颜色，生成一张256 色调色板临时文件；第二遍用paletteuse把每帧颜色映射到这张表上，最后删掉临时文件。这就是为什么 GIF 里的渐变容易糊——颜色不够用时会出现色带。scale用lanczos缩放保证降尺寸时边缘干净，-vsync 0确保每一帧恰好显示一次、不被重复。

MP4：质量预设直接映射压缩率

QualityPreset.VeryHigh => 1, // qscale:v QualityPreset.High => 10, QualityPreset.Medium => 19, QualityPreset.Low => 25, QualityPreset.VeryLow => 31,

固定用mpeg4 编码器加yuv420p像素格式，qscale:v数值越小画质越好、文件越大。选预设时注意：质量预设只对 MP4 生效，GIF 和 APNG 不受它影响，别在白选档位上纠结。

APNG：无损兜底

options.WithVideoCodec("apng").ForceFormat("apng");

不压缩、不限制 256 色，支持完整 alpha 透明，适合要"会动的透明背景 PNG"的场景，代价是体积通常是 GIF 的好几倍。

PixiEditor 内置调色板功能，控制单帧色彩数量能明显提升 GIF 观感

导出参数怎么选：按场景来

• 帧率：简单循环动画 12~15fps 通常够用；追求丝滑的展示动画再上 30+。帧率越低，同样时长文件越小。
• 尺寸：导出对话框里有"最佳百分比"按钮，会把最长边控制在1280px 以内。网页用的小动图，缩到目标展示尺寸的整数倍最划算，别用 2000px 的图去贴 200px 的位置。
• GIF 色彩：画在尽量少的颜色上。像素画天然色彩集中，是 GIF 的友好素材；反过来，大面积渐变就是色带高发区。
• MP4 预设：默认给的是最高档VeryHigh（qscale=1），网络分享建议降到High或Medium，肉眼几乎看不出差别，体积能明显缩小。

容易踩的坑

• 帧率和时长混淆：改了帧率，动画播放时长会变（总帧数 ÷ 帧率 = 时长），不是变"快"。想要慢放动画，要么加帧，要么调低时间轴帧率。
• 以为质量预设管一切：如前所述，它只对 MP4 生效。导出 GIF 时改预设没有任何效果。
• 拿小图放大导出：像素画放大请用整数倍缩放，对话框里的尺寸校验配合"最佳百分比"可以避免奇数倍导致的模糊。
• 导出前先看预览：导出弹窗会按文档帧率实时播放预览，帧率、尺寸改完先在预览里过一遍，比导出后再重导省事得多。

从零开始跑一遍

拿到源码后（仓库入口在 README，克隆地址：git clone https://gitcode.com/GitHub_Trending/pi/PixiEditor），用 .NET 工具链打开 PixiEditor.sln 编译运行即可。新建文档 → 时间轴逐帧画动画 → 菜单里导出，选格式、核对尺寸和预设，剩下的工作渲染器都替你做了。

【免费下载链接】PixiEditorPixiEditor is a Universal Editor for all your 2D needs项目地址: https://gitcode.com/GitHub_Trending/pi/PixiEditor