Slack Criador de GIFs

Slack Criador de GIFs - Kit de Ferramentas Flexível

Um kit de ferramentas para criar GIFs animados otimizados para o Slack. Fornece validadores para as restrições do Slack, primitivas de animação combináveis e utilitários auxiliares opcionais. Aplique essas ferramentas conforme necessário para alcançar a visão criativa.

Requisitos do Slack

O Slack possui requisitos específicos para GIFs de acordo com seu uso:

GIFs de Mensagem:

• Tamanho máximo: ~2MB
• Dimensões ideais: 480x480
• FPS típico: 15-20
• Limite de cores: 128-256
• Duração: 2-5s

GIFs de Emoji:

• Tamanho máximo: 64KB (limite estrito)
• Dimensões ideais: 128x128
• FPS típico: 10-12
• Limite de cores: 32-48
• Duração: 1-2s

GIFs de Emoji são desafiadores - o limite de 64KB é estrito. Estratégias que ajudam:

• Limitar a 10-15 quadros no total
• Usar no máximo 32-48 cores
• Manter designs simples
• Evitar gradientes
• Validar o tamanho do arquivo com frequência

Estrutura do Kit de Ferramentas

Este skill fornece três tipos de ferramentas:

1. Validadores - Verificam se um GIF atende aos requisitos do Slack
2. Primitivas de Animação - Blocos de construção combináveis para movimento (tremor, quicar, mover, caleidoscópio)
3. Utilitários Auxiliares - Funções opcionais para necessidades comuns (texto, cores, efeitos)

Liberdade criativa total está disponível em como essas ferramentas são aplicadas.

Validadores Principais

Para garantir que um GIF atenda às restrições do Slack, use estes validadores:

from core.gif_builder import GIFBuilder

# Após criar seu GIF, verifique se ele atende aos requisitos
builder = GIFBuilder(width=128, height=128, fps=10)
# ... adicione seus quadros como desejar ...

# Salve e verifique o tamanho
info = builder.save('emoji.gif', num_colors=48, optimize_for_emoji=True)

# O método save avisa automaticamente se o arquivo exceder os limites
# info dict contém: size_kb, size_mb, frame_count, duration_seconds

Validador de tamanho de arquivo:

from core.validators import check_slack_size

# Verifique se o GIF atende aos limites de tamanho
passes, info = check_slack_size('emoji.gif', is_emoji=True)
# Retorna: (True/False, dicionário com detalhes de tamanho)

Validador de dimensões:

from core.validators import validate_dimensions

# Verifique as dimensões
passes, info = validate_dimensions(128, 128, is_emoji=True)
# Retorna: (True/False, dicionário com detalhes de dimensão)

Validação completa:

from core.validators import validate_gif, is_slack_ready

# Execute todas as validações
all_pass, results = validate_gif('emoji.gif', is_emoji=True)

# Ou verificação rápida
if is_slack_ready('emoji.gif', is_emoji=True):
    print("Pronto para enviar!")

Primitivas de Animação

Estes são blocos de construção combináveis para movimento. Aplique-os a qualquer objeto em qualquer combinação:

Tremer

from templates.shake import create_shake_animation

# Tremer um emoji
frames = create_shake_animation(
    object_type='emoji',
    object_data={'emoji': '😱', 'size': 80},
    num_frames=20,
    shake_intensity=15,
    direction='both'  # ou 'horizontal', 'vertical'
)

Quicar

from templates.bounce import create_bounce_animation

# Quicar um círculo
frames = create_bounce_animation(
    object_type='circle',
    object_data={'radius': 40, 'color': (255, 100, 100)},
    num_frames=30,
    bounce_height=150
)

Girar / Rotacionar

from templates.spin import create_spin_animation, create_loading_spinner

# Rotação horária
frames = create_spin_animation(
    object_type='emoji',
    object_data={'emoji': '🔄', 'size': 100},
    rotation_type='clockwise',
    full_rotations=2
)

# Rotação oscilante
frames = create_spin_animation(rotation_type='wobble', full_rotations=3)

# Spinner de carregamento
frames = create_loading_spinner(spinner_type='dots')

Pulsar / Batida Cardíaca

from templates.pulse import create_pulse_animation, create_attention_pulse

# Pulso suave
frames = create_pulse_animation(
    object_data={'emoji': '❤️', 'size': 100},
    pulse_type='smooth',
    scale_range=(0.8, 1.2)
)

# Batida cardíaca (bomba dupla)
frames = create_pulse_animation(pulse_type='heartbeat')

# Pulso de atenção para GIFs de emoji
frames = create_attention_pulse(emoji='⚠️', num_frames=20)

Desbotar

from templates.fade import create_fade_animation, create_crossfade

