Mapa mikro-animacji Swoosh
Przegląd wszystkich proponowanych animacji per ekran. Kliknij ekran aby zobaczyć szczegóły.
📋 Feed Screen 7
- SPRING FAB wejście — scale 0→1 z overshoot przy starcie ekranu
- SPRING FAB press — sprężyste zmniejszenie przy tapnięciu (0.85→1.0)
- SLIDE Karty postów — staggered wejście od dołu, każda karta z lekkim opóźnieniem
- SPRING "Show more" expand — animateContentSize ze sprężyną
- FADE Empty state — fade in + delikatny scale up
- BOUNCE Queue status — pulsujący chip podczas uploadu, bounce przy zmianie statusu
- SLIDE Snackbar — slide in od dołu z overshoot
✏️ Composer Screen 6
- SCALE Image preview — scale in z spring przy dodaniu zdjęcia
- SLIDE Link preview card — slide up + fade in po załadowaniu
- SPRING Schedule chip — sprężyste pojawienie się po wybraniu daty
- BOUNCE Publish button — subtle bounce na hover/focus, loading pulse
- FADE Character counter — color crossfade przy przekroczeniu limitu
- SCALE Action buttons row — staggered scale-in wejście
📖 Detail Screen 4
- FADE Content reveal — sekwencyjne fade-in elementów (status → tekst → obraz → metadata)
- SPRING Status badge — scale-in z bounce przy wejściu
- SCALE Delete dialog — scale z center + backdrop fade
- SLIDE Metadata sekcja — slide up od dolnej krawędzi
⚙️ Settings Screen 2
- SPRING "Saved!" feedback — scale-in z bounce + auto fade-out po 2s
- FADE Disconnect confirm — dialog fade + scale
🎛️ Wspólne parametry animacji (SwooshMotion)
Centralny obiekt z predefiniowanymi specyfikacjami — zapewnia spójny "character" w całej aplikacji
| Nazwa | Typ | Parametry | Zastosowanie |
|---|
Bouncy | Spring | dampingRatio=0.55, stiffness=400 | FAB, buttony, chipy |
Snappy | Spring | dampingRatio=0.7, stiffness=800 | Expand/collapse, dialogi |
Gentle | Spring | dampingRatio=0.8, stiffness=300 | Karty, content reveal |
Quick | Tween | 200ms, FastOutSlowIn | Fade, color transitions |
StaggerDelay | Offset | 50ms per item | List item wejścia |
🔀 Przejścia między ekranami
| Przejście | Animacja |
|---|
| Feed → Composer | Slide up z dołu + fade (shared element z FAB → ekran) |
| Feed → Detail | Slide in z prawej + fade (karta "wyrasta" w pełny widok) |
| Feed → Settings | Slide in z prawej, standard |
| Composer/Detail → Back | Reverse odpowiedniego wejścia |
| Setup → Feed | Crossfade (płynne przejście z animowanego tła) |