mcpField
S
slack-gif-creator

slack-gif-creator

github.com/mavcui创意与媒体19361 次安装33 周前更新
代码仓库

关于 slack-gif-creator

为编码 Agent 提供制作 Slack 动画 GIF 的知识与 Python 工具,涵盖帧组装、动画辅助和 Slack 规格校验;图形需使用 PIL 自行绘制。

主要功能

  1. 01组装并优化 GIF 帧
  2. 02验证 Slack GIF 规格
  3. 03提供缓动与帧绘制辅助
  4. 04说明动画效果实现方法

适用场景

  1. 01制作 Slack 表情 GIF
  2. 02将上传图片制作为动画
  3. 03检查 GIF 是否符合 Slack 要求

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/mavcui/agent-skills-hunter --skill slack-gif-creator

安装后在 Claude Code 中输入/slack-gif-creator确认已加载。

详细介绍

Slack GIF 创建器

一个提供工具和知识的工具包,用于创建针对 Slack 优化的动态 GIF。

Slack 要求

尺寸:

  • 表情 GIF:128x128(推荐)
  • 消息 GIF:480x480

参数:

  • FPS:10-30(越低文件越小)
  • 颜色数:48-128(越少文件越小)
  • 时长:表情 GIF 请保持在 3 秒以内

核心工作流

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

# 1. Create builder
builder = GIFBuilder(width=128, height=128, fps=10)

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

    # Draw your animation using PIL primitives
    # (circles, polygons, lines, etc.)

    builder.add_frame(frame)

# 3. Save with optimization
builder.save('output.gif', num_colors=48, optimize_for_emoji=True)

绘制图形

处理用户上传的图片

如果用户上传了图片,请考虑他们想要的是:

  • 直接使用(例如"让这个动起来"、"把这个拆分成帧")
  • 作为灵感参考(例如"做一个类似这样的")

使用 PIL 加载并处理图片:

from PIL import Image

uploaded = Image.open('file.png')
# Use directly, or just as reference for colors/style
从零开始绘制

从零绘制图形时,使用 PIL ImageDraw 基本图元:

from PIL import ImageDraw

draw = ImageDraw.Draw(frame)

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

# Stars, triangles, any polygon
points = [(x1, y1), (x2, y2), (x3, y3), ...]
draw.polygon(points, fill=(r, g, b), outline=(r, g, b), width=3)

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

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

请勿使用: 表情字体(在不同平台上不可靠),也不要假设本技能中存在预先打包的图形。

让图形更精致

图形应当精致且富有创意,而不是简陋。方法如下:

使用更粗的线条:轮廓和线条始终设置 width=2 或更大。过细的线条(width=1)看起来断续、显得业余。

增加视觉层次:

  • 背景使用渐变(create_gradient_background)
  • 叠加多层形状以增加复杂度(例如一个星星内部套一个更小的星星)

让形状更有趣:

  • 不要只画一个普通的圆,可以加入高光、环形或图案
  • 星星可以添加光晕(在后方绘制更大的半透明版本)
  • 组合多个形状(星星加闪光点、圆形加圆环)

注意色彩:

  • 使用鲜艳且互补的颜色
  • 增加对比(浅色形状加深色轮廓,深色形状加浅色轮廓)
  • 考虑整体构图

复杂形状(心形、雪花等):

  • 组合使用多边形和椭圆
  • 仔细计算点位以保证对称
  • 添加细节(心形可以加入高光弧线,雪花可以有复杂的分支)

要有创意、注重细节!优秀的 Slack GIF 应当精致,而不是像占位图形。

可用工具

GIFBuilder(core.gif_builder)

组装帧并针对 Slack 进行优化:

builder = GIFBuilder(width=128, height=128, fps=10)
builder.add_frame(frame)  # Add PIL Image
builder.add_frames(frames)  # Add list of frames
builder.save('out.gif', num_colors=48, optimize_for_emoji=True, remove_duplicates=True)
校验器(core.validators)

检查 GIF 是否满足 Slack 要求:

from core.validators import validate_gif, is_slack_ready

# Detailed validation
passes, info = validate_gif('my.gif', is_emoji=True, verbose=True)