# Desbotar para dentro
frames = create_fade_animation(fade_type='in')

# Desbotar para fora
frames = create_fade_animation(fade_type='out')

# Transição suave entre dois emojis
frames = create_crossfade(
    object1_data={'emoji': '😊', 'size': 100},
    object2_data={'emoji': '😂', 'size': 100}
)

Zoom

from templates.zoom import create_zoom_animation, create_explosion_zoom

# Zoom para dentro dramaticamente
frames = create_zoom_animation(
    zoom_type='in',
    scale_range=(0.1, 2.0),
    add_motion_blur=True
)

# Zoom para fora
frames = create_zoom_animation(zoom_type='out')

# Zoom explosivo
frames = create_explosion_zoom(emoji='💥')

Explodir / Despedaçar

from templates.explode import create_explode_animation, create_particle_burst

# Explosão em estouro
frames = create_explode_animation(
    explode_type='burst',
    num_pieces=25
)

# Efeito de despedaçar
frames = create_explode_animation(explode_type='shatter')

# Dissolver em partículas
frames = create_explode_animation(explode_type='dissolve')

# Rajada de partículas
frames = create_particle_burst(particle_count=30)

Balançar / Sacudir

from templates.wiggle import create_wiggle_animation, create_excited_wiggle

# Balanço gelatinoso
frames = create_wiggle_animation(
    wiggle_type='jello',
    intensity=1.0,
    cycles=2
)

# Movimento de onda
frames = create_wiggle_animation(wiggle_type='wave')

# Balanço animado para GIFs de emoji
frames = create_excited_wiggle(emoji='🎉')

Deslizar

from templates.slide import create_slide_animation, create_multi_slide

# Deslizar da esquerda com ultrapassagem
frames = create_slide_animation(
    direction='left',
    slide_type='in',
    overshoot=True
)

# Deslizar atravessando
frames = create_slide_animation(direction='left', slide_type='across')

# Múltiplos objetos deslizando em sequência
objects = [
    {'data': {'emoji': '🎯', 'size': 60}, 'direction': 'left', 'final_pos': (120, 240)},
    {'data': {'emoji': '🎪', 'size': 60}, 'direction': 'right', 'final_pos': (240, 240)}
]
frames = create_multi_slide(objects, stagger_delay=5)

Virar

from templates.flip import create_flip_animation, create_quick_flip

# Virar horizontalmente entre dois emojis
frames = create_flip_animation(
    object1_data={'emoji': '😊', 'size': 120},
    object2_data={'emoji': '😂', 'size': 120},
    flip_axis='horizontal'
)

# Virar verticalmente
frames = create_flip_animation(flip_axis='vertical')

# Virar rápido para GIFs de emoji
frames = create_quick_flip('👍', '👎')

Morfar / Transformar

from templates.morph import create_morph_animation, create_reaction_morph

# Morfar com transição suave
frames = create_morph_animation(
    object1_data={'emoji': '😊', 'size': 100},
    object2_data={'emoji': '😂', 'size': 100},
    morph_type='crossfade'
)

# Morfar com escala (um encolhe enquanto outro cresce)
frames = create_morph_animation(morph_type='scale')

# Morfar com rotação (similar a giro 3D)
frames = create_morph_animation(morph_type='spin_morph')

Efeito de Movimento

from templates.move import create_move_animation

# Movimento linear
frames = create_move_animation(
    object_type='emoji',
    object_data={'emoji': '🚀', 'size': 60},
    start_pos=(50, 240),
    end_pos=(430, 240),
    motion_type='linear',
    easing='ease_out'
)

# Movimento em arco (trajetória parabólica)
frames = create_move_animation(
    object_type='emoji',
    object_data={'emoji': '⚽', 'size': 60},
    start_pos=(50, 350),
    end_pos=(430, 350),
    motion_type='arc',
    motion_params={'arc_height': 150}
)

# Movimento circular
frames = create_move_animation(
    object_type='emoji',
    object_data={'emoji': '🌍', 'size': 50},
    motion_type='circle',
    motion_params={
        'center': (240, 240),
        'radius': 120,
        'angle_range': 360  # círculo completo
    }
)

# Movimento de onda
frames = create_move_animation(
    motion_type='wave',
    motion_params={
        'wave_amplitude': 50,
        'wave_frequency': 2
    }
)

# Ou use funções de easing de baixo nível
from core.easing import interpolate, calculate_arc_motion

for i in range(num_frames):
    t = i / (num_frames - 1)
    x = interpolate(start_x, end_x, t, easing='ease_out')
    # Ou: x, y = calculate_arc_motion(start, end, height, t)

Efeito Caleidoscópio

from templates.kaleidoscope import apply_kaleidoscope, create_kaleidoscope_animation

