Σκονάκι μεθόδων ομαλής μετάβασης (easing function)

Οι μέθοδοι ομαλής μετάβασης υποδεικνύουν τον ρυθμό μεταβολής μιας παραμέτρου με το πέρασμα του χρόνου.

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

Αυτή η σελίδα σας βοηθάει να διαλέξετε την καταλληλότερη μέθοδο ομαλής μετάβασης (easing function).

Ανοιχτός Κώδικας

Βοηθήστε στη μετάφραση αυτής της ιστοσελίδας στη γλώσσα σας

easeInSine

easeOutSine

easeInOutSine

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

easeOutCirc

easeInOutCirc

easeInBack

easeOutBack

easeInOutBack

easeInElastic

easeOutElastic

easeInOutElastic

easeInBounce

easeOutBounce

easeInOutBounce

Όλες οι μέθοδοι ομαλής μετάβασης

CSS

Στη CSS, οι ιδιότητες transition και animation σας επιτρέπουν να προσδιορίσετε μια μέθοδο ομαλής μετάβασης.

.block {
	transition: transform 0.6s ;
}

Επεξεργαστείτε στο cubic-bezier.com.

Στη CSS, μπορείτε να χρημοποιήσετε αυτή τη μέθοδο εντός @keyframes:

Μέγεθος

Φορτώνει...

Θέση

Φορτώνει...

Διαφάνεια

Φορτώνει...

PostCSS

Στην PostCSS, είναι πιο εύκολο να περιγράψουμε τη μέθοδο ομαλής μετάβασης. Υπάρχει ένα πρόσθετο plugin, postcss-easings, το οποίο παίρνει πληροφορίες μετάβασης από εκείνον τον ιστότοπο.

.block {
	transition: transform 0.6s ;
}

Η δήλωση αυτή μετατρέπεται σε αυτήν που περιγράφεται παραπάνω.

Δυστυχώς, αυτή η μέθοδος ομαλής μετάβασης δεν μπορεί να εφαρμοστεί με το PostCSS πρόσθετο. Εναλλακτικά μπορείτε να χρησιμοποιήσετε τη μέθοδο @keyframes, βλέπε παραπάνω.

Διαβάθμιση

Είναι δυνατόν να ζωγγραφίσετε μια διαβάθμιση χρησιμοποιόντας το πρόσθετο postcss-easing-gradients.

.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}

Μαθηματική συνάρτηση

Παρακάτω βλέπετε τον κώδικα αυτής της μεθόδου ομαλής μετάβασης γραμμένο σε TypeScript. Η μεταβλητή x αντιπροσωπεύει την (απόλυτη) πρόοδο του κινουμένου εφέ στο εύρος από το 0 (αρχή του εφέ) μέχρι το 1 (τέλος εφέ).

function (x: number): number {

}

function (x: number): number {

}

Συγκρίνετε τις αλλαγές με/χωρίς μέθοδους ομαλής μετάβασης για:

Αυτή η μέθοδος:

Αυτή η μέθοδος

Γραμμική μέθοδος:

Γραμμική μέθοδος