Μια ματιά στην κλιμάκωση γραφικών διανυσματικών γραφικών (SVG)
Σήμερα θα συνεχίσουμε τη συζήτησή μας Κλίμακα διανυσματικών διανυσμάτων (SVG), και αυτή τη φορά θα συνεργαστούμε SVG Animation. Μην φοβάσαι όμως, το SVG Animation είναι σχετικά εύκολο και στην πραγματικότητα σε αυτή τη θέση θα ξεκινήσουμε από τα βασικά.
Βασική εφαρμογή
Η κίνηση στο SVG μπορεί να γίνει μέσω
Όπως μπορείτε να δείτε από το απόσπασμα κώδικα παραπάνω, προσθέτουμε το
attributeName: Αυτό το χαρακτηριστικό καθορίζει το χαρακτηριστικό του στοιχείου που θα επηρεαστεί στο κινούμενο σχέδιο.
από: Το χαρακτηριστικό αυτό είναι προαιρετικό, μπορούμε να καθορίσουμε μια ακριβή τιμή ή να την αφήσουμε να την αφήσει να ξεκινήσει από όπου ήταν.
προς το: Αυτό το χαρακτηριστικό καθορίζει την κατεύθυνση της κινούμενης εικόνας. Ανάλογα με την καθορισμένη τιμή στο attributeName, τα αποτελέσματα μπορεί να διαφέρουν. Αλλά σε αυτό το παράδειγμα θα επεκτείνει το ύψος.
dur: Αυτό το χαρακτηριστικό καθορίζει τη διάρκεια της κινούμενης εικόνας. Η τιμή αυτού του χαρακτηριστικού εκφράζεται σε σύνταξη τιμής ρολογιού. Για παράδειγμα, 02:33 αντιπροσωπεύει 2 λεπτά και 33 δευτερόλεπτα, ενώ 3h είναι ίσο με 3 ώρες, αλλά δεν χρειαζόμαστε τόσο πολύ και έτσι καθορίσαμε τη διάρκεια για μόλις 3s ή 3 δευτερόλεπτα.
Το ίδιο πράγμα πηγαίνει r).
- Βασική επίδειξη εφαρμογής
Κινούμενο Στοιχείο
Κατά τη μετακίνηση στοιχείων SVG, πρέπει μόνο να στοχεύσουμε τη συντεταγμένη του στοιχείου Χ και y.
Στο παραπάνω παράδειγμα, μετακινούμε το ορθογώνιο από 0 προς το 200 σε 3 δευτερόλεπτα, το ορθογώνιο θα εμφανιστεί να κινείται οριζόντια από τα αριστερά προς τα δεξιά. Επίσης, αν κοιτάξετε προσεκτικά προσθέσαμε επίσης ένα άλλο χαρακτηριστικό στο γέμισμα.
γέμισμα το χαρακτηριστικό εδώ δεν έχει να κάνει με το χρώμα φόντου όπως στα άλλα στοιχεία SVG. Αυτό το χαρακτηριστικό καθορίζει τον τρόπο με τον οποίο η κινούμενη εικόνα θα λειτουργήσει μετά τη λήξη της διάρκειας. Σε αυτό το παράδειγμα εμείς πάγωμα το επηρεασμένο στοιχείο, ώστε να παραμένει εκεί όπου τελειώνει η κινούμενη εικόνα.
Λειτουργεί επίσης παρόμοια με το cx ή cy, όπως έτσι:
- Μετακίνηση στοιχείων επίδειξης
Animate Multiple Attributes
Μέχρι στιγμής, στοχεύουμε μόνο ένα γνώρισμα που πρέπει να κινούμαστε, αλλά είναι επίσης δυνατό να ζωντανέψουμε περισσότερα από ένα χαρακτηριστικά ταυτόχρονα. Το παρακάτω παράδειγμα δείχνει πώς το κάνουμε:
Όπως μπορείτε να δείτε, λειτουργεί με παρόμοιο τρόπο, μόνο τώρα έχουμε δύο
- Επίδειξη πολλαπλών χαρακτηριστικών
Μετά από ένα μονοπάτι
Στην προηγούμενη ανάρτησή μας Εργασία με το κείμενο στο SVG, σας έχουμε δείξει πώς να μεταφέρετε το κείμενο σε ένα μονοπάτι. Είναι επίσης δυνατό να γίνει το ίδιο πράγμα μέσα SVG Animation, μπορούμε να ζωντανέψουμε ένα στοιχείο για να ακολουθήσουμε ένα μονοπάτι. Ακολουθεί ένα παράδειγμα.
Η διαδρομή ορίζεται καλύτερα μέσα σε ένα ταυτότητα με
Αυτό είναι, τώρα ας το δούμε στη δράση.
- Μετά την επίδειξη διαδρομής
Μετασχηματισμοί
Μπορούμε επίσης να χρησιμοποιήσουμε μετασχηματισμούς όπως κλίμακα, μεταφράζω και γυρίζω για το Animation, και θα το χρησιμοποιήσουμε
Οι μετασχηματισμοί στο SVG μοιράζονται παρόμοιες αρχές με το CSS3 και το καλύψαμε αρκετά ολοκληρωτικά στην προηγούμενη μας δημοσίευση σχετικά με το CSS3 2D Transformation.
- Demo μετασχηματισμού
Τελικές σκέψεις
Ανάλογα με την ικανότητά σας στο SVG Animation μπορείτε να δημιουργήσετε κάτι τέτοιο.
Ένα πλεονέκτημα της χρήσης του SVG Animation over Flash Animation είναι ότι δεν βασίζεται σε πρόσθετα τρίτων για να λειτουργήσει και επίσης σημαντικά ταχύτερα από το Flash. Αφού η Adobe σταματήσει την υποστήριξη Flash στο Android, ίσως θελήσετε να δοκιμάσετε αυτήν την προσέγγιση για την προβολή κινούμενης εικόνας στον επόμενο ιστότοπό σας.
Περαιτέρω αναφορές
- SVG Animate Documentation
- Προηγμένες τεχνικές αναπαραγωγής SVG
- Προβολή επίδειξης
- Λήψη πηγής
