mcpField
S
slack-gif-creator

slack-gif-creator

github.com/anthropics创意与媒体184.5k76.3k 次安装今天更新
代码仓库

关于 slack-gif-creator

用于制作适配 Slack 的动画 GIF 的工具技能。它结合 Python 工具与图形绘制、运动效果指南,可构建和验证 GIF 帧并进行优化。

主要功能

  1. 01从图像帧构建 GIF
  2. 02验证 Slack GIF 要求
  3. 03帧合成辅助工具
  4. 04运动缓动函数
  5. 05GIF 文件优化选项

适用场景

  1. 01制作 Slack 表情 GIF
  2. 02为上传的图片添加动画
  3. 03绘制自定义动画图形
  4. 04分享前检查 GIF

安装

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

$npx skills add https://github.com/anthropics/skills --skill slack-gif-creator

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

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

LICENSE.txt
requirements.txt
core/
easing.py
frame_composer.py
gif_builder.py
validators.py

详细介绍

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