Анимированные GIF для Slack

Текст

---
name: slack-gif-creator
description: Знания и утилиты для создания анимированных GIF, оптимизированных для Slack. Даёт ограничения, инструменты проверки и приёмы анимации. Используй, когда пользователь просит анимированные GIF для Slack, например «сделай мне GIF, где X делает Y, для Slack».
license: Complete terms in LICENSE.txt
---

Slack GIF Creator

Набор утилит и знаний для создания анимированных GIF, оптимизированных для Slack.

Требования 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)
• Накладывай друг на друга несколько фигур для сложности (например, звезду с маленькой звездой внутри)

Делай фигуры интереснее:

• Не рисуй просто круг: добавь блики, кольца или узоры
• У звёзд может быть свечение (нарисуй позади более крупные полупрозрачные копии)
• Комбинируй несколько фигур (звёзды и искры, круги и кольца)

Следи за цветами:

• Бери яркие, дополняющие друг друга цвета
• Добавляй контраст (тёмные контуры на светлых фигурах, светлые контуры на тёмных)
• Думай о композиции в целом

Для сложных фигур (сердца, снежинки и т. п.):

• Используй сочетания многоугольников и эллипсов
• Точно рассчитывай точки, чтобы сохранить симметрию
• Добавляй детали (у сердца может быть изогнутый блик, у снежинок — сложные ответвления)

Будь изобретателен и внимателен к деталям! Хороший GIF для Slack должен выглядеть аккуратно, а не как временная заглушка.

Доступные утилиты

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-изображение и меняй альфа-канал
• Или используй 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 (10 вместо 20) или сократи длительность
2. Меньше цветов — num_colors=48 вместо 128
3. Меньше размеры — 128x128 вместо 480x480
4. Убери дубликаты — remove_duplicates=True в save()
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

Перевод: iiuniversitet. Оригинал: https://github.com/anthropics/skills/tree/main/skills/slack-gif-creator, лицензия Apache-2.0. Изменения: перевод на русский язык.