Anime.js - Μια ελαφριά βιβλιοθήκη ζωγραφικής JavaScript

Web animation έχει προχωρήσει πολύ. Όχι μόνο οι προγραμματιστές μπορούν να κάνουν οποιαδήποτε κινούμενη εικόνα χρησιμοποιώντας ένα combo του CSS / SVG / JS, αλλά υπάρχουν δεκάδες ελεύθερες βιβλιοθήκες για να εξοικονομήσετε χρόνο στη διαδικασία.

Ένα από τα αγαπημένα μου είναι Anime.js, μια εντελώς δωρεάν, ανοιχτή πηγή Βιβλιοθήκη κινήσεων JavaScript.

Αυτή η βιβλιοθήκη μπορεί κάντε όλα. Του βασισμένο στο JavaScript αλλά επίσης βασίζεται σε CSS animations. Μπορείτε να στοχεύσετε μεμονωμένα στοιχεία σελίδας μέσω του DOM ή μπορείτε ακόμη και να στοχεύσετε προσαρμοσμένα αρχεία SVG.

Όλα τα έγγραφα είναι αυτο-φιλοξενείται στο GitHub, έτσι ίσως χρειαστεί να μετακινηθείτε για να βρείτε ακριβώς αυτό που ψάχνετε. Αλλά κάθε χαρακτηριστικό animation έρχεται με μερικές παραμέτρους όπως η καθυστέρηση, η διάρκεια και η χαλάρωση.

Σημειώστε αυτή τη βιβλιοθήκη δεν έρχεται με πολλά προεπιλεγμένα στυλ κινουμένων σχεδίων. Anime.js είναι για προγραμματιστές που θέλουν να προσαρμόσουν τα κινούμενα σχέδια τους χωρίς να γράψετε λεπτομερή κώδικα.

Για ένα ζωντανό παράδειγμα, δείτε το στυλό Codepen παρακάτω. Ο κώδικας είναι υπερβολικά απλή αλλά παίρνετε μια αληθινή animation με σκουός & τέντωμα συν προσμονή, και τα δύο βασικά στοιχεία της κινούμενης εικόνας.

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

Αλλά όλες τις πληροφορίες που χρειάζεστε είναι στο repo σελίδα, συμπεριλαμβανομένου πολλά δείγματα κώδικα και λεπτομερείς πίνακες τεκμηρίωσης. Και μπορείτε να περιηγηθείτε στις ανοικτές αναφορές σφαλμάτων ή να ελέγξετε την υποστήριξη του προγράμματος περιήγησης που περιλαμβάνει αυτή τη στιγμή όλα τα μεγάλα προγράμματα περιήγησης και το IE 10+.

Αυτή είναι εύκολα μια από τις καλύτερες βιβλιοθήκες κινούμενων σχεδίων για προγραμματιστές ιστού και θα πρέπει να είναι η λύση σας για το go-to οποιουδήποτε πολύπλοκου διαδικτυακού animation.

Για να δείτε μια δέσμη ζωντανά παραδείγματα, ελέγξτε αυτή τη συλλογή των demo του Anime.js που φιλοξενείται στο CodePen. Παρακάτω, έχω ενσωματώσει το αγαπημένο μου που ζωντανεύει ολόκληρο το λογότυπο από το μηδέν, με πραγματική ζωντάνια.