⭐ 0
🔍
Testo Immagine PDF e Documenti Audio Musica Elettronica Tempo Utilità Validatori Esoterismo Giochi

Curva di andamento standard di progettazione materiale

Progetta una funzione di temporizzazione CSS cubic-bezier() personalizzata trascinando due punti di controllo, visualizzane l'anteprima in tempo reale rispetto a un riferimento lineare, quindi copia il valore pronto.

Trascina la maniglia arancione (P1) e la maniglia rossa (P2) per rimodellare la curva: funzionano anche i tasti freccia. X rimane bloccato tra 0 e 1 come richiesto dai CSS; trascina una maniglia sopra o sotto la casella per inviare y oltre tale intervallo per effetti di superamento e rimbalzo.

La tua curva

Lineare (per confronto)

Elaborazione... 0%

Risultato

Questa pagina apre il generatore con x1=0.4, y1=0, x2=0.2, y2=1 già caricati: la curva di andamento standard pubblicata nelle linee guida sul movimento di Material Design di Google. Trascina insieme la maniglia o la modifica dei numeri e della curva, dell'anteprima live e dell'aggiornamento CSS copiabile.

Material Design chiama questa curva "allentamento standard" e la consiglia per la maggior parte delle transizioni su schermo: elementi che sono già visibili e che semplicemente si spostano, si ridimensionano o sbiadiscono all'interno dello stesso schermo. La sua forma accelera rapidamente, quindi decelera dolcemente per posizionarsi, motivo per cui così tante app Android e interfacce utente Web in stile Material condividono la stessa sensazione di transizione senza che nessuno si accorga che stanno utilizzando gli stessi quattro numeri.

Inseriscilo direttamente nella funzione di temporizzazione della transizione o nella funzione di temporizzazione dell'animazione per una sensazione coerente con il materiale, oppure usalo come punto di riferimento: le linee guida di Materiale definiscono anche curve di "decelerazione" e "accelerazione" separate per gli elementi che entrano o escono dallo schermo, che questa singola curva standard non intende sostituire.

🛡️
Eseguito nel browser

I tuoi file e input non lasciano mai questo dispositivo. L'elaborazione viene eseguita completamente offline. Sicuro al 100%.

Formati e regole accettati

  • Editor di curve SVG trascinabile con due maniglie (P1 e P2) più input numerici x1/y1/x2/y2 modificabili per valori precisi al pixel.
  • Anteprima dell'animazione in loop che confronta il timing personalizzato di cubic-bezier() con una sfera di riferimento lineare, in modo da poter vedere l'allentamento, non solo leggerlo.
  • Stringa cubica di Bezier (x1, y1, x2, y2) copiabile pronta per la funzione di temporizzazione della transizione o la funzione di temporizzazione dell'animazione, oltre a pagine preimpostate per facilità di ingresso, rimbalzo e curva standard di Material Design.

Vantaggi principali

✓ Trascina la maniglia del punto di controllo e osserva la curva, l'anteprima dell'animazione dal vivo e la stringa CSS copiabile che si aggiornano tutti insieme, senza bisogno di memorizzare i calcoli delle coordinate.
✓ Y può superare 0 e 1 per effetti di molla e rimbalzo mentre X rimane bloccato nell'intervallo 0–1 effettivamente richiesto dai CSS, quindi ogni valore che copi è valido nel momento in cui lo incolli.
✓ L'anteprima affiancata confronta la tua curva personalizzata con un riferimento lineare semplice, quindi la differenza nella sensazione di movimento, l'intera ragione per utilizzare l'allentamento, è evidente a colpo d'occhio, non solo un output del codice.

Casi d'uso

  • • Hai bisogno di un valore personalizzato per la funzione di temporizzazione della transizione o di animazione invece di una delle parole chiave di facilità integrate?
  • • Vuoi vedere esattamente come appare cubic-bezier(0.42, 0, 0.58, 1) - i numeri reali dietro la parola chiave easy-in-out dei CSS - in movimento prima di spedirlo?
  • • Stai costruendo un pulsante rimbalzante, un'animazione modale o una scheda e hai bisogno di una curva di andamento del superamento pronta da copiare direttamente nel tuo foglio di stile?