Generator cubic Bezier

Tastarea cubic-bezier(x1, y1, x2, y2) manual și reîncărcarea paginii pentru a verifica senzația este o modalitate lentă de a regla o animație. Acest generator închide bucla: trageți fie mânerul punctului de control pe curbă, fie introduceți numere exacte în câmpurile x1/y1/x2/y2, iar curba, șirul CSS copiabil și previzualizarea animației live se actualizează la fiecare modificare - fără pas de construire, fără reîncărcare.

Cele două axe funcționează diferit intenționat. x1 și x2 rămân blocate între 0 și 1, pentru că asta este ceea ce specificația CSS cere de fapt de la o funcție de sincronizare cubic-bezier() - o valoare în afara acestui interval este pur și simplu invalidă. y1 și y2 nu au o astfel de limită: trageți un mâner deasupra cutiei de sus sau sub partea de jos, iar curba se depășește dincolo de începutul sau de sfârșitul ei, ceea ce este exact modul în care efectele de primăvară și de săritură sunt construite dintr-o singură curbă de relaxare.

A vedea un număr nu este același lucru cu a vedea mișcarea, așa că previzualizarea rulează două bile identice una lângă alta într-o buclă: una se mișcă folosind curba personalizată, cealaltă se mișcă într-un ritm liniar constant. Privind-i întrecerea este cel mai rapid mod de a spune dacă o curbă de relaxare produce într-adevăr senzația pe care o dorești, înainte de a ajunge vreodată la o foaie de stil. Paginile prestabilite - numerele reale din spatele cuvântului cheie de intrare ușoară al CSS, o aproximare sinceră a depășirii, unii numesc o respingere și curba standard Material Design publicată de Google - sunt puncte de pornire gata din care puteți trage mai degrabă decât puncte de control goale.

Totul rulează local în browserul dvs.: fără încărcare, fără cont, fără dus-întors pe server, iar generatorul continuă să funcționeze offline odată ce pagina s-a încărcat.