slack-gif-creator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Slack GIF Creator

Slack GIF 制作工具包

A toolkit providing utilities and knowledge for creating animated GIFs optimized for Slack.

一个提供实用工具和相关知识的工具集，用于创建针对Slack优化的动画GIF。

Slack Requirements

Slack 要求

Dimensions:

Emoji GIFs: 128x128 (recommended)
Message GIFs: 480x480

Parameters:

FPS: 10-30 (lower is smaller file size)
Colors: 48-128 (fewer = smaller file size)
Duration: Keep under 3 seconds for emoji GIFs

尺寸：

表情GIF：128x128（推荐）
消息GIF：480x480

参数：

FPS：10-30（数值越低，文件体积越小）
颜色数：48-128（数量越少，文件体积越小）
时长：表情GIF需控制在3秒以内

Core Workflow

核心工作流

python

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

python

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

1. Create builder

1. 创建构建器

builder = GIFBuilder(width=128, height=128, fps=10)

2. Generate frames

2. 生成帧

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)

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

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

builder.add_frame(frame)

3. Save with optimization

3. 带优化保存

builder.save('output.gif', num_colors=48, optimize_for_emoji=True)

undefined

builder.save('output.gif', num_colors=48, optimize_for_emoji=True)

undefined

Drawing Graphics

图形绘制

Working with User-Uploaded Images

处理用户上传的图片

If a user uploads an image, consider whether they want to:

Use it directly (e.g., "animate this", "split this into frames")
Use it as inspiration (e.g., "make something like this")

Load and work with images using PIL:

python

from PIL import Image

uploaded = Image.open('file.png')

如果用户上传了图片，需判断他们的需求：

直接使用（例如：“将此做成动画”“将此拆分帧”）
作为灵感参考（例如：“做一个类似这样的”）

使用PIL加载并处理图片：

python

from PIL import Image

uploaded = Image.open('file.png')

Use directly, or just as reference for colors/style

直接使用，或仅作为颜色/风格参考

undefined

undefined

Drawing from Scratch

从零开始绘制

When drawing graphics from scratch, use PIL ImageDraw primitives:

python

from PIL import ImageDraw

draw = ImageDraw.Draw(frame)

从零开始绘制图形时，使用PIL ImageDraw的基础图形：

python

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)


**Don't use:** Emoji fonts (unreliable across platforms) or assume pre-packaged graphics exist in this skill.

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


**请勿使用**：表情字体（跨平台显示不可靠），或假设此工具中存在预封装的图形资源。

Making Graphics Look Good

提升图形质感

Graphics should look polished and creative, not basic. Here's how:

Use thicker lines - Always set

width=2

or higher for outlines and lines. Thin lines (width=1) look choppy and amateurish.

Add visual depth:

Use gradients for backgrounds (
```
create_gradient_background
```
)
Layer multiple shapes for complexity (e.g., a star with a smaller star inside)

Make shapes more interesting:

Don't just draw a plain circle - add highlights, rings, or patterns
Stars can have glows (draw larger, semi-transparent versions behind)
Combine multiple shapes (stars + sparkles, circles + rings)

Pay attention to colors:

Use vibrant, complementary colors
Add contrast (dark outlines on light shapes, light outlines on dark shapes)
Consider the overall composition

For complex shapes (hearts, snowflakes, etc.):

Use combinations of polygons and ellipses
Calculate points carefully for symmetry
Add details (a heart can have a highlight curve, snowflakes have intricate branches)

Be creative and detailed! A good Slack GIF should look polished, not like placeholder graphics.

图形应精致且有创意，而非基础简陋。以下是优化技巧：

使用更粗的线条 - 轮廓和线条的

width

参数始终设置为2或更大。细线条（width=1）会显得粗糙且不专业。

增加视觉深度：

使用渐变背景（
```
create_gradient_background
```
）
叠加多个形状增加复杂度（例如：在大星形内部绘制小星形）

让形状更有趣：

不要只画纯色圆形 - 添加高光、圆环或图案
星形可以添加发光效果（在后方绘制更大的半透明版本）
组合多种形状（星形+闪光、圆形+圆环）

注意色彩搭配：

使用鲜艳的互补色
增加对比度（浅色形状配深色轮廓，深色形状配浅色轮廓）
考虑整体构图

处理复杂形状（心形、雪花等）：

组合多边形和椭圆形来绘制
仔细计算点的位置以保证对称性
添加细节（心形可添加高光曲线，雪花可绘制复杂分支）

发挥创意并注重细节！优质的Slack GIF应显得精致，而非占位符图形。

Available Utilities

可用实用工具

GIFBuilder (

core.gif_builder

)

GIFBuilder（

core.gif_builder

）

