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

Curva di allentamento CSS in stile rimbalzo

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,68, y1=-0,55, x2=0,265, y2=1,55 già caricati: una curva di superamento che alcune librerie di easing etichettano easyOutBack. Il negativo y1 e y2 sopra 1 sono esattamente il motivo per cui l'anteprima dell'animazione qui sotto si ritira oltre l'inizio e oltre la fine prima di stabilizzarsi; trascina una delle maniglie o modifica i numeri per rendere l'effetto più forte o più delicato.

Essere onesti su cosa sia: una singola curva cubic-bezier() ha solo due punti di controllo, quindi può approssimare un movimento di superamento e assestamento, non un vero rimbalzo fisico multi-rimbalzo con diversi salti decrescenti. Per un effetto letterale di rimbalzo della palla avresti bisogno di più fotogrammi chiave o segmenti passaggi() concatenati insieme: questa curva è la più vicina che una semplice funzione di temporizzazione della transizione può ottenere in una riga.

Quel singolo superamento è ancora esattamente ciò che la maggior parte dell'interfaccia utente dinamica desidera: un pulsante che supera leggermente le sue dimensioni di riposo, una modale che supera prima di stabilizzarsi, una carta che scatta in posizione. Copia il valore così com'è per quella sensazione scattante, o ammorbidisci y1 verso 0 e y2 verso 1 per riportare indietro il superamento.

🛡️
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?