23: Κινούμενη εικόνα SVG με SMIL - CSS-Κόλπα

Παρόλο που η κινούμενη εικόνα SVG με CSS μπορεί να είναι πιο άνετη για το μέσο front-end άτομο, το SVG έχει έναν άλλο τρόπο να ενσωματωθεί η κινούμενη εικόνα απευθείας στην ίδια τη σύνταξη SVG. Αυτό ακριβώς καλύπτουμε εν συντομία σε αυτό το βίντεο, αλλά αν θέλετε έναν πλήρη οδηγό αναφοράς, ανατρέξτε σίγουρα στον Οδηγό για SVG Animations (SMIL) της Sara Soueidan εδώ στο CSS-Tricks.

Το SMIL σημαίνει Συγχρονισμένη Γλώσσα Ένταξης Πολυμέσων. Όπως το καταλαβαίνω, αυτό είναι ένα «πράγμα» για τον εαυτό του που τυχαίνει να ενσωματωθεί στο SVG. Αλλά η SVG έχει μερικές από τις δικές της προσθήκες τύπου SMIL. Θα το αναφέρω μόνο ως SMIL, παρόλο που είμαι σίγουρος ότι μερικές φορές είμαι τεχνικά λανθασμένος.

Για πολύ απλές κινούμενες εικόνες, δεν έχει μεγάλη σημασία αν το κάνετε σε SMIL ή CSS, θα κάνει το ίδιο πράγμα στο ίδιο επίπεδο δυσκολίας. Κάποια πράγματα μπορεί να είναι ακόμη πιο εύκολα στο CSS. Αλλά εδώ είναι μερικά πράγματα όπου το SMIL είναι ο τρόπος να πάτε:

• Πρέπει να κινούσετε κάτι που δεν μπορεί να αγγίξει το CSS. Όπως το σχήμα ενός πολυγώνου ή μιας διαδρομής.
• Θέλετε να χρησιμοποιήσετε τα γεγονότα να επηρεάσουν την κίνηση, όπως ένα clickή mouseoverή κάτι τέτοιο.
• Θέλετε να κάνετε πρόσθετα κινούμενα σχέδια, όπως, κινούμενα από οπουδήποτε κι αν βρίσκεστε τώρα άλλα x pixel.
• Θέλετε να έχετε κινούμενα σχέδια που σχετίζονται άμεσα με άλλα κινούμενα σχέδια, όπως, όταν τελειώσει αυτή η κινούμενη εικόνα, ξεκινήστε αυτήν την επόμενη κινούμενη εικόνα (χωρίς χειρισμό χειροκίνητων χρονικών περιόδων).
• Είμαι σίγουρος ότι υπάρχουν περισσότερα.

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

Δείτε το Pen jAipI του Chris Coyier (@chriscoyier) στο CodePen.

Το "σχήμα μορφοποίησης" είναι πραγματικά εξαιρετικά μοναδικό με το SMIL, οπότε εδώ είναι ένα καλύτερο παράδειγμα από το περίεργο που κάναμε στο βίντεο:

Δείτε το κουμπί Pen Shape Morph από τον Chris Coyier (@chriscoyier) στο CodePen.

Σε αυτήν την επίδειξη, τα συμβάντα αντιμετωπίζονται με JavaScript αντί για SMIL. Απλά χαίρομαι που ξέρετε ότι μπορείτε να το κάνετε και αυτό. Οι ενεργοποιητές συμβάντων SMIL είναι δροσεροί, αλλά τότε το πράγμα που χρειάζεται κλικ πρέπει να είναι σε αυτό το SVG και όχι οπουδήποτε αλλού στο DOM.