Assembles frames and optimizes for Slack:

python

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)

组装帧并针对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)

Validators (

core.validators

)

验证器（

core.validators

）

Check if GIF meets Slack requirements:

python

from core.validators import validate_gif, is_slack_ready

检查GIF是否符合Slack要求：

python

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!")

undefined

if is_slack_ready('my.gif'): print("符合要求！")

undefined

Easing Functions (

core.easing

)

缓动函数（

core.easing

）

Smooth motion instead of linear:

python

from core.easing import interpolate

实现平滑运动而非线性运动：

python

from core.easing import interpolate

Progress from 0.0 to 1.0

进度从0.0到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,

可用类型：linear, ease_in, ease_out, ease_in_out,

bounce_out, elastic_out, back_out

undefined

undefined

Frame Helpers (

core.frame_composer

)

帧辅助工具（

core.frame_composer

）

Convenience functions for common needs:

python

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
)

满足常见需求的便捷函数：

python

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

Animation Concepts

动画概念

Shake/Vibrate

抖动/震动

Offset object position with oscillation:

Use
```
math.sin()
```
or
```
math.cos()
```
with frame index
Add small random variations for natural feel
Apply to x and/or y position

通过振荡偏移对象位置：

使用
```
math.sin()
```
或
```
math.cos()
```
结合帧索引
添加小幅度随机变化以模拟自然效果
应用于x轴和/或y轴位置

Pulse/Heartbeat

脉冲/心跳

Scale object size rhythmically:

Use
```
math.sin(t * frequency * 2 * math.pi)
```
for smooth pulse
For heartbeat: two quick pulses then pause (adjust sine wave)
Scale between 0.8 and 1.2 of base size

有节奏地缩放对象大小：

使用
```
math.sin(t * frequency * 2 * math.pi)
```
实现平滑脉冲
心跳效果：两次快速脉冲后暂停（调整正弦波）
缩放范围为基础大小的0.8到1.2倍

Bounce

弹跳

Object falls and bounces:

Use
```
interpolate()
```
with
```
easing='bounce_out'
```
for landing
Use
```
easing='ease_in'
```
for falling (accelerating)
Apply gravity by increasing y velocity each frame

对象下落并弹跳：

使用
```
interpolate()
```
搭配
```
easing='bounce_out'
```
实现落地效果
使用
```
easing='ease_in'
```
实现下落（加速）
每帧增加y轴速度模拟重力

Spin/Rotate

旋转

Rotate object around center:

PIL:

image.rotate(angle, resample=Image.BICUBIC)

For wobble: use sine wave for angle instead of linear

围绕中心旋转对象：

PIL方法：

image.rotate(angle, resample=Image.BICUBIC)

摇摆效果：使用正弦波控制角度而非线性变化

Fade In/Out

淡入/淡出

Gradually appear or disappear:

Create RGBA image, adjust alpha channel
Or use
```
Image.blend(image1, image2, alpha)
```
Fade in: alpha from 0 to 1
Fade out: alpha from 1 to 0

逐渐显示或隐藏对象：

创建RGBA图像，调整alpha通道
或使用
```
Image.blend(image1, image2, alpha)
```
淡入：alpha从0到1
淡出：alpha从1到0

Slide

滑动

Move object from off-screen to position:

Start position: outside frame bounds
End position: target location
Use
```
interpolate()
```
with
```
easing='ease_out'
```
for smooth stop
For overshoot: use
```
easing='back_out'
```

对象从屏幕外移动到目标位置：

起始位置：屏幕边界外
结束位置：目标位置
使用
```
interpolate()
```
搭配
```
easing='ease_out'
```
实现平滑停止
过冲效果：使用
```
easing='back_out'
```

Zoom

缩放

Scale and position for zoom effect:

Zoom in: scale from 0.1 to 2.0, crop center
Zoom out: scale from 2.0 to 1.0
Can add motion blur for drama (PIL filter)

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

放大：从0.1倍缩放到2.0倍，裁剪中心区域
缩小：从2.0倍缩放到1.0倍
可添加运动模糊增强效果（PIL滤镜）

Explode/Particle Burst

爆炸/粒子爆发

Create particles radiating outward:

Generate particles with random angles and velocities
Update each particle:
```
x += vx
```
,
```
y += vy
```
Add gravity:
```
vy += gravity_constant
```
Fade out particles over time (reduce alpha)

创建向外辐射的粒子：

生成带有随机角度和速度的粒子
更新每个粒子位置：
```
x += vx
```
,
```
y += vy
```
添加重力：
```
vy += gravity_constant
```
随时间淡出粒子（降低alpha值）

Optimization Strategies

优化策略

Only when asked to make the file size smaller, implement a few of the following methods:

