7.16 Slack GIF Creator Skill - Slack GIF 创建器

概述

Slack GIF Creator Skill 提供了创建针对 Slack 优化的动画 GIF 的知识和工具。它包含 Slack 的约束条件、验证工具和动画概念，帮助创建完美的 Slack 表情和消息 GIF。

适用场景

当用户请求为 Slack 创建动画 GIF 时使用，例如：

"帮我做一个 X 做 Y 的 Slack GIF"
"创建一个 Slack 表情动画"
"制作一个可以在 Slack 中使用的 GIF"

Slack 要求

尺寸规格

类型	尺寸	说明
Emoji GIF	128x128	推荐尺寸
Message GIF	480x480	消息中使用

参数设置

参数	推荐值	说明
FPS	10-30	越低文件越小
颜色数	48-128	越少文件越小
时长	< 3秒	表情 GIF 建议

核心工作流程

python

from core.gif_builder import GIFBuilder
from PIL import Image, ImageDraw

# 1. 创建构建器
builder = GIFBuilder(width=128, height=128, fps=10)

# 2. 生成帧
for i in range(12):
    frame = Image.new('RGB', (128, 128), (240, 248, 255))
    draw = ImageDraw.Draw(frame)

    # 使用 PIL 基元绘制动画
    # （圆形、多边形、线条等）

    builder.add_frame(frame)

# 3. 保存并优化
builder.save('output.gif', num_colors=48, optimize_for_emoji=True)

绘制图形

处理用户上传的图片

如果用户上传图片，考虑他们是否想要：

直接使用（如"动画化这个"、"把这个分成帧"）
作为灵感（如"做一个像这样的东西"）

python

from PIL import Image

uploaded = Image.open('file.png')
# 直接使用，或仅作为颜色/风格参考

从头绘制

使用 PIL ImageDraw 基元：

python

from PIL import ImageDraw

draw = ImageDraw.Draw(frame)

