Question 1

Τι είναι μια συνάρτηση easing στην CSS;

Accepted Answer

Μια συνάρτηση easing ελέγχει τον ρυθμό με τον οποίο προχωρά ένα animation ή transition στον χρόνο. Ένα στοιχείο δεν χρειάζεται να κινείται με σταθερή ταχύτητα: μπορεί να ξεκινήσει αργά, να επιταχύνει, να περάσει τον στόχο και να σταθεροποιηθεί. Στη CSS ορίζεται με τις ιδιότητες transition-timing-function ή animation-timing-function.

Question 2

Τι σημαίνουν οι τέσσερις αριθμοί στο cubic-bezier();

Accepted Answer

Το cubic-bezier(x1, y1, x2, y2) ορίζει μια καμπύλη με δύο σημεία ελέγχου. Το πρώτο διαμορφώνει την αρχή της κίνησης και το δεύτερο το τέλος. Το X αντιπροσωπεύει τον χρόνο σε κλίμακα 0 έως 1, και το Y την πρόοδο: 0 είναι η αρχική τιμή και 1 η τελική.

Question 3

Γιατί το Y μπορεί να βγει εκτός 0 έως 1 ενώ το X όχι;

Accepted Answer

Το X απεικονίζεται στον πραγματικό χρόνο· τιμή κάτω από 0 ή πάνω από 1 θα έσπασε την αιτιότητα και η προδιαγραφή το απαγορεύει. Το Y είναι ελεύθερο: πάνω από 1 περνάς τον στόχο, κάτω από 0 υποχωρείς πρώτα — έτσι οι προεπιλογές Back δημιουργούν την αίσθηση αναπήδησης.

Question 4

Ποια η διαφορά μεταξύ ease, ease-in και ease-out;

Accepted Answer

Το ease είναι η προεπιλογή του browser με απαλή εκκίνηση και απαλή προσγείωση· το ease-in ξεκινά αργά και τελειώνει γρήγορα· το ease-out ξεκινά γρήγορα και επιβραδύνει· το ease-in-out συνδυάζει και τα δύο. Η γεννήτρια περιλαμβάνει επίσης προεπιλογές sine, quad, cubic, quart, expo, back και material — 18 συνολικά.

Question 5

Πώς λειτουργεί η προεπισκόπηση με την μπάλα;

Accepted Answer

Δύο μπάλες κάνουν βρόχο για τη διάρκεια που ορίζεις. Η πάνω μπάλα κινείται πάντα με γραμμική συνάρτηση ως αναφορά, η κάτω ακολουθεί την καμπύλη σου. Το διάκενο ανάμεσά τους που μεγαλώνει και στενεύει δείχνει ακριβώς τι αλλάζει το easing σου.

Question 6

Πού επικολλώ την παραγόμενη τιμή;

Accepted Answer

Χρησιμοποίησέ την ως τιμή για transition-timing-function ή animation-timing-function, π.χ. transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Το εργαλείο εξάγει τη γυμνή συνάρτηση cubic-bezier(...), έτοιμη για οποιονδήποτε κανόνα.

Question 7

Επηρεάζει η συνάρτηση easing την απόδοση του animation;

Accepted Answer

Η ίδια η συνάρτηση χρονισμού δεν κοστίζει τίποτα: απλώς επαναχαρτογραφεί την πρόοδο στον χρόνο. Η απόδοση εξαρτάται από τις ιδιότητες που κάνεις animation: το transform και το opacity είναι φιλικά προς GPU, ενώ το animation σε ιδιότητες διάταξης όπως width ή top προκαλεί ακριβά reflow ανεξαρτήτως easing.

Question 8

Μπορώ να φτιάξω πραγματικό εφέ αναπήδησης ή ελαστικότητας;

Accepted Answer

Ένα μόνο cubic-bezier μπορεί να περάσει τον στόχο μία φορά, αλλά δεν παράγει τις πολλαπλές αναπηδήσεις ενός αληθινού bounce ή ελαστικού easing. Για αυτά, αλυσίδωσε πολλά keyframes στο @keyframes ή χρησιμοποίησε το Web Animations API· η μοναδική ομαλή υπέρβαση είναι ακριβώς ό,τι κάνει καλά το cubic-bezier και προσφέρει αυτό το εργαλείο.

Question 9

Ανεβαίνει κάτι από ό,τι κάνω εδώ;

Accepted Answer

Όχι. Η καμπύλη σχεδιάζεται σε τοπικό canvas και το animation προεπισκόπησης τρέχει εξ ολοκλήρου στον browser σου. Τίποτα δεν αποστέλλεται σε server, ώστε η γεννήτρια λειτουργεί και offline μετά τη φόρτωση της σελίδας.

Γεννήτρια CSS Easing

Πώς να χρησιμοποιήσετε το Γεννήτρια CSS Easing