Fewer frames - Lower FPS (10 instead of 20) or shorter duration
Fewer colors -
```
num_colors=48
```
instead of 128
Smaller dimensions - 128x128 instead of 480x480
Remove duplicates -
```
remove_duplicates=True
```
in save()
Emoji mode -
```
optimize_for_emoji=True
```
auto-optimizes

python

undefined

仅当用户要求减小文件体积时，可采用以下几种方法：

减少帧数 - 降低FPS（从20改为10）或缩短时长
减少颜色数 - 使用
```
num_colors=48
```
而非128
缩小尺寸 - 使用128x128而非480x480
移除重复帧 - 在save()中设置
```
remove_duplicates=True
```
表情模式 - 设置
```
optimize_for_emoji=True
```
自动优化

python

undefined

Maximum optimization for emoji

表情GIF的极致优化

builder.save( 'emoji.gif', num_colors=48, optimize_for_emoji=True, remove_duplicates=True )

undefined

builder.save( 'emoji.gif', num_colors=48, optimize_for_emoji=True, remove_duplicates=True )

undefined

Philosophy

设计理念

This skill provides:

Knowledge: Slack's requirements and animation concepts
Utilities: GIFBuilder, validators, easing functions
Flexibility: Create the animation logic using PIL primitives

It does NOT provide:

Rigid animation templates or pre-made functions
Emoji font rendering (unreliable across platforms)
A library of pre-packaged graphics built into the skill

Note on user uploads: This skill doesn't include pre-built graphics, but if a user uploads an image, use PIL to load and work with it - interpret based on their request whether they want it used directly or just as inspiration.

Be creative! Combine concepts (bouncing + rotating, pulsing + sliding, etc.) and use PIL's full capabilities.

此工具提供：

知识：Slack的要求和动画概念
实用工具：GIFBuilder、验证器、缓动函数
灵活性：使用PIL基础图形自定义动画逻辑

此工具不提供：

僵化的动画模板或预制函数
表情字体渲染（跨平台显示不可靠）
内置的预封装图形库

关于用户上传内容的说明：此工具不包含预制图形，但如果用户上传了图片，可使用PIL加载并处理 - 根据用户的请求判断是直接使用该图片还是仅作为灵感参考。

发挥创意！组合多种动画概念（弹跳+旋转、脉冲+滑动等），充分利用PIL的全部功能。

Dependencies

依赖安装

bash

pip install pillow imageio numpy

bash

pip install pillow imageio numpy

slack-gif-creator

Original

Translation

Slack GIF Creator

Slack GIF 制作工具包

Slack Requirements

Slack 要求

Core Workflow

核心工作流

1. Create builder

1. 创建构建器

2. Generate frames

2. 生成帧

3. Save with optimization

3. 带优化保存

Drawing Graphics

图形绘制

Working with User-Uploaded Images

处理用户上传的图片

Use directly, or just as reference for colors/style

直接使用，或仅作为颜色/风格参考

Drawing from Scratch

从零开始绘制

Circles/ovals

圆形/椭圆形

Stars, triangles, any polygon

星形、三角形及任意多边形

Lines

线条

Rectangles

矩形

Making Graphics Look Good

提升图形质感

Available Utilities

可用实用工具

GIFBuilder (core.gif_builder)

GIFBuilder（core.gif_builder）

Validators (core.validators)

验证器（core.validators）

Detailed validation

详细验证

Quick check

快速检查

Easing Functions (core.easing)

缓动函数（core.easing）

Progress from 0.0 to 1.0

进度从0.0到1.0

Apply easing

应用缓动

Available: linear, ease_in, ease_out, ease_in_out,

可用类型：linear, ease_in, ease_out, ease_in_out,

bounce_out, elastic_out, back_out

bounce_out, elastic_out, back_out

Frame Helpers (core.frame_composer)

帧辅助工具（core.frame_composer）

Animation Concepts

动画概念

Shake/Vibrate

抖动/震动

Pulse/Heartbeat

脉冲/心跳

Bounce

弹跳

Spin/Rotate

旋转

Fade In/Out

淡入/淡出

Slide

滑动

Zoom

缩放

Explode/Particle Burst

爆炸/粒子爆发

Optimization Strategies

优化策略

Maximum optimization for emoji

表情GIF的极致优化

Philosophy

设计理念

Dependencies

GIFBuilder (
`core.gif_builder`
)

GIFBuilder（
`core.gif_builder`
）

Validators (
`core.validators`
)

验证器（
`core.validators`
）

Easing Functions (
`core.easing`
)

缓动函数（
`core.easing`
）

Frame Helpers (
`core.frame_composer`
)

帧辅助工具（
`core.frame_composer`
）