# Quick check
if is_slack_ready('my.gif'):
    print("Ready!")
缓动函数(core.easing)

实现平滑运动,替代线性运动:

from core.easing import interpolate

# Progress from 0.0 to 1.0
t = i / (num_frames - 1)

# Apply easing
y = interpolate(start=0, end=400, t=t, easing='ease_out')

# Available: linear, ease_in, ease_out, ease_in_out,
#           bounce_out, elastic_out, back_out
帧辅助函数(core.frame_composer)

针对常见需求的便捷函数:

from core.frame_composer import (
    create_blank_frame,         # Solid color background
    create_gradient_background,  # Vertical gradient
    draw_circle,                # Helper for circles
    draw_text,                  # Simple text rendering
    draw_star                   # 5-pointed star
)

动画概念

抖动/震动

通过振荡偏移对象位置:

  • 使用 math.sin() 或 math.cos() 配合帧索引
  • 加入小幅随机变化以获得自然的效果
  • 应用于 x 和/或 y 坐标
脉动/心跳

有节奏地缩放对象尺寸:

  • 使用 math.sin(t * frequency * 2 * math.pi) 实现平滑脉动
  • 心跳效果:快速跳动两次后停顿(调整正弦波)
  • 在基础尺寸的 0.8 到 1.2 倍之间缩放
弹跳

对象下落并反弹:

  • 落地时使用 interpolate() 配合 easing='bounce_out'
  • 下落时使用 easing='ease_in'(加速下落)
  • 每帧增加 y 方向速度以模拟重力
旋转

让对象绕中心旋转:

  • PIL:image.rotate(angle, resample=Image.BICUBIC)
  • 摇摆效果:角度使用正弦波而非线性变化
淡入/淡出

逐渐出现或消失:

  • 创建 RGBA 图像,调整 alpha 通道
  • 或使用 Image.blend(image1, image2, alpha)
  • 淡入:alpha 从 0 变化到 1
  • 淡出:alpha 从 1 变化到 0
滑入

将对象从画面外移动到指定位置:

  • 起始位置:画面边界之外
  • 结束位置:目标位置
  • 使用 interpolate() 配合 easing='ease_out' 实现平滑停止
  • 若需回弹过冲:使用 easing='back_out'
缩放

通过缩放和定位实现变焦效果:

  • 放大:尺寸从 0.1 缩放到 2.0,并裁剪中心
  • 缩小:尺寸从 2.0 缩放到 1.0
  • 可以添加运动模糊以增强戏剧效果(PIL 滤镜)
爆炸/粒子迸发

创建向外辐射的粒子:

  • 生成具有随机角度和速度的粒子
  • 更新每个粒子:x += vx,y += vy
  • 添加重力:vy += gravity_constant
  • 随时间逐渐淡出粒子(降低 alpha)

优化策略

仅在被要求减小文件大小时,才实施以下方法中的若干种:

  1. 减少帧数 - 降低 FPS(例如 20 改为 10)或缩短时长
  2. 减少颜色 - 使用 num_colors=48,而非 128
  3. 缩小尺寸 - 使用 128x128,而非 480x480
  4. 移除重复帧 - 在 save() 中设置 remove_duplicates=True
  5. 表情符号模式 - optimize_for_emoji=True 会自动优化
# Maximum optimization for emoji
builder.save(
    'emoji.gif',
    num_colors=48,
    optimize_for_emoji=True,
    remove_duplicates=True
)

设计理念

此技能提供:

  • 知识:Slack 的要求与动画概念
  • 工具:GIFBuilder、校验器、缓动函数
  • 灵活性:使用 PIL 基本能力自行编写动画逻辑

它不提供:

  • 僵化的动画模板或预制函数
  • 表情符号字体渲染(在各平台上不可靠)
  • 内置于技能中的预打包图形库

关于用户上传的说明:此技能不包含预制图形,但如果用户上传了图片,请使用 PIL 加载并处理它。是直接使用还是仅作为灵感来源,应根据用户的请求来判断。

发挥创意!可以组合不同概念(如弹跳加旋转、脉动加滑动等),并充分利用 PIL 的全部能力。

依赖项

pip install pillow imageio numpy

评论

支持 Markdown