Back to Details

animated-message-composer

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平台要求

Emoji GIFs (Slack emoji uploads):
  • Max size: 64 KB
  • Dimensions: 128x128 recommended (square)
  • FPS: 10-12
  • Colors: 32-48
  • Duration: 1-2s
Message GIFs:
  • Max size: ~2 MB
  • Dimensions: 480x480 typical
  • FPS: 15-20
  • Colors: 128-256
  • Duration: 2-5s
表情动图（Slack表情上传）：
  • 最大文件大小：64 KB
  • 尺寸：推荐128x128像素（正方形）
  • 帧率（FPS）：10-12
  • 颜色数：32-48
  • 时长：1-2秒
消息动图：
  • 最大文件大小：约2 MB
  • 尺寸：典型为480x480像素
  • 帧率（FPS）：15-20
  • 颜色数：128-256
  • 时长：2-5秒

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

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

2. Generate frames

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

3. Save with optimization

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

Optional shortcut: use animation templates in `templates/` to generate frames quickly:
```python
from templates.shake import create_shake_animation

frames = create_shake_animation(
    object_type='circle',
    object_data={'radius': 30, 'color': (100, 150, 255)},
    num_frames=20,
    direction='both'
)
builder.add_frames(frames)
builder.save('output.gif', num_colors=48, optimize_for_emoji=True)

可选快捷方式：使用`templates/`目录下的动画模板快速生成帧：
```python
from templates.shake import create_shake_animation

frames = create_shake_animation(
    object_type='circle',
    object_data={'radius': 30, 'color': (100, 150, 255)},
    num_frames=20,
    direction='both'
)
builder.add_frames(frames)

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

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

Circles/ovals

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

Stars, triangles, any polygon

Stars, triangles, any polygon

points = [(x1, y1), (x2, y2), (x3, y3), ...] draw.polygon(points, 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)

Lines

Lines

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

Rectangles

Rectangles

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

**Avoid relying solely on emoji fonts**: they are platform-specific. If you use `draw_emoji` or `draw_emoji_enhanced`, expect rendering differences and be ready to adjust with shapes or text.
draw.rectangle([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)

**避免仅依赖表情字体**：这些字体是平台相关的。如果使用`draw_emoji`或`draw_emoji_enhanced`方法，要注意不同平台的渲染差异，并准备好使用图形或文本进行调整。

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.
图形应该看起来精致且有创意，而不是基础简陋。方法如下：
使用更粗的线条 - 轮廓和线条的宽度始终设置为2或更大。细线条（宽度1）会显得粗糙且不够专业。
增加视觉层次感：
  • 为背景使用渐变（使用
    create_gradient_background
    方法）
  • 叠加多个图形增加复杂度（例如，在星星内部再画一个更小的星星）
让图形更有趣：
  • 不要只画普通的圆形 - 添加高光、圆环或图案
  • 星星可以添加光晕（在后面绘制更大的半透明版本）
  • 组合多个图形（星星+闪光，圆形+圆环）
注意色彩搭配：
  • 使用鲜艳的互补色
  • 增加对比度（浅色图形用深色轮廓，深色图形用浅色轮廓）
  • 考虑整体构图
对于复杂图形（心形、雪花等）：
  • 结合使用多边形和椭圆
  • 仔细计算点的位置以保证对称性
  • 添加细节（心形可以加高光曲线，雪花要有复杂的分支）
发挥创意并注重细节！优质的Slack动图应该看起来精致，而不是占位符图形。

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,
    check_slack_size,
    validate_dimensions
)
检查动图是否符合Slack平台要求：
python
from core.validators import (
    validate_gif,
    is_slack_ready,
    check_slack_size,
    validate_dimensions
)

Detailed validation

Detailed validation

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

Quick check

Quick check

if is_slack_ready('my.gif'): print("Ready!")
if is_slack_ready('my.gif'): print("Ready!")

Focused checks

Focused checks

