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

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)

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)

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)  # 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)

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

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

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

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,         # Solid color background
    create_gradient_background,  # Vertical gradient
    draw_circle,                # Helper for circles
    draw_text,                  # Simple text rendering
    draw_star                   # 5-pointed 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
```
从128改为48
缩小尺寸 - 从480x480改为128x128
移除重复帧 - 在save()中设置
```
remove_duplicates=True
```
表情模式 - 设置
```
optimize_for_emoji=True
```
自动优化

python

undefined

Maximum optimization for emoji

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. Create builder

2. Generate frames

2. Generate frames

3. Save with optimization

3. Save with optimization

Drawing Graphics

图形绘制

Working with User-Uploaded Images

处理用户上传的图片

Use directly, or just as reference for colors/style

Use directly, or just as reference for colors/style

Drawing from Scratch

从零开始绘制

Circles/ovals

Circles/ovals

Stars, triangles, any polygon

Stars, triangles, any polygon

Lines

Lines

Rectangles

Rectangles

Making Graphics Look Good

让图形更美观

Available Utilities

可用工具

GIFBuilder (core.gif_builder)

GIFBuilder（core.gif_builder）

Validators (core.validators)

验证器（core.validators）

Detailed validation

Detailed validation

Quick check

Quick check

Easing Functions (core.easing)

缓动函数（core.easing）

Progress from 0.0 to 1.0

Progress from 0.0 to 1.0

Apply easing

Apply easing

Available: linear, ease_in, ease_out, ease_in_out,

Available: 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

Maximum optimization for emoji

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`
）