# Aplicar a um único quadro
kaleido_frame = apply_kaleidoscope(frame, segments=8)

# Ou criar animação caleidoscópica
frames = create_kaleidoscope_animation(
    base_frame=my_frame,  # ou None para padrão de demonstração
    num_frames=30,
    segments=8,
    rotation_speed=1.0
)

# Efeitos de espelho simples (mais rápidos)
from templates.kaleidoscope import apply_simple_mirror

mirrored = apply_simple_mirror(frame, mode='quad')  # espelho 4 vias
# modos: 'horizontal', 'vertical', 'quad', 'radial'

Para compor primitivas livremente, siga estes padrões:

# Exemplo: Quicar + tremer para impacto
for i in range(num_frames):
    frame = create_blank_frame(480, 480, bg_color)

    # Movimento de quicar
    t_bounce = i / (num_frames - 1)
    y = interpolate(start_y, ground_y, t_bounce, 'bounce_out')

    # Adicionar tremor no impacto (quando y atinge o chão)
    if y >= ground_y - 5:
        shake_x = math.sin(i * 2) * 10
        x = center_x + shake_x
    else:
        x = center_x

    draw_emoji(frame, '⚽', (x, y), size=60)
    builder.add_frame(frame)

Utilitários Auxiliares

Estes são auxiliares opcionais para necessidades comuns. Use, modifique ou substitua estes por implementações personalizadas conforme necessário.

Construtor de GIF (Montagem e Otimização)

from core.gif_builder import GIFBuilder

# Crie o construtor com suas configurações escolhidas
builder = GIFBuilder(width=480, height=480, fps=20)

# Adicione quadros (como você os criou)
for frame in my_frames:
    builder.add_frame(frame)

# Salve com otimização
builder.save('output.gif',
             num_colors=128,
             optimize_for_emoji=False)

Características principais:

• Quantização automática de cores
• Remoção de quadros duplicados
• Avisos de tamanho para limites do Slack
• Modo emoji (otimização agressiva)

Renderização de Texto

Para GIFs pequenos como emojis, a legibilidade do texto é desafiadora. Uma solução comum envolve adicionar contornos:

from core.typography import draw_text_with_outline, TYPOGRAPHY_SCALE

# Texto com contorno (ajuda na legibilidade)
draw_text_with_outline(
    frame, "BONK!",
    position=(240, 100),
    font_size=TYPOGRAPHY_SCALE['h1'],  # 60px
    text_color=(255, 68, 68),
    outline_color=(0, 0, 0),
    outline_width=4,
    centered=True
)

Para implementar renderização de texto personalizada, use ImageDraw.text() do PIL, que funciona bem para GIFs maiores.

Gerenciamento de Cores

GIFs com aparência profissional geralmente usam paletas de cores coesas:

from core.color_palettes import get_palette

# Obtenha uma paleta pré-criada
palette = get_palette('vibrant')  # ou 'pastel', 'dark', 'neon', 'professional'

bg_color = palette['background']
text_color = palette['primary']
accent_color = palette['accent']

Para trabalhar com cores diretamente, use tuplas RGB - o que funcionar para o caso de uso.

Efeitos Visuais

Efeitos opcionais para momentos de impacto:

from core.visual_effects import ParticleSystem, create_impact_flash, create_shockwave_rings

# Sistema de partículas
particles = ParticleSystem()
particles.emit_sparkles(x=240, y=200, count=15)
particles.emit_confetti(x=240, y=200, count=20)

# Atualize e renderize cada quadro
particles.update()
particles.render(frame)

# Efeito de flash
frame = create_impact_flash(frame, position=(240, 200), radius=100)

# Anéis de onda de choque
frame = create_shockwave_rings(frame, position=(240, 200), radii=[30, 60, 90])

Funções de Easing

Movimento suave usa easing em vez de interpolação linear:

from core.easing import interpolate

# Objeto caindo (acelera)
y = interpolate(start=0, end=400, t=progress, easing='ease_in')

# Objeto aterrissando (desacelera)
y = interpolate(start=0, end=400, t=progress, easing='ease_out')

# Quicando
y = interpolate(start=0, end=400, t=progress, easing='bounce_out')

# Ultrapassagem (elástico)
scale = interpolate(start=0.5, end=1.0, t=progress, easing='elastic_out')

Easings disponíveis: linear, ease_in, ease_out, ease_in_out, bounce_out, elastic_out, back_out (ultrapassagem), e mais em core/easing.py.

Composição de Quadros

Utilitários básicos de desenho, se precisar:

from core.frame_composer import (
    create_gradient_background,  # Fundos gradientes
    draw_emoji_enhanced,         # Emoji com sombra opcional
    draw_circle_with_shadow,     # Formas com profundidade
    draw_star                    # Estrelas de 5 pontas
)

