⭐ 0
🔍
Tekst Slika PDF i dokumenti Audio Glazba Elektronika Vrijeme Komunalije Validatori Ezoterija Igre

Generator cubic-bezier krivulja

Oblikujte prilagođenu CSS cubic-bezier() funkciju vremenskog tijeka povlačenjem dviju kontrolnih točaka, pregledajte je uživo u odnosu na linearnu referencu i kopirajte gotovu vrijednost.

🔒 U potpunosti se obrađuje u vašem pregledniku — ništa što ovdje unesete nikada se ne učitava.

Povucite narančastu ručicu (P1) i crvenu ručicu (P2) za preoblikovanje krivulje — tipke sa strelicama također rade. X ostaje unutar raspona između 0 i 1 kako CSS zahtijeva; povucite ručicu iznad ili ispod okvira kako biste poslali y izvan tog raspona za efekte prekoračenja i odskakanja.

Vaša krivulja

Linearna (za usporedbu)

Obrada... 0%

Rezultat

Ručno upisivanje cubic-bezier(x1, y1, x2, y2) i ponovno učitavanje stranice radi provjere osjećaja spor je način podešavanja animacije. Ovaj generator zatvara tu petlju: povucite bilo koju ručicu kontrolne točke na krivulji ili upišite točne brojeve u polja x1/y1/x2/y2 i krivulja, CSS niz za kopiranje i pregled animacije uživo ažuriraju se pri svakoj promjeni — bez koraka izgradnje, bez ponovnog učitavanja.

Dvije osi namjerno rade različito. x1 i x2 ostaju unutar raspona između 0 i 1, jer to CSS specifikacija zapravo zahtijeva od cubic-bezier() funkcije vremenskog tijeka — vrijednost izvan tog raspona jednostavno je nevaljana. y1 i y2 nemaju takvo ograničenje: povucite ručicu iznad vrha okvira ili ispod dna i krivulja će premašiti svoj početak ili kraj, što je upravo način na koji se efekti opruge i odskakanja grade iz jedne krivulje ublažavanja.

Vidjeti broj nije isto što i vidjeti kretanje, stoga pregled prikazuje dvije identične loptice jednu pored druge u petlji: jedna se pomiče koristeći vašu prilagođenu krivulju, druga se pomiče običnim konstantnim linearnim tempom. Gledati ih kako se utrkuju najbrži je način da se utvrdi stvara li krivulja ublažavanja zaista osjećaj koji želite, prije nego što uopće stigne u stylesheet. Stranice s predlošcima — stvarni brojevi iza CSS-ove vlastite ključne riječi ease-in-out, iskrena aproksimacija prekoračenja koju neki nazivaju odskakanjem i Googleova objavljena standardna krivulja Material Designa — spremne su polazišne točke s kojih možete povlačiti umjesto praznih kontrolnih točaka.

Sve radi lokalno u vašem pregledniku: nema prijenosa, nema računa, nema komunikacije s poslužiteljem, a generator nastavlja raditi izvan mreže nakon što se stranica učita.

Uživate u ovom alatu? Mislite da je ovaj proizvod koristan? Vidite potencijal u njemu i želite ga podržati?

🛡️
Izvršava se u pregledniku

Vaše datoteke i unosi nikad ne napuštaju ovaj uređaj. Obrada se odvija potpuno izvan mreže. 100% sigurno.

Prihvaćeni formati i pravila

  • Interaktivni SVG uređivač krivulje s dvije ručice (P1 i P2) te poljima za unos brojeva x1/y1/x2/y2 za vrijednosti precizne do piksela.
  • Ponavljajući pregled animacije koji uspoređuje vaš prilagođeni cubic-bezier() tijek s lopticom linearne reference kako biste mogli vidjeti ublažavanje, a ne samo ga pročitati.
  • Niz cubic-bezier(x1, y1, x2, y2) spreman za kopiranje, za transition-timing-function ili animation-timing-function, plus stranice s predlošcima za ease-in-out, odskakanje i standardnu krivulju Material Designa.

Ključne prednosti

✓ Povucite bilo koju ručicu kontrolne točke i gledajte kako se krivulja, pregled animacije uživo i CSS niz za kopiranje ažuriraju istovremeno — ne morate pamtiti matematiku koordinata.
✓ Y može premašiti 0 i 1 za efekte opruge i odskakanja, dok X ostaje unutar raspona 0–1 koji CSS zahtijeva, tako da je svaka kopirana vrijednost valjana čim je zalijepite.
✓ Usporedni pregled uspoređuje vašu prilagođenu krivulju s običnom linearnom referencom, tako da je razlika u osjećaju kretanja — jedan od glavnih razloga za korištenje ublažavanja — očita na prvi pogled, a ne samo u ispisu kôda.

Slučajevi upotrebe

  • • Trebate li prilagođenu vrijednost CSS transition-timing-function ili animation-timing-function umjesto neke od ugrađenih ključnih riječi poput ease?
  • • Želite li vidjeti kako izgleda cubic-bezier(0.42, 0, 0.58, 1) — stvarni brojevi iza CSS-ove vlastite ključne riječi ease-in-out — u pokretu prije nego što ga pošaljete?
  • • Izrađujete li animaciju gumba, modala ili kartice s efektom odskakanja i trebate gotovu easing krivulju za preskakanje koju možete izravno kopirati u svoj stylesheet?