Το Animating SVG είναι λίγο μοναδικό, καθώς υπάρχουν τρεις διαφορετικοί τρόποι με τους οποίους μπορείτε να το προσεγγίσετε.
1. Κινούμενη εικόνα με CSS @keyframes
Τα στοιχεία SVG μπορούν να στοχευτούν και να στιλιστούν με CSS. Δηλαδή, μπορείτε να εφαρμόσετε κινούμενα σχέδια μέσω @keyframes. Σαν αυτό:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Μπορείτε να επιλέξετε κινούμενη εικόνα με αυτόν τον τρόπο εάν…
- Το κινούμενο σχέδιο είναι αρκετά απλό.
- Το μόνο που χρειάζεται είναι να κινούμε ιδιότητες που μπορεί να κινούμε το CSS
- Γνωρίζετε ήδη και είστε άνετοι με κινούμενες εικόνες CSS.
2. Κινούμενη εικόνα με SMIL
Υπάρχει μια σύνταξη για κινούμενες εικόνες απευθείας στο SVG. Εδώ είναι ένα πολύ απλό παράδειγμα:
Εδώ είναι ένα μεγάλο σεμινάριο για όλα αυτά που είναι SMIL.
Μπορείτε να επιλέξετε κινούμενη εικόνα με αυτόν τον τρόπο εάν…
- Πρέπει να δημιουργήσετε ιδιότητες που δεν μπορούν να κάνουν το CSS, όπως το ίδιο το σχήμα.
- Χρειάζεστε άλλες ειδικές λειτουργίες SMIL, όπως να ξεκινήσετε μια κινούμενη εικόνα όταν η άλλη τελειώνει χωρίς να συγχρονίζονται χειροκίνητα οι διάρκειες / καθυστερήσεις. Ή πράγματα αλληλεπίδρασης, όπως να ξεκινήσετε μια κινούμενη εικόνα με ένα κλικ.
3. Κινούμενη εικόνα με JavaScript
Με το JavaScript, έχετε πρόσβαση σε πράγματα όπως το requestAnimationFrame (ή άλλους βρόχους), ώστε να μπορείτε να κάνετε κινούμενες εικόνες μόνο με τις ταχύτατα μεταβαλλόμενες τιμές ιδιοκτησίας. Υπάρχουν επίσης πλαίσια εκεί έξω για εργασία με SVG που συνήθως έχουν ενσωματωμένα κινούμενα σχέδια. Ή κινούμενα σχέδια που λειτουργούν με SVG. Όπως το SnapSVG, το GreenSock, το SVG.js ή το Velocity.js.
Ακολουθεί ένα παράδειγμα με το SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Μπορείτε να επιλέξετε κινούμενη εικόνα με αυτόν τον τρόπο εάν…
- Εργάζεστε σε JavaScript ούτως ή άλλως, ίσως η κινούμενη εικόνα σας να σχετίζεται με δεδομένα που λαμβάνετε με το JSON ή παρόμοια.
- Χρειάζεστε ούτως ή άλλως τη JavaScript, επειδή χρειάζεστε τη λογική ή τα μαθηματικά ή κάτι άλλο πραγματικά δυνατό μόνο εκεί.
- Σας ενδιαφέρει η JavaScript να επιλύσει ορισμένα σφάλματα για εσάς.
- Το εύρος της κίνησης είναι αρκετά μεγάλο / περίπλοκο και χρειάζεστε την αφαίρεση και την οργάνωση που μπορεί να παρέχει η JavaScript.
Διαδήλωση
Δείτε τους στυλό τρεις τρόπους να ζωγραφίσετε το SVG του Chris Coyier (@chriscoyier) στο CodePen.
Δεν επηρεάζει τελικά το πώς χρησιμοποιείτε το SVG τις επιλογές σας;
Κάνει. Εάν χρησιμοποιείτε SVG-as- , δεν θα μπορείτε να χρησιμοποιήσετε κινούμενες εικόνες CSS από άλλο φύλλο στυλ. Όμως, είστε ότι οι κινούμενες εικόνες SMIL θα λειτουργούν σε ορισμένα προγράμματα περιήγησης (κατά τη στιγμή αυτής της γραφής, Chrome ναι, Firefox όχι) Δεν θα εκπλαγώ αν το ενσωματωμένο CSS σε αρχεία SVG λειτουργεί ή θα λειτουργήσει μια μέρα. JavaScript, πιθανώς όχι.
Εάν χρησιμοποιείτε SVG σε εικόνα φόντου CSS, φαντάζομαι ότι είναι μια παρόμοια ιστορία όπως παραπάνω.
Εάν χρησιμοποιείτε inline , όλες οι δυνατότητες είναι ανοιχτές σε εσάς.
Εάν χρησιμοποιείτε SVG μέσω objectή iframe, θα πρέπει να ενσωματώσετε τα σενάρια / στυλ απευθείας στο SVG για να λειτουργήσει.