Design motion e animazioni interfacce

1) Perché l'animazione nel prodotto

• spiega i rapporti causali (dove è scomparso, da dove è emerso l'elemento)
• punta l'attenzione sull'attività principale
• conferma il risultato (feedback) e riduce il carico cognitivo,
• rende le transizioni prevedibili e «tangibili».

Regola numero 1: senso> stile. Ogni animazione risponde alla domanda «Cos'è successo e cosa c'entra con me?» ».

2) Principi di base

1. Gerarchia del movimento: i contenitori vengono spostati per primi, quindi il contenuto e le parti.
2. Costanza: pattern identici per le stesse azioni.
3. Risparmio: minimo proprietà, minimo fotogrammi Meglio breve e più chiaro.
4. Fisica realistica: accelerazione all'inizio, rallentamento alla fine; Nessun «colpo di scena».
5. «Indietro» si sente specularmente «avanti».
6. Disponibilità: rispetto delle impostazioni di sistema per ridurre l'animazione.

3) Lunghezze e curve (raccomandazioni)

3. 1 Durata (desktop/mobile)

Hover: 120-180 ms

Focus/Pressed: 80–120 мс

Tooltip/Toast: ingresso 180-240 mc, uscita 120-160 mc

Modalk/drowers: 200-320 mc

Transizioni schermate 240-360 ms

Riferimenti scroll/parallax: ≤ 200 ms per segmento, evitare cicli infiniti

3. 2 Curve

Principale: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) '- ritmo naturale «materiale»

Ingresso più veloce, uscita più morbida: 'cubic-bezier (0. 05, 0. 7, 0. 1, 1)`

Elasticità (raramente, accento): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2) 'con vincolo overshoot ≤ 8px/8 °

Regola: non utilizzare l'interpolazione lineare per spostamenti e opacity contemporaneamente - sensazione di meccanicità.

4) Coreografia delle transizioni

Apparizione: Scala più leggera 0. 98→1. 0 + fade-in, offset 8-16 px sull'asse di comparsa.
Sparizione: ordine inverso, più veloce di ingresso (-20-30%).
Sovrascrivere/cambiare le schede: la base totale (contenitore) viene spostata a 16-24 px; la scheda attiva viene evidenziata prima dell'inizio del movimento.
Elenchi: allentare la cascata (stagger 20-40 mc/elemento, massimo 6-8 elementi).

5) Micro interazioni (patterns)

Pulsante (hover/press) - Ombra + sottile leggero/scale 0. 98; Pressed rimbalza da 80 ≤.
Fuoco: anello di contrasto senza blur; animare spessore/trasparenza, non glow.
Input: carrozza/evidenziazione campo su focus; errori - agitazione 6 px, 140 ms, 1 ciclo.
Toggle/Checkbox: snap fino alla posizione finale, ritardo click massimo 60-80 ms.
Scheleton/caricamento: shimmer 1200-1600 ms, ampiezza di luminosità 20%, senza flash bruschi.

6) Stati dei contenuti

Loading → Success/Empty/Errore: un solo «canale» di movimento; non mescolare direzioni diverse.
Toast/Alerts - Vengono dall'origine dell'evento (ad esempio, in basso a destra per le azioni dell'utente).
Pull to refresh: stretching con scarico elastico; Il tempo di ritorno è di 250 ms.

7) Disponibilità (A11y) e sicurezza

Supporta «prefers-reduced-motion: reduce»: sostituisci gli spostamenti con fade/scale con 1% o transizione statica.
Evitare flash> 3 al secondo e grandi lampeggianti a contrasto (epilessia fotosensiva).
Non usare un forte parallax/zoom negli utenti con una storia di rigonfiamento; Fate un'opzione di disattivazione.
Gli stili di attivazione sono sempre visibili senza animazione (non solo colore/movimento).

8) Prestazioni (60 FPS come obiettivo)

Animare solo opacity e trans (translate/scale/rotate); evitare «top/left/width/height».
Attivare il compositing: 'form: translateZ (0)' o 'will-change':, 'opacity' (moderato).
Per ridurre al minimo i dati, non animare ombre con blur più grandi e filtri su più elementi.
Dividete i grandi passaggi in batch; Usa il requestAnimationFrame.
Per gli elenchi, virtualizzazione/ridefinizione fuori schermo.

9) Token motion in progettazione

