30 Awesome SVG Animation Για την έμπνευσή σας

Οι σχεδιαστές που χρησιμοποιούνται για τη δημιουργία κινούμενων εικόνων σε στοιχεία HTML χρησιμοποιώντας το CSS. Ωστόσο, λόγω των περιορισμών των στοιχείων HTML στη δημιουργία μοτίβων, σχημάτων και άλλων, μετατρέπονται φυσικά σε SVG, η οποία προσφέρει πιο ενδιαφέρουσες δυνατότητες.

Εργαζόμενοι με το SVG, απολαμβάνουμε καλή υποστήριξη του προγράμματος περιήγησης για animation SVG και έχουμε περισσότερους τρόπους για να δημιουργήσουμε νέα κινούμενα σχέδια. Μπορείτε να χρησιμοποιήσετε τόσο την ενσωματωμένη λειτουργία animation SVG είτε animation CSS3 (σημειώστε ότι δεν μπορούν να γίνουν όλα από το CSS, έτσι ώστε να υπάρχει ακόμη ανάγκη JavaScript). Ένας άλλος τρόπος είναι να χρησιμοποιήσετε μηχανές JavaScript όπως GSAP ή Snap. Το JS είναι μια καλή πρακτική για τη δημιουργία animation.

Εδώ έχω συντάξει κάποια καταπληκτικά animated SVG. Κάποιοι χρησιμοποιούν animation SVG, άλλοι χρησιμοποιούν μετασχηματισμό CSS για βασική κινούμενη εικόνα και τα υπόλοιπα χρησιμοποιούν τη βοήθεια JavaScript.

Border Animation από τον Sean McCaffery

Δημιουργείται μόνο με CSS, μια οριακή επιφάνεια γύρω από το κείμενο, όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το κείμενο “ΦΤΕΡΟΥΓΙΖΩ” εντολή.

Ελαστική πλευρική γραμμή SVG από τον Nikolay Talanov

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

Τραβήξτε προς ανανέωση από τον Nikolay Talanov

Οι περισσότερες σελίδες σας επιτρέπουν να “τραβάω κάτω” στη σελίδα για ανανέωση. Με αυτό το κινούμενο σχέδιο, όταν εσύ “ελευθέρωση” σελίδα, το εικονίδιο "Αποστολή" αλλάζει σε εικονίδιο "Αεροπλάνο" και απελευθερώνεται στον αέρα.

Κινούμενη κλίση σε κείμενο από τον Patrick Young

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

Καρδιά Animation από τον Nikolay Talanov

Αυτή η κινούμενη εικόνα σας δείχνει πώς γίνεται ένα εικονίδιο καρδιάς από δύο κύκλους και ένα τετράγωνο. Ο μετασχηματισμός γίνεται με animation CSS.

Ας ταξιδέψουμε από το jjperezaguinaga

Ένα κινούμενο σχέδιο που απεικονίζει πόλεις και δημοφιλείς τουριστικούς προορισμούς στον κόσμο. Οι κινήσεις και οι μετασχηματισμοί δημιουργούνται χρησιμοποιώντας CSS animation.

Μενού εναλλαγής κινούμενων εικόνων από τον Tamino Martinius

Μια μορφοποιητική κινούμενη εικόνα της χάμπουργκερ που μετατρέπεται σε μια σταυροειδής εικόνα. Δείτε πόσο ομαλή είναι η μετάβαση μεταξύ των δύο αντικειμένων.

Κινούμενοι Infographic από τον Sdras

Ένα φοβερό animation από τη Sarah Drasner, που τροφοδοτείται από το χρονοδιάγραμμα GSAP. Πρόκειται για μια ζωγραφική ζωή, που γίνεται με κινούμενα σχέδια. Χρησιμοποιήστε το ρυθμιστικό για να αποκτήσετε πρόσβαση στα πλαίσια από οποιοδήποτε σημείο.

Rain-Bros δεν αρέσει το JS από cihadturhan

Ένα μοναδικό και αστείο animation βρόχου που απεικονίζει το περίπατο των χαρακτήρων. Η κίνηση των αντικειμένων σε αυτό το demo είναι ένας συνδυασμός κινούμενων εικόνων SVG και CSS3. Τα πόδια χρησιμοποιούν κινούμενα σχέδια SVG, ενώ άλλα τμήματα χρησιμοποιούν κινούμενη εικόνα CSS3.

Ρολόι του Μοχάμαντ Μωέμπιφαρ

Παρακολουθήστε την ομαλή κίνηση του μεταχειρισμένου σε αυτό το ρολόι που δείχνει την τρέχουσα ώρα. Η κινούμενη εικόνα είναι πλήρως κατασκευασμένη χρησιμοποιώντας τη λειτουργία animation SVG.

Rainbow Rocket Man από τον Chris Gannon

Ένας αστροναύτης που πυροβολεί στο διάστημα με το πακέτο τζετ που τροφοδοτείται με ουράνιο τόξο (?). Νίκαια κινούμενα σχέδια που έγιναν χρησιμοποιώντας την προσθήκη GSAP Tweenmax.

Κινούμενο εικονίδιο από τον Luigi De Rosa

