Agent Skills
返回列表
Jiffy 图片合成小动画

Jiffy 图片合成小动画

设计多媒体 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_6bbd6f5f/jiffy。

技能介绍

要解决什么问题

在浏览器或 Node 里把多帧 RGBA 像素数据落成 GIF 或 APNG，常见做法是挂 canvas 截图、走服务端转码，或引入带 native 绑定的 npm 包。若你希望零外部依赖、同一套逻辑能在前端与 Node.js 18+ 跑通，就需要自包含的编码实现。

Jiffy（技能目录 gif-connect）提供纯 JavaScript 的 GIF89a 与 APNG 编码器：从帧缓冲直接写出动画字节流，不依赖 ImageMagick、ffmpeg 或 WASM 运行时。

核心能力与用法思路

  • GifEncoder：GIF89a；Floyd-Steinberg 抖动；LZW 压缩；每帧最多 256 色；encode() 为同步调用。
  • ApngEncoder：动画 PNG；保留完整 RGBA；DEFLATE 压缩与 CRC32 校验；encode() 为异步调用。

技能触发后，从 skills/gif-connect/src/ 读取编码器源码写入你的项目即可使用；示例见 examples/browser.html 与 examples/node-example.js，完整 API 见 references/api-reference.md。

适用边界与注意点

GIF 路径受 256 色与调色板限制，照片类画面更依赖抖动，观感与体积需自行权衡。APNG 保真更好，但文件通常更大、解码成本更高。两者均为编码侧能力，不包含采集帧、时间轴编辑或播放器 UI；大分辨率、高帧率场景要注意内存与主线程阻塞（GIF 同步编码尤甚）。

使用场景

  • 在浏览器里用 Canvas 逐帧画出动画后，要把每帧 RGBA 像素缓冲编码成 GIF89a，且不能依赖服务端或 ffmpeg。
  • Node.js 脚本需要把多张静态图对应的像素帧合成 APNG，部署环境只允许纯 JS、无法安装原生转码工具。
  • 产品内提供「导出动图」：用户编辑多帧画面后，在前端同步生成 GIF 预览并下载，要求零外部 npm 原生依赖。
  • 需要透明通道的短动画（如 UI 微动效素材），用 ApngEncoder 从完整 RGBA 帧写出动画 PNG，而非降色 GIF。

适合人员

  • 负责 Canvas 动效预览页、必须在用户浏览器内完成 GIF 导出而不走后端转码的前端工程师
  • 维护 CI 或轻量 Node 工具链、需要在无 ffmpeg 环境把帧序列打成 APNG 的自动化脚本作者
  • 做表情包/贴纸或简易动画编辑器、要把用户多帧像素数据编码成可下载动图的产品开发
  • 做技术演示或开源示例、希望浏览器与 Node 共用同一套 GifEncoder/ApngEncoder 源码的独立开发者