# Fundo gradiente
frame = create_gradient_background(480, 480, top_color, bottom_color)

# Emoji com sombra
draw_emoji_enhanced(frame, '🎉', position=(200, 200), size=80, shadow=True)

Estratégias de Otimização

Quando seu GIF estiver muito grande:

Para GIFs de Mensagem (>2MB):

1. Reduza quadros (menor FPS ou duração mais curta)
2. Reduza cores (128 → 64 cores)
3. Reduza dimensões (480x480 → 320x320)
4. Ative a remoção de quadros duplicados

Para GIFs de Emoji (>64KB) - seja agressivo:

1. Limite a 10-12 quadros no total
2. Use no máximo 32-40 cores
3. Evite gradientes (cores sólidas comprimem melhor)
4. Simplifique o design (menos elementos)
5. Use optimize_for_emoji=True no método save

Exemplos de Padrões de Composição

Reação Simples (Pulsando)

builder = GIFBuilder(128, 128, 10)

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

    # Escala pulsante
    scale = 1.0 + math.sin(i * 0.5) * 0.15
    size = int(60 * scale)

    draw_emoji_enhanced(frame, '😱', position=(64-size//2, 64-size//2),
                       size=size, shadow=False)
    builder.add_frame(frame)

builder.save('reaction.gif', num_colors=40, optimize_for_emoji=True)

# Valide
from core.validators import check_slack_size
check_slack_size('reaction.gif', is_emoji=True)

Combinação Quicar + Virar (Transição)

frames = []
imgs = [Image.new('RGBA', (480, 480), (240, 248, 255)) for _ in range(30)]
for i, frame in enumerate(imgs):
    # Efeito de quicar
    t = i / 29
    y_offset = interpolate(0, 80, t if t < 0.5 else 1-t, 'bounce_out')
    
    # Virar no meio
    if i < 15:
        draw_emoji_enhanced(frame, '😊', position=(200, 200-y_offset), size=80, shadow=True)
    else:
        draw_emoji_enhanced(frame, '😂', position=(200, 200-y_offset), size=80, shadow=True)
    frames.append(frame)

builder = GIFBuilder(480, 480, 15)
for f in frames:
    builder.add_frame(f)
builder.save('transition.gif', num_colors=128, optimize_for_emoji=False)

Spinner de Carregamento com Gradiente

# Crie um background gradiente
from core.frame_composer import create_gradient_background

builder = GIFBuilder(480, 480, 20)
for frame in create_loading_spinner(spinner_type='dots', num_frames=20):
    # Aplique gradiente a cada quadro
    bg = create_gradient_background(480, 480, (25, 25, 112), (0, 0, 0))
    composed = Image.alpha_composite(bg.convert('RGBA'), frame.convert('RGBA'))
    builder.add_frame(composed.convert('RGB'))

builder.save('spinner.gif', num_colors=128)

Shake Personalizado com Partículas

from core.visual_effects import ParticleSystem

builder = GIFBuilder(480, 480, 20)
particles = ParticleSystem()

for i in range(30):
    frame = Image.new('RGB', (480, 480), (240, 248, 255))
    
    # Calcular tremor
    shake = math.sin(i * 3) * 25 if i < 12 else 0
    
    # Renderizar texto com tremor
    draw_text_with_outline(frame, "IMPACTO!", 
                         position=(240 + shake, 140),
                         font_size=60, text_color=(255, 68, 68),
                         outline_color=(0, 0, 0), centered=True)
    
    # Emitir partículas nos quadros iniciais
    if i == 0:
        particles.emit_sparkles(240, 200, count=30)
        particles.emit_confetti(240, 200, count=20)
    
    particles.update()
    particles.render(frame)
    
    builder.add_frame(frame)

builder.save('impact.gif', num_colors=256)

Notas Finais

• Modifique livremente: Sinta-se à vontade para ajustar estas ferramentas para se adequarem à sua visão específica, seja alterando paletas de cores, parâmetros de animação, ou compondo múltiplos efeitos de maneiras novas.
• Valide cedo, valide frequentemente: Especialmente para GIFs de emoji, verificar o tamanho do arquivo durante o desenvolvimento economiza retrabalho.
• PIL/Pillow é seu amigo: Para manipulações de imagem não cobertas aqui, PIL/Pillow é o motor subjacente. Sinta-se à vontade para usá-lo diretamente.
• Comece pequeno, depois cresça: Comece com um design simples e adicione complexidade gradualmente, validando a cada passo.
• Consulte modelos e exemplos: O código-fonte inclui animações completas de exemplo em templates/ e examples/.