Slack GIF 制作器

为 Slack 表情和回应创建自定义动画 GIF。

Slack 的 GIF 要求

技术规格

尺寸：

• 推荐：128x128 像素
• 最大：256x256 像素
• 正方形宽高比

文件格式：

• 必须为 GIF 格式
• 支持动画 GIF
• 文件大小：自定义表情需小于 256KB

动画：

• 帧率：10-15 fps
• 循环次数：无限
• 时长：通常 1-3 秒

制作流程

1. 设计构思

定义 GIF：

• 用途（回应、表情、插图）
• 风格（极简、精细、卡通）
• 动画类型（循环、单次播放、弹跳）

草拟创意：

• 缩略图草图
• 逐帧拆解
• 节奏与韵律

2. 帧的制作

逐帧法：

// Create individual frames
const frames = [];

// Frame 1
frames.push(createFrame1());

// Frame 2
frames.push(createFrame2());

// Frame 3
frames.push(createFrame3());

洋葱皮（Onion Skinning）：

• 以降低的不透明度显示上一帧
• 在各帧之间保持一致性
• 平滑过渡

3. 动画组装

使用 Canvas：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 128;
canvas.height = 128;

// Draw each frame
frames.forEach((frame, index) => {
  setTimeout(() => {
    ctx.clearRect(0, 0, 128, 128);
    drawFrame(ctx, frame);
  }, index * 100); // 100ms per frame
});

4. 导出为 GIF

使用 gif.js：

const gif = new GIF({
  workers: 2,
  quality: 10,
  width: 128,
  height: 128
});

// Add frames
frames.forEach(frame => {
  gif.addFrame(frame, { delay: 100 });
});

gif.render();

Slack 常见的 GIF 类型

回应

• 点赞/点踩
• 鼓掌
• 火焰
• 爱心
• 大笑/哭泣

情绪

• 开心/兴奋
• 难过/失望
• 惊讶/震惊
• 困惑/思考
• 生气/烦躁

动作

• 挥手
• 击掌
• 庆祝
• 捂脸
• 耸肩

最佳实践

• 保持文件较小以便快速加载
• 在小尺寸下采用简洁的设计
• 确保动画循环流畅
• 在最终定稿前先在 Slack 中测试
• 考虑无障碍性（alt 文本）
• 在整套表情中保持一致的风格