passes, info = check_slack_size('my.gif', is_emoji=True) passes, info = validate_dimensions(128, 128, is_emoji=True)
undefined
passes, info = check_slack_size('my.gif', is_emoji=True) passes, info = validate_dimensions(128, 128, is_emoji=True)
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

Progress from 0.0 to 1.0

t = i / (num_frames - 1)
t = i / (num_frames - 1)

Apply easing

Apply easing

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

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

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_rectangle,             # Helper for rectangles
    draw_line,                  # Helper for lines
    draw_text,                  # Simple text rendering
    draw_emoji,                 # Emoji rendering (platform-dependent)
    draw_star                   # 5-pointed star
)
Other helpers include 
draw_emoji_enhanced
, 
draw_circle_with_shadow
, 
draw_rounded_rectangle
, and 
add_vignette
.
满足常见需求的便捷函数：
python
from core.frame_composer import (
    create_blank_frame,         # Solid color background
    create_gradient_background,  # Vertical gradient
    draw_circle,                # Helper for circles
    draw_rectangle,             # Helper for rectangles
    draw_line,                  # Helper for lines
    draw_text,                  # Simple text rendering
    draw_emoji,                 # Emoji rendering (platform-dependent)
    draw_star                   # 5-pointed star
)
其他辅助工具包括
draw_emoji_enhanced
、
draw_circle_with_shadow
、
draw_rounded_rectangle
和
add_vignette
。

Color Palettes (
core.color_palettes
)

调色板（
core.color_palettes
）

Hand-picked palettes and helpers for readable colors:
python
from core.color_palettes import get_palette, get_text_color_for_background

palette = get_palette('vibrant')
text_color = get_text_color_for_background(palette['background'])
精心挑选的调色板和易读色彩辅助工具：
python
from core.color_palettes import get_palette, get_text_color_for_background

palette = get_palette('vibrant')
text_color = get_text_color_for_background(palette['background'])

Typography (
core.typography
)

排版工具（
core.typography
）

High-quality outlined or shadowed text:
python
from core.typography import draw_text_with_outline

draw_text_with_outline(frame, "SALE!", position=(240, 240), font_size=48, centered=True)
高质量的描边或阴影文本：
python
from core.typography import draw_text_with_outline

draw_text_with_outline(frame, "SALE!", position=(240, 240), font_size=48, centered=True)

Visual Effects (
core.visual_effects
)

视觉效果（
core.visual_effects
）

Particles, blur, impacts, and motion effects:
python
from core.visual_effects import ParticleSystem

particles = ParticleSystem()
particles.emit(240, 240, count=20)
粒子、模糊、碰撞和运动效果：
python
from core.visual_effects import ParticleSystem

particles = ParticleSystem()
particles.emit(240, 240, count=20)

Animation Templates (
templates/
)

动画模板（
templates/
）

Ready-made animations (shake, bounce, spin, zoom, slide, fade, flip, explode, etc.). Use them to generate frames and then pass to 
GIFBuilder
.
现成的动画模板（摇晃、弹跳、旋转、缩放、滑动、淡入淡出、翻转、爆炸等）。 使用这些模板生成帧，然后传递给
GIFBuilder
。

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:
  1. Fewer frames - Lower FPS (10 instead of 20) or shorter duration
  2. Fewer colors - 
    num_colors=48
    instead of 128
  3. Smaller dimensions - 128x128 instead of 480x480
  4. Remove duplicates - 
    remove_duplicates=True
    in save()
  5. Emoji mode - 
    optimize_for_emoji=True
    auto-optimizes
python
undefined
仅当用户要求减小文件大小时，才采用以下几种方法：
  1. 减少帧数 - 降低帧率（从20改为10）或缩短时长
  2. 减少颜色数 - 将
    num_colors
    从128改为48
  3. 缩小尺寸 - 从480x480改为128x128
  4. 移除重复帧 - 在
    save()
    方法中设置
    remove_duplicates=True
  5. 表情模式 - 设置
    optimize_for_emoji=True
    自动优化
python
undefined

Maximum optimization for emoji

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