逐帧动画编辑器:手机上画 64×64 像素动画的完整教程
编辑器定位:手机上最好用的逐帧像素画工具之一
Blacklyte App 内置的动画编辑器,定位是"手机上最快从空白到完整动画的像素画工具"。对比同类产品(Divoom 自带编辑器、Pixaki 等),它的特点:
- 专为 64×64 固定分辨率设计,不需要缩放适应
- 手指直接画(支持 Apple Pencil),比鼠标在小屏上点击舒服
- 自动插值中间帧:画完第 1 帧和第 3 帧,第 2 帧自动生成
- 实时预览推送到像素屏上的效果(手机和屏同时显示)

编辑器界面一览
打开 App → 设备标签 → 选中你的像素屏 → 底部点 "创作" → 进入编辑器。
界面从上到下:
顶部工具栏
- 撤销 / 重做:左箭头 / 右箭头
- 调色板:当前颜色点一下打开完整色轮
- 预览:播放动画预览
- 保存:存为 App 本地草稿 / 直接推送像素屏
主画布(64×64)
- 手指在画布上绘画
- 双指缩放(放大到单个像素级别)
- 单指拖动平移(放大后有用)
底部帧管理条
- 帧列表:横向排列,每帧一个缩略图
- + 添加帧:在当前帧后面插入空白帧(或复制当前帧)
- 垃圾桶:删除当前帧
- 播放速度:每帧显示多少毫秒(默认 100ms,数值越小动画越快)
左侧画笔工具
| 工具 | 功能 | 快捷使用 |
|---|---|---|
| 画笔 | 按像素绘制 | 默认选中 |
| 橡皮擦 | 清除像素 | 切换到橡皮擦模式 |
| 填充 | 同色区域一键填充 | 类似 Paint 的油漆桶 |
| 线条 | 画直线 | 两点确定一条 |
| 矩形 | 画矩形轮廓或填充 | 可调粗细 |
| 圆形 | 画圆或椭圆 | 可调粗细 |
从零创建一个完整动画(实战流程)
假设你想做一个"小爱心闪烁"的动画:
第一步:草图(2 分钟)
在第一帧画一个空心或实心的小爱心。手指直接在画布上点像素,不需要精确——64×64 画布不大,爱心大概 12×12 像素就够了。
第二步:复制帧
- 点底部帧管理条,当前帧右侧点 "+" 号 → 选 "复制当前帧"
- 第 2 帧出来了,和第 1 帧一模一样
第三步:修改第 2 帧
- 切换到红色(爱心主色)
- 把爱心改成实心(或改变亮度)——这就是"亮"的状态
- 第 1 帧是"暗"的状态
第四步:设置动画速度
- 帧管理条上拖动速度条到 150ms(太快闪得晃眼,太慢像慢动作)
- 点预览按钮 → 看到爱心一明一暗地闪
第五步:加更多帧(可选)
- 复制第 2 帧做第 3 帧,把爱心缩小一半(做"跳一下"效果)
- 或复制第 1 帧做第 4 帧,回到暗状态
- 最终 4 帧循环:暗 → 亮 → 更小的亮 → 暗
第六步:保存 + 推送
- 顶部 保存 → 选 "存到我的动画库" 或 "直接推送到像素屏"
- 直接推送的话,屏幕会在 2 秒内显示新动画
自动插值功能(最省心的功能)
如果你画了第 1 帧(爱心在左上)和第 3 帧(爱心在右下),中间空着第 2 帧,然后点"自动插值":
- App 会自动生成一帧爱心从左上移动到右下的中间状态
- 线性插值最常用;也支持"缓动"(ease-in-out)让运动有加速减速感
这个功能对做"对象移动"类动画特别有用——不用逐帧手动搬位置。
调色板技巧
64×64 画布上颜色太多会显得杂乱,建议:
- 每个动画不超过 4 种颜色(含背景色)
- 背景用黑色或深色(LED 屏显黑 = 灯灭,最省电也最清晰)
- 主色用饱和度高的(LED 屏上饱和色比灰色更醒目)
- App 内置了几个"LED 友好"的预设调色板(霓虹、游戏配色、赛博朋克),可以直接用
动画长度和文件大小限制
- 最大帧数:30 帧(超过会被截断)
- 每帧分辨率:固定 64×64 像素
- 格式:App 自动存为 GIF 或 App 内部格式
- 推送速度:WiFi 下 30 帧动画推到屏幕约 2~3 秒
常见痛点解决
Q:手指画不准单个像素?
双指放大到最大倍率,用指尖点。如果有 Apple Pencil / 触控笔,用笔精确多了。或者用"自动插值"功能减少需要手动画的帧。
Q:动画太卡顿?
检查每帧之间的差异——两帧如果只有微小变化(比如颜色差一点),LED 屏上看起来就会抖。确保每帧之间有足够的视觉差异。
Q:想画一个复杂的动画但帧不够?
30 帧限制是 App 的硬限制。可以把长动画拆成多段,在 App 里设"自动轮换"让屏按顺序播放。