Το JavaScript είναι ο τελευταίος τρόπος με τον οποίο θα καλύψουμε την κίνηση του SVG. Κοιτάξαμε το CSS, το οποίο είναι υπέροχο και αρκετά άνετο, αλλά δεν μπορεί να κάνει μια σειρά από ιδιότητες SVG που μπορεί να θέλετε να δημιουργήσετε. Στη συνέχεια, κοιτάξαμε το SMIL, το οποίο είναι μια δηλωτική σύνταξη ακριβώς στον ίδιο τον κώδικα SVG, το οποίο είναι πιο ισχυρό καθώς μπορεί να κινήσει περισσότερα πράγματα, συμπεριλαμβανομένου του ίδιου του σχήματος του στοιχείου.
Το JavaScript μπορεί να κάνει ό, τι μπορεί να κάνει και τα δύο από αυτά. Απλώς κοστίζει είτε γράφοντας πολύ περίπλοκο κώδικα μόνοι σας, είτε το γενικό κόστος μιας βιβλιοθήκης για να σας βοηθήσει. Αλλά μόλις ξεκινήσετε, η σύνταξη μπορεί να είναι πραγματικά υπέροχη και φιλική προς τα κινούμενα σχέδια και η απόδοση μπορεί στην πραγματικότητα να είναι κορυφαία.
Ένα άλλο πλεονέκτημα για τη χρήση JavaScript για SVG animations είναι η υποστήριξη. Υπάρχουν πολλές ιδιορρυθμίες που πρέπει να ανησυχείτε κατά την κίνηση του SVG. Ορισμένα προγράμματα περιήγησης δεν υποστηρίζουν μετασχηματισμούς σε στοιχεία. Ορισμένα προγράμματα περιήγησης κάνουν περίεργα πράγματα με μεγέθυνση σελίδων. Μερικά είναι ασυνεπή με την προέλευση του μετασχηματισμού. Οι βιβλιοθήκες JavaScript συχνά βοηθούν σε αυτά τα προβλήματα.
Ενώ μιλάμε ειδικά για κινούμενα σχέδια, πολλές βιβλιοθήκες JavaScript SVG αφορούν την εργασία με το SVG γενικά. Μπορούν να το δημιουργήσουν και να το χειριστούν, να αποκτήσουν πρόσβαση σε ιδιότητες από το στοιχείο, να τα αλλάξουν κ.λπ. Κάτι σαν να προσθέτετε ένα πιο ισχυρό API στο SVG.
Snag.svg - "jQuery για SVG"
Βασικό παράδειγμα χρήσης του Snap.svg:
Δείτε το Pen BhHix του Chris Coyier (@chriscoyier) στο CodePen.
Ένα άλλο πράγμα που κάναμε σε αυτό το βίντεο με το Snap.svg είναι να μετατρέψουμε αυτήν την πένα κινουμένων σχεδίων CSS σε Snap.svg, διδάσκοντας ότι μπορούμε να χρησιμοποιήσουμε το Snap.svg για να δουλέψουμε με ενσωματωμένο SVG ήδη στη σελίδα. Η Adobe έχει συλλέξει αρκετά παραδείγματα.
Raphael - παλαιότερη βιβλιοθήκη από τον ίδιο δημιουργό με το Snap.svg
SVG.js - "Μια ελαφριά βιβλιοθήκη για χειρισμό και κινούμενη εικόνα SVG." Εδώ είναι το ρολόι επίδειξης που εξετάσαμε, δείχνοντας πώς λειτουργούν αυτά τα κινούμενα σχέδια χειραγωγώντας γρήγορα το DOM.
D3.js - «Το D3.js είναι μια βιβλιοθήκη JavaScript για χειρισμό εγγράφων με βάση δεδομένα. Το D3 σάς βοηθά να ζωντανέψετε δεδομένα χρησιμοποιώντας HTML, SVG και CSS. " Ακολουθεί ένα σεμινάριο για να ξεκινήσετε να δημιουργείτε SVG μαζί του και ένα άλλο εισαγωγικό animation μαζί του.
GreenSock - "Εξαιρετικά υψηλής απόδοσης, επαγγελματικής ποιότητας κινούμενα σχέδια για τον σύγχρονο ιστό." Το GreenSock αφορά γενικά κινούμενα σχέδια στον Ιστό, αλλά υποστηρίζει το SVG. Εδώ είναι ένα στυλό όπου μπορείτε να δείτε πώς λειτουργεί.
Velocity.js - "Ταχεία κινούμενη εικόνα JavaScript". Επίσης, μια βιβλιοθήκη σχετικά με την κινούμενη εικόνα στον ιστό γενικά, που συμβαίνει να υποστηρίζει το SVG. Ο Τζούλιαν Σάπιρο το δημιούργησε και έχει γράψει για ποιο λόγο το κινούμενο σχέδιο JavaScript μπορεί πραγματικά να είναι το πιο αποδοτικό στυλ κινούμενης εικόνας, καθώς και πώς λειτουργεί το Velocity.js. Ακολουθεί μια πολύ απλή επίδειξη που κινεί ορισμένες ιδιότητες που σχετίζονται με το SVG.
Είστε επίσης ελεύθεροι να το κάνετε μόνοι σας με κινούμενα σχέδια JavaScript χωρίς τη βοήθεια ενός πλαισίου. Θυμηθείτε ότι το inline SVG βρίσκεται στο DOM, οπότε όλα τα συνηθισμένα στοιχεία του DOM API είναι διαθέσιμα σε εσάς. Κάπως σαν εσένα πώς δεν χρειάζεσαι πραγματικά το jQuery για να δουλέψεις με το DOM, απλώς το καθιστά πιο εύκολο. Εδώ είναι ένα παράδειγμα που κάνει τα πράγματα με τον δικό του τρόπο που είναι αρκετά ενδιαφέρον.