# 圆形/椭圆
draw.ellipse([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)

# 星形、三角形、任何多边形
points = [(x1, y1), (x2, y2), (x3, y3), ...]
draw.polygon(points, fill=(r, g, b), outline=(r, g, b), width=3)

# 线条
draw.line([(x1, y1), (x2, y2)], fill=(r, g, b), width=5)

# 矩形
draw.rectangle([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)

让图形看起来更好

使用更粗的线条：始终设置 width=2 或更高。细线（width=1）看起来粗糙和业余。

添加视觉深度：

使用渐变背景（create_gradient_background）
叠加多个形状增加复杂度

让形状更有趣：

不要只画简单的圆——添加高光、圆环或图案
星星可以有光晕（在后面画更大、半透明的版本）
组合多个形状（星星 + 闪光、圆形 + 圆环）

注意颜色：

使用鲜艳、互补的颜色
添加对比（浅色形状上的深色轮廓，深色形状上的浅色轮廓）
考虑整体构图

可用工具

GIFBuilder (`core.gif_builder`)

组装帧并为 Slack 优化：

python

builder = GIFBuilder(width=128, height=128, fps=10)
builder.add_frame(frame)        # 添加 PIL Image
builder.add_frames(frames)      # 添加帧列表
builder.save('out.gif',
    num_colors=48,
    optimize_for_emoji=True,
    remove_duplicates=True
)

验证器 (`core.validators`)

检查 GIF 是否满足 Slack 要求：

python

from core.validators import validate_gif, is_slack_ready

# 详细验证
passes, info = validate_gif('my.gif', is_emoji=True, verbose=True)

# 快速检查
if is_slack_ready('my.gif'):
    print("准备就绪！")

缓动函数 (`core.easing`)

平滑运动而非线性：

python

from core.easing import interpolate

# 进度从 0.0 到 1.0
t = i / (num_frames - 1)

# 应用缓动
y = interpolate(start=0, end=400, t=t, easing='ease_out')

# 可用: linear, ease_in, ease_out, ease_in_out,
#       bounce_out, elastic_out, back_out

帧辅助函数 (`core.frame_composer`)

常见需求的便捷函数：

python

from core.frame_composer import (
    create_blank_frame,          # 纯色背景
    create_gradient_background,  # 垂直渐变
    draw_circle,                 # 圆形辅助
    draw_text,                   # 简单文本渲染
    draw_star                    # 五角星
)

动画概念

抖动/振动

用振荡偏移对象位置：

python

import math

# 水平抖动
offset_x = math.sin(frame_index * 0.5) * 5
# 垂直抖动
offset_y = math.cos(frame_index * 0.7) * 3

draw.ellipse([
    center_x - radius + offset_x,
    center_y - radius + offset_y,
    center_x + radius + offset_x,
    center_y + radius + offset_y
], fill=color)

脉动/心跳

节奏性缩放对象大小：

python

import math

# 平滑脉动
t = frame_index / num_frames
scale = 1.0 + 0.2 * math.sin(t * 2 * math.pi)

# 心跳：两次快速脉动然后暂停
# 调整正弦波实现

弹跳

对象下落并弹跳：

python

from core.easing import interpolate

# 着陆使用 bounce_out
y = interpolate(start=0, end=100, t=t, easing='bounce_out')

# 下落使用 ease_in（加速）
y = interpolate(start=0, end=100, t=t, easing='ease_in')

旋转

围绕中心旋转对象：

python

from PIL import Image

# 旋转图像
rotated = image.rotate(angle, resample=Image.BICUBIC)

# 摆动：用正弦波替代线性角度
angle = math.sin(t * 2 * math.pi) * 15  # 摆动 15 度

淡入/淡出

逐渐出现或消失：

python

from PIL import Image

# 使用 RGBA 图像
frame = Image.new('RGBA', (128, 128), (0, 0, 0, 0))

# 或使用混合
blended = Image.blend(image1, image2, alpha)

# 淡入：alpha 从 0 到 1
# 淡出：alpha 从 1 到 0

滑动

从屏幕外移动到位置：

python

from core.easing import interpolate

# 起始位置：帧边界外
# 结束位置：目标位置
x = interpolate(start=-100, end=64, t=t, easing='ease_out')

# 过冲效果
x = interpolate(start=-100, end=64, t=t, easing='back_out')

缩放

缩放和定位产生缩放效果：

python

# 放大：从 0.1 缩放到 2.0，裁剪中心
# 缩小：从 2.0 缩放到 1.0

爆炸/粒子爆发

创建向外辐射的粒子：

python

import random
import math

particles = []
for _ in range(20):
    angle = random.uniform(0, 2 * math.pi)
    speed = random.uniform(2, 5)
    particles.append({
        'x': center_x,
        'y': center_y,
        'vx': math.cos(angle) * speed,
        'vy': math.sin(angle) * speed,
        'alpha': 255
    })

# 每帧更新
for p in particles:
    p['x'] += p['vx']
    p['y'] += p['vy']
    p['vy'] += 0.2  # 重力
    p['alpha'] = max(0, p['alpha'] - 10)  # 淡出

优化策略

仅在被要求减小文件大小时实施：

方法	说明
减少帧数	降低 FPS（10 而非 20）或缩短时长
减少颜色	`num_colors=48` 而非 128
减小尺寸	128x128 而非 480x480
移除重复帧	`remove_duplicates=True`
表情模式	`optimize_for_emoji=True` 自动优化

python

# 表情 GIF 最大优化
builder.save(
    'emoji.gif',
    num_colors=48,
    optimize_for_emoji=True,
    remove_duplicates=True
)

完整示例：弹跳球

python

from core.gif_builder import GIFBuilder
from core.easing import interpolate
from core.frame_composer import create_gradient_background
from PIL import Image, ImageDraw

# 创建构建器
builder = GIFBuilder(width=128, height=128, fps=15)

num_frames = 15
ball_radius = 15

for i in range(num_frames):
    # 创建渐变背景
    frame = create_gradient_background(128, 128, (135, 206, 250), (255, 255, 255))
    draw = ImageDraw.Draw(frame)

    # 计算弹跳位置
    t = i / (num_frames - 1)
    y = interpolate(start=20, end=100 - ball_radius, t=t, easing='bounce_out')

    # 绘制球
    x = 64
    draw.ellipse([
        x - ball_radius, y - ball_radius,
        x + ball_radius, y + ball_radius
    ], fill=(255, 100, 100), outline=(200, 50, 50), width=2)

    # 添加高光
    highlight_radius = ball_radius // 3
    draw.ellipse([
        x - ball_radius//2 - highlight_radius,
        y - ball_radius//2 - highlight_radius,
        x - ball_radius//2 + highlight_radius,
        y - ball_radius//2 + highlight_radius
    ], fill=(255, 200, 200))

    builder.add_frame(frame)

# 保存优化的 GIF
builder.save('bouncing_ball.gif', num_colors=48, optimize_for_emoji=True)
print("弹跳球 GIF 创建完成！")

依赖

bash

pip install pillow imageio numpy

总结

Slack GIF Creator Skill 提供了创建 Slack 优化 GIF 的完整工具包：

Slack 要求：

表情：128x128，< 3秒
消息：480x480
FPS：10-30，颜色：48-128

可用工具：

GIFBuilder：组装和优化
Validators：验证 Slack 兼容性
Easing：平滑动画
Frame Helpers：便捷函数

动画概念：抖动、脉动、弹跳、旋转、淡入淡出、滑动、缩放、爆炸

核心原则：

使用 PIL 基元绘制
让图形看起来精致，不是业余的
组合多个概念创造有趣效果
验证后再分享到 Slack

发挥创意！组合概念（弹跳 + 旋转、脉动 + 滑动等），充分利用 PIL 的能力。

7.16 Slack GIF Creator Skill - Slack GIF 创建器 ​

概述 ​

适用场景 ​

Slack 要求 ​

尺寸规格 ​

参数设置 ​

核心工作流程 ​

绘制图形 ​

处理用户上传的图片 ​

从头绘制 ​

让图形看起来更好 ​

可用工具 ​

GIFBuilder (core.gif_builder) ​

验证器 (core.validators) ​

缓动函数 (core.easing) ​

帧辅助函数 (core.frame_composer) ​

动画概念 ​

抖动/振动 ​

脉动/心跳 ​

弹跳 ​

旋转 ​

淡入/淡出 ​

滑动 ​

缩放 ​

爆炸/粒子爆发 ​

优化策略 ​

完整示例：弹跳球 ​

依赖 ​

总结 ​

7.16 Slack GIF Creator Skill - Slack GIF 创建器

概述

适用场景

Slack 要求

尺寸规格

参数设置

核心工作流程

绘制图形

处理用户上传的图片

从头绘制

让图形看起来更好

可用工具

GIFBuilder (`core.gif_builder`)

验证器 (`core.validators`)

缓动函数 (`core.easing`)

帧辅助函数 (`core.frame_composer`)

动画概念

抖动/振动

脉动/心跳

弹跳

旋转

淡入/淡出

滑动

缩放

爆炸/粒子爆发

优化策略

完整示例：弹跳球

依赖

总结