Ωστόσο, πάνω από αυτά τα κινούμενα εικονίδια SVG για να ελέγξετε τι μπορούν να κάνουν. Ο δημιουργός το έκανε χρησιμοποιώντας το GSAP.

Επίπεδο χώρου εργασίας από Hoàng Nhật

Το κινούμενο σχέδιο απεικονίζει ένα χώρο εργασίας σε επίπεδο στυλ σχεδιασμού. Ο δημιουργός χρησιμοποίησε το GSAP για να κάνει αυτό το φοβερό κινούμενο σχέδιο μιας θέσης εργασίας.

Το εικονίδιο κινούμενων εικόνων με δυνατότητα κλικ από τον Hamish Williams

Αυτό είναι ένα δροσερό κινούμενο σχέδιο χρησιμοποιεί τη βιβλιοθήκη snap.svg. Κάντε κλικ για να δείτε την αλληλογραφία “Απεσταλμένα”.

Καταδύσεις από τον Chris Gannon

Έχετε ποτέ παραλείψει πέτρες στην επιφάνεια μιας λίμνης; Εδώ είναι ένα απλό animation διαδρομής SVG το οποίο δείχνει αυτό αλλά χωρίς πέτρες και χωρίς λίμνη.

Πρόταση για το διαδίκτυο από το LegoMushroom

Έχει κινούμενα σχέδια, ωραία μουσική, έξοχη δροσερή είσοδο για το κείμενο, τι δεν συμπαθεί; Αυτό είναι χτισμένο με mo.js, μια γραφική βιβλιοθήκη κινήσεων JavaScript.

Κινούμενη γραμματοσειρά γραφής από τον Lee Porter

Εκτός από τη χρήση του SVG για να σχεδιάσετε το στυλ γραφικών με κινούμενα σχέδια, μπορείτε να το χρησιμοποιήσετε στην τυπογραφία όπως αυτό που έκανε αυτός ο δημιουργός. Το φαινόμενο θολώματος το κάνει πιο φοβερό.

Gooey μενού από Lucas Bebber

Διασκεδάστε με το φαινομενικό αποτέλεσμα σε αυτό το σχέδιο, το οποίο γίνεται χρησιμοποιώντας το φίλτρο SVG και προσθέτοντας κινούμενα γραφικά CSS. Το αποτέλεσμα είναι ρεαλιστικό και πραγματικά δροσερό και μπορείτε να παίξετε με τέσσερις διαφορετικές εκδόσεις.

Νέο κέικ από τον Marco Barría

Πώς να φτιάξετε μια στρώση γενεθλίων σε στρώσεις με animation SVG και CSS.

Σας ευχαριστώ από τη Rachel Smith

Απλά δείτε αυτό το φοβερό animation μιας απλής ευχαριστήρια σημείωσης. Δημιουργείται χρησιμοποιώντας βιβλιοθήκη SVG και GSAP TweenMax.

CSS vs SVG από τον Mario Sanchez Maselli

Τώρα, ας δούμε τη σύγκριση σχετικά με το CSS και το animation SVG, βλέπετε τη διαφορά?

Περπατώντας σκυλί από τον Mark Nelson

Ένας άλλος τρόπος για να ζωντανέψετε το SVG είναι να χρησιμοποιήσετε εικόνες sprites, όπως το έκανε ο δημιουργός.

Υδραυλικό φορτωτή από Leela

Ένα δημιουργικό έργο που έγινε με καθαρή κίνηση SVG (SMIL). δεν CSS ή JS να ζωντανέψουν τα πράγματα εδώ.

Λογότυπο Animation από τον Adem ilter

Εδώ είναι μια ωραία κινούμενη εισαγωγή intro με τη χρήση inline animation SVG. Δεν χρησιμοποιήθηκαν CSS ή JS για να κάνουν τα πάντα να λειτουργούν.

Στατιστικά κινούμενα σχέδια από τον Jonas Badalic

Ένα όμορφο στατιστικό γράφημα με animation SVG που τροφοδοτείται από τη βιβλιοθήκη Snap.SVG.

Ouroboros από τον Noel Delgado

Ένα καταπληκτικό μονοπάτι animation SVG. Πρώτα ο δημιουργός συνέταξε μια διαδρομή διαδρομής στο SVG, πριν χρησιμοποιήσει το tween.js για να προσθέσει κινούμενα σχέδια.

Δημιουργικές επιπτώσεις του Gooey από τον Lucas Bebber

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

Ρίξτε την αγελάδα από τη Sarah Drasner

Αυτό είναι ένα animation SVG που τροφοδοτείται από το TweenMax αλλά μόνο για διασκέδαση. Κρατήστε και σύρετε την αγελάδα γύρω από τον πλανήτη. Θα περιστραφεί σε "τροχιά".

Κινούμενο λογότυπο από Ali

Η κίνηση θα μπορούσε να είναι μια ωραία μικρή προσθήκη για το λογότυπο της μπύρας. Οι ωραίες μικρές κυμαινόμενες φυσαλίδες είναι χτισμένες αποκλειστικά με τη σύνταξη της φυσικής κίνησης SVG.