Γεννήτρια CSS Cubic Bezier

Κατανόηση των συναρτήσεων χρονισμού CSS και της καμπύλης Cubic Bezier

Οι μεταβάσεις (transitions) και οι κινήσεις (animations) στο CSS βασίζονται σε συναρτήσεις χρονισμού για να καθορίσουν πώς εξελίσσεται η ταχύτητα μιας κίνησης κατά τη διάρκεια του χρόνου. Η καμπύλη Bezier τρίτου βαθμού (cubic Bezier curve) είναι το μαθηματικό μοντέλο που χρησιμοποιεί το CSS για να περιγράψει αυτή την εξέλιξη.

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

Η συνάρτηση cubic-bezier(x1, y1, x2, y2) ορίζεται από τέσσερις παραμέτρους, οι οποίες αντιστοιχούν στις συντεταγμένες δύο σημείων ελέγχου:

• Το Πρώτο σημείο ελέγχου με συντεταγμένες (x1, y1).
• Το Δεύτερο σημείο ελέγχου με συντεταγμένες (x2, y2).

Αυτά τα δύο σημεία λειτουργούν ως μαγνήτες που λυγίζουν την καμπύλη, επηρεάζοντας τον ρυθμό μετάβασης.

---

Οι κανόνες και τα όρια των τιμών εισαγωγής

Για τη δημιουργία μιας έγκυρης καμπύλης στο CSS, εφαρμόζονται συγκεκριμένοι περιορισμοί στις τιμές των σημείων ελέγχου:

• Περιορισμοί άξονα X (Χρόνος): Οι τιμές x1 και x2 πρέπει υποχρεωτικά να βρίσκονται εντός του διαστήματος από 0 έως 1. Ο χρόνος δεν μπορεί να κινηθεί προς τα πίσω ούτε να ξεπεράσει τη συνολική διάρκεια της κίνησης.
• Περιορισμοί άξονα Y (Πρόοδος): Οι τιμές y1 και y2 μπορούν να κυμανθούν από -0.70 έως 1.70. Η δυνατότητα επέκτασης κάτω από το 0 ή πάνω από το 1 επιτρέπει τη δημιουργία εφέ προετοιμασίας κίνησης (pull-back) και υπέρβασης ορίου (overshoot).

Η εφαρμογή διαχειρίζεται αυτόματα τις λανθασμένες εισαγωγές με βάση τους εξής κανόνες:

• Αν εισαχθεί μια τιμή εκτός ορίων για τον άξονα X, όπως η τιμή 9 για το "Πρώτο σημείο ελέγχου", μόλις το πεδίο χάσει την εστίαση (lose focus), η τιμή μετατρέπεται αυτόματα σε 1.
• Αν ένα αριθμητικό πεδίο εκκαθαριστεί πλήρως και χάσει την εστίαση, αποκαθίσταται η αμέσως προηγούμενη έγκυρη τιμή.
• Κενά ή μη αριθμητικά δεδομένα κατά την πληκτρολόγηση δεν προκαλούν σφάλμα, αλλά το σύστημα αναμένει τη συμπλήρωση μιας ολοκληρωμένης έγκυρης τιμής.
• Η λεπτομερής ρύθμιση των σημείων ελέγχου μπορεί να γίνει και με το πληκτρολόγιο. Πατώντας το αριστερό βέλος (Left arrow key) ενώ μια λαβή ελέγχου είναι επιλεγμένη, η τιμή μειώνεται σταδιακά, για παράδειγμα σε 0.99.

---

Δημιουργία custom εφέ και χρήση προτύπων

Η εφαρμογή επιτρέπει τη χειροκίνητη διαμόρφωση της καμπύλης σέρνοντας τις δύο λαβές, αλλά προσφέρει και έτοιμα πρότυπα (presets) για γρήγορη εισαγωγή. Τα διαθέσιμα πρότυπα περιλαμβάνουν τις βασικές λέξεις-κλειδιά του CSS, καθώς και πιο σύνθετες συμπεριφορές:

---

Ενσωμάτωση στο CSS και περιορισμοί

Η παραγόμενη τιμή cubic-bezier(x1, y1, x2, y2) μπορεί να χρησιμοποιηθεί απευθείας στον κώδικα CSS. Συνδέεται με τις ιδιότητες transition-timing-function και animation-timing-function, ή μπορεί να τοποθετηθεί στις αντίστοιχες συντομογραφίες (shorthands).

Παράδειγμα χρήσης σε μετάβαση:

.element {
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Παράδειγμα χρήσης σε animation:

.element {
  animation-name: slideIn;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

Περιορισμοί της καμπύλης Cubic Bezier

Παρόλο που οι καμπύλες cubic Bezier είναι εξαιρετικά ευέλικτες για τη δημιουργία ομαλών μεταβάσεων, έχουν δομικούς περιορισμούς. Μια μεμονωμένη συνάρτηση cubic-bezier() μπορεί να εκτελέσει προετοιμασία κίνησης και υπέρβαση ορίου, αλλά μπορεί να κινηθεί μόνο προς μία κατεύθυνση και στη συνέχεια να σταθεροποιηθεί. Δεν μπορεί να παράγει εφέ που αλλάζουν κατεύθυνση πολλαπλές φορές, όπως η αναπήδηση (bounce) ή η ελαστική κίνηση (elastic). Για τέτοιου είδους εφέ απαιτείται η χρήση πολλαπλών CSS keyframes ή η νεότερη συνάρτηση linear() με πολλαπλά σημεία.

---

Προστασία προσωπικών δεδομένων

Η επεξεργασία και η σχεδίαση της καμπύλης πραγματοποιούνται τοπικά. Η καμπύλη σχεδιάζεται απευθείας στον περιηγητή σας. Καμία από τις ρυθμίσεις σας δεν μεταφορτώνεται στο BroBroGo.

---

Συχνές Ερωτήσεις (FAQ)

Τι σημαίνουν οι δύο λαβές και οι τέσσερις αριθμοί;

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

Πώς χρησιμοποιώ την τιμή στο CSS μου;

Αντιγράψτε την τιμή cubic-bezier() και τοποθετήστε τη σε οποιαδήποτε ιδιότητα χρονισμού — transition-timing-function, animation-timing-function, ή στη συντομογραφία, π.χ. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Οι λέξεις-κλειδιά ease, ease-in, ease-out και ease-in-out είναι απλώς σταθερές καμπύλες cubic-bezier, οπότε επιλέγοντας ένα από αυτά τα πρότυπα βλέπετε την ακριβή τιμή πίσω από τη λέξη-κλειδί.

Μπορεί να δημιουργήσει εφέ αναπήδησης (bounce) ή ελαστικότητας;

Όχι από μόνη της. Μια μεμονωμένη καμπύλη cubic-bezier μπορεί να κάνει προετοιμασία κίνησης (anticipation) και υπέρβαση ορίου (overshoot) — τα πρότυπα «back» τραβούν τη μία λαβή έξω από το πλαίσιο για να κάνουν ακριβώς αυτό — αλλά μπορεί να κινηθεί μόνο προς μία κατεύθυνση και μετά να σταθεροποιηθεί. Τα εφέ αναπήδησης (bounce) ή ελαστικότητας (elastic) αλλάζουν κατεύθυνση αρκετές φορές, κάτι που δεν μπορεί να εκφραστεί με μία μόνο καμπύλη cubic-bezier. Για αυτά απαιτούνται CSS keyframes ή η συνάρτηση linear() με πολλά σημεία.