json
{
"motion": {
"duration": { "xs": 100, "sm": 160, "md": 220, "lg": 280, "xl": 340 },
"easing": {
"standard": "cubic-bezier(0. 2, 0. 0, 0. 2, 1)",
"emphasis": "cubic-bezier(0. 05, 0. 7, 0. 1, 1)",
"decelerate": "cubic-bezier(0. 0, 0. 0, 0. 2, 1)",
"accelerate": "cubic-bezier(0. 4, 0. 0, 1, 1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Именование: `motion.{duration|easing|stagger}.{role}` — `hover`, `focus`, `overlayIn`, `pageTransition`, `listItem`.

10) Implementazione (CSS/JS/React)

css
:root {
--motion-dur-sm: 160ms;
--motion-dur-md: 220ms;
--motion-ease: cubic-bezier(0. 2, 0, 0. 2, 1);
}
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration: 0. 01ms! important; }
}

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 0. 22 } }}
exit={{ opacity: 0, transition: { duration: 0. 16 } }}
className="fixed inset-0 bg-black/50"
>
<motion. div initial={{ y: 16, scale: 0. 98, opacity: 0 }}
animate={{ y: 0, scale: 1, opacity: 1, transition: { duration: 0. 24, ease: [0. 2,0,0. 2,1] } }}
exit={{ y: 8, scale: 0. 99, opacity: 0, transition: { duration: 0. 18 } }}
className="m-auto max-w-lg rounded-2xl bg-white p-6"
>
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

Lotte/SVG: usa per gli stati vuoti illustrativi e onboarding; non per i controlli critici. Ottimizzare e memorizzare la cache.

11) Pattern di download

Skeleton invece di spinner dove la struttura dei contenuti è nota.
Progress: un bar determinato se si conosce il progresso; Indetrizzato, con un ritmo uniforme, senza colpi di scena.
Evitare lo skeleton fluttuante durante la ricostruzione: fissare le dimensioni.

12) Transizioni tra pagine/schermi

Mantenete il punto di attenzione - La scheda viene visualizzata nella parte.
Navigazione verso l'interno, avanti/destra/su, indietro e indietro; la direzione è unita per la piattaforma.
Il sottofondo si oscura fino al 40-60% per gli overlay.

13) Specificità del iGaming

Spin/Reveal: una velocità breve (≤ 200 ms) + rotazione uniforme + morbido; Divieto di cicli infiniti senza effetto.
Win/Jackpot: accensione della luce di 500 ms, senza righe; il suono a basso volume; il testo della vittoria è leggibile (AAA per contrasto).
Tornei/classificazioni: fattura incrementata - contatore con numeri tabellari e passo leggero 40-60 ms/unità (batch), senza «salto» layout.
Gioco responsabile: notifiche e limiti senza effetti distrattivi; animazione minima, attenzione alla leggibilità.

14) Anti-pattern

Ritardi> 120 ms per rispondere al click.
Ascensore da opacity + scale 0. 9→1. 05→1. 0 con overshoot per ogni piccola cosa.
Parallax di sfondo in conflitto con lo scroll.
Infiniti riflessi/pulsazioni.
Animazione delle proprietà layout/paint («height», «left», «filter: blur ()») su più elementi.
Curve non permanenti e durata della stessa azione.

15) Processo e QA

• Prototipi con tyming/curve; coreografia a livello di cornici.
• Directory motion-token e esempi per i componenti.

• Test unit di visibilità/condizioni (le transizioni sono completate come previsto).
• Test visivi (snashot della fine delle animazioni).
• Profilatura (Performance/Timeline) nelle scene con il massimo carico.

• Supportato'preferers-reduced-motion '.
• Solo transfer/opacity.
• Le lunghezze e le curve corrispondono ai token.
• Nessun flash> 3/s e una stringa forte.
• Skeleton al posto dello spinner, se possibile.
• Le transizioni sono reversibili e prevedibili.

16) Documentazione in progettazione

«Motion-token»: duration/easing/stagger con esempi.
Moduli, elenchi, schede, pagine.
A11y & Performance: hyde per reduce-motion e compositing.
«Do/Don't» - Clip brevi con esempi di successo/fallimento.

Breve riepilogo

Motion Design è il linguaggio delle cause e degli effetti. Tenete i timing corti, le curve coerenti e le proprietà a basso costo per il rendering. Rispetto della disponibilità, documentazione dei token e verifica delle prestazioni. In questo modo l'animazione aumenterà l'UX e la velocità e la chiarezza dell'interfaccia.