Διαδρομή μετατόπισης - CSS-Κόλπα

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

Η offset-pathιδιότητα στο CSS καθορίζει μια διαδρομή κίνησης για ένα στοιχείο που πρέπει να ακολουθεί κατά τη διάρκεια της κινούμενης εικόνας. Ακολουθεί ένα παράδειγμα χρησιμοποιώντας τη σύνταξη διαδρομής SVG:

.thing-that-moves ( /* "Old" syntax. Available in Blink browsers as of ~October 2015 */ motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */ offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); )

Αυτή η ιδιότητα δεν μπορεί να είναι κινούμενη εικόνα, αλλά καθορίζει τη διαδρομή για κινούμενη εικόνα. Χρησιμοποιούμε την motion-offsetιδιότητα για να δημιουργήσουμε το κινούμενο σχέδιο. Ακολουθεί ένα απλό παράδειγμα κινούμενης κίνησης-μετατόπισης με κινούμενα σχέδια @keyframes:

.thing-that-moves ( offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; ) @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

Δείτε το απλό παράδειγμα του Animation Along a Path by CSS-Tricks (@ css-tricks) στο CodePen.

Σε αυτήν την επίδειξη, ο πορτοκαλί κύκλος κινείται κατά μήκος που offset-pathορίσαμε στο CSS. Στην πραγματικότητα σχεδιάσαμε αυτό το μονοπάτι στο SVG με τα ίδια ακριβώς path()δεδομένα, αλλά αυτό δεν είναι απαραίτητο για την κίνηση.

Ας πούμε ότι σχεδιάσαμε ένα funky μονοπάτι σε αυτό σε κάποιο λογισμικό επεξεργασίας SVG:

Θα βρούμε ένα μονοπάτι όπως:

Η dτιμή του χαρακτηριστικού είναι αυτό που ακολουθούμε και μπορούμε να το μετακινήσουμε κατευθείαν στο CSS και να το χρησιμοποιήσουμε ως offset-path:

Δείτε το Pen zEpLRo by CSS-Tricks (@ css-tricks) στο CodePen.

Σημειώστε τις τιμές χωρίς μονάδα στη σύνταξη διαδρομής. Εάν εφαρμόζετε το CSS σε ένα στοιχείο εντός του SVG, αυτές οι τιμές συντεταγμένων θα χρησιμοποιήσουν το σύστημα συντεταγμένων που έχει ρυθμιστεί εντός αυτών των SVG viewBox. Εάν εφαρμόζετε την κίνηση σε κάποιο άλλο στοιχείο HTML, αυτές οι τιμές θα είναι pixel.

Επίσης, σημειώστε ότι χρησιμοποιήσαμε ένα γραφικό ενός δακτύλου που δείχνει για να δείξουμε πώς περιστρέφεται αυτόματα το στοιχείο, ώστε να βλέπει προς τα εμπρός. Μπορείτε να το ελέγξετε με offset-rotate:

.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* set angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )

Αξίες

Όσο καλύτερα μπορούμε να πούμε, path()και noneείναι οι μόνες τιμές εργασίας για offset-path.

Η offset-pathιδιοκτησία υποτίθεται ότι αποδέχεται όλες τις ακόλουθες τιμές.

path(): Καθορίζει μια διαδρομή στη σύνταξη συντεταγμένων SVG
url: Αναφέρει το αναγνωριστικό ενός στοιχείου SVG για χρήση ως διαδρομή κίνησης
basic-shape: Καθορίζει ένα σχήμα σύμφωνα με την προδιαγραφή CSS Shapes, το οποίο περιλαμβάνει:
- circle()
- ellipse()
- inset()
- polygon()
Παρεμπιπτόντως, το Clippy είναι ένα φοβερό εργαλείο για τη δημιουργία βασικών τιμών σχήματος.
none: Καθορίζει καθόλου διαδρομή κίνησης

Ακολουθούν ορισμένες δοκιμές:

Δείτε τη δοκιμή τιμών κίνησης στυλό από CSS-Tricks (@ css-tricks) στο CodePen.

Ακόμα και το να πείτε σε ένα στοιχείο SVG να αναφέρεται σε μια διαδρομή που ορίζει το ίδιο SVG μέσω url()δεν φαίνεται να λειτουργεί.

Με το Web Animations API

Ο Dan Wilson διερεύνησε μερικά από αυτά στη μελλοντική χρήση: CSS Motion Paths. Έχετε πρόσβαση σε όλα αυτά τα ίδια πράγματα σε JavaScript μέσω του Web Animations API. Για παράδειγμα, ας υποθέσουμε ότι έχετε ορίσει ένα offset-pathCSS, μπορείτε ακόμα να ελέγξετε την κινούμενη εικόνα μέσω JavaScript:

Δείτε το Pen CSS MotionPath από CSS-Tricks (@ css-tricks) στο CodePen.

Περισσότερα παραδείγματα

Προσοχή! Πολλά από αυτά δημιουργήθηκαν πριν από την αλλαγή από την κίνηση-ονομασία σε όφσετ- *. Θα πρέπει να είναι αρκετά εύκολο να τα διορθώσετε εάν είστε τόσο διατεθειμένοι.

Δείτε το στυλό Whoosh! από τον Merih Akar (@merih) στο CodePen.

Δείτε το στυλό pJarJO του Eric Willigers (@ericwilligers) στο CodePen.

Δείτε το αυτοκίνητο Pen κλίμακας σε κίνηση-διαδρομή από τον Kseso (@Kseso) στο CodePen.

Δείτε το Pen CSS Motion Path Airplane του Ali Klein (@AliKlein) στο CodePen.

Δείτε το Pen CSS Animate στο SVG Path από το 一丝 (@yisi) στο CodePen.

Δείτε το Pen Motion Path Infinity από τον Dan Wilson (@danwilson) στο CodePen.

Δείτε το Pen CSS Motion Path Spiral του Dan Wilson (@danwilson) στο CodePen.

Δείτε το στυλό zGzJYd από 一丝 (@yisi) στο CodePen.

Υποστήριξη προγράμματος περιήγησης

Η offset-pathιδιότητα εξακολουθεί να θεωρείται πειραματικό χαρακτηριστικό κατά τη στιγμή αυτής της γραφής. Εάν η τρέχουσα έλλειψη υποστήριξης του προγράμματος περιήγησης σάς κάνει να διστάσετε να τη χρησιμοποιήσετε σε ένα έργο, τότε ίσως θελήσετε να εξετάσετε το ενδεχόμενο να χρησιμοποιήσετε το GSAP για αυτό το επίπεδο κινούμενης εικόνας, το οποίο καλύπτει και η Sarah στην ανάρτησή της. Αυτό θα σας προσφέρει την ευρύτερη υποστήριξη του προγράμματος περιήγησης αυτήν τη στιγμή.

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.

Επιφάνεια εργασίας

Χρώμιο	Firefox	ΙΕ	Ακρη	Σαφάρι
46	72	Οχι	79	Οχι

Κινητό / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Οχι

Από τα Chrome 46 και Opera 33 (και τις σχετικές εκδόσεις για κινητά), έχουμε "αρχική υποστήριξη" στο Blink (χωρίς σημαία).

Υπάρχει άλλος τρόπος να το κάνετε αυτό;

Η δική μας Sarah Drasner έγραψε για το SMIL, την εγγενή μέθοδο του SVG για κινούμενα σχέδια και πώς animateMotionχρησιμοποιείται για την κίνηση αντικειμένων κατά μήκος μιας διαδρομής SVG Μοιάζει:

Αλλά το SMIL έχει καταργηθεί! Αυτό δεν συνιστάται.

Το GreenSock είναι ένας άλλος τρόπος, ωστόσο, συνιστάται. Η Sarah μιλά για αυτό στο GSAP + SVG για χρήστες ενέργειας: Motion Along A Path (δεν απαιτείται SVG). Παράδειγμα:

Δείτε το Pen Demo για αυτόματη περιστροφή true / false από τη Sarah Drasner (@sdras) στο CodePen.