Η προσθήκη κινούμενων εικόνων στην εφαρμογή Ιστού σας είναι μία από τις καλύτερες προσεγγίσεις για τη βελτίωση της εμφάνισης και της αίσθησης της εφαρμογής σας.
Τα κινούμενα σχέδια είναι κινούμενα αντικείμενα που χρησιμοποιούν οι σχεδιαστές/προγραμματιστές ιστού για να τραβήξουν την προσοχή των χρηστών και να τους κατευθύνουν να προβούν σε συγκεκριμένες ενέργειες.
Η σύνταξη κώδικα για την προσθήκη κινούμενων εικόνων μπορεί να είναι πολλή δουλειά. Ευτυχώς, μπορείτε να χρησιμοποιήσετε μια βιβλιοθήκη κινούμενων σχεδίων.
Μια βιβλιοθήκη κινούμενων εικόνων είναι μια συλλογή προκατασκευασμένων αρχείων κινούμενων εικόνων που οι σχεδιαστές μπορούν να προσθέσουν στους ιστότοπούς τους.
Πίνακας περιεχομένων
Γιατί να χρησιμοποιήσετε βιβλιοθήκες κινούμενων σχεδίων;
- Εξοικονομεί χρόνο: Η βιβλιοθήκη κινούμενων εικόνων θα παρέχει τα barebones, δίνοντάς σας περισσότερο χρόνο για να εστιάσετε στη λειτουργικότητα της εφαρμογής σας.
- Προσαρμόσιμο: Οι βιβλιοθήκες κινούμενων εικόνων συνήθως προσφέρουν κώδικα boilerplate που μπορείτε να προσαρμόσετε για να ταιριάζει στις ανάγκες σας.
- Εύκολη επίτευξη συνεπούς σχεδίασης: Εάν έχετε κινούμενα σχέδια σε διαφορετικές ιστοσελίδες, μπορείτε να χρησιμοποιήσετε μία βιβλιοθήκη για να διασφαλίσετε ότι η ανάμειξη χρωμάτων και οι γραμματοσειρές είναι συνεπείς.
- Παρέχετε ένα ευρύ φάσμα εφέ: Ορισμένες βιβλιοθήκες κινούμενων εικόνων έχουν πολλά κινούμενα σχέδια για να διαλέξετε.
Έχω εξετάσει μερικές από τις καλύτερες βιβλιοθήκες κινούμενων εικόνων JavaScript που μπορείτε να χρησιμοποιήσετε ως εξής.
Anime.js
Το Anime.js είναι μια ελαφριά βιβλιοθήκη JavaScript με ισχυρό API. Μπορείτε να χρησιμοποιήσετε αυτήν τη βιβλιοθήκη με αντικείμενα JavaScript, χαρακτηριστικά DOM, SVG και ιδιότητες CSS.
Εγκατάσταση
npm εγκατάσταση animejs – αποθήκευση
Χρήση
εισαγωγή anime από το ‘animejs/lib/anime.es.js’.
Βασικά χαρακτηριστικά:
- Εύκολο στη χρήση: Βρήκα το Anime.js εύκολο στη χρήση, ακόμη και για όσους έχουν περιορισμένες γνώσεις JavaScript, καθώς είναι καλά τεκμηριωμένο.
- Επεκτάσιμο: Μπορείτε να προσαρμόσετε τα μπλοκ κώδικα από αυτήν τη βιβλιοθήκη για να ταιριάζουν στις ανάγκες σας. Μπορείτε επίσης να δημιουργήσετε επανακλήσεις, χρονοδιαγράμματα και λειτουργίες διευκόλυνσης.
- Ευέλικτο: Το Anime.js δεν είναι μόνο μια βιβλιοθήκη κινούμενων σχεδίων JavaScript. μπορείτε να το χρησιμοποιήσετε με ιδιότητες SVG και CSS.
- Υποστήριξη πολλαπλών προγραμμάτων περιήγησης: Τα κινούμενα σχέδια από το Anime.js εκτελούνται σε διάφορα προγράμματα περιήγησης όπως Chrome, Safari, IE/Edge, Firefox και Opera.
Το Anime.js είναι μια δωρεάν βιβλιοθήκη ανοιχτού κώδικα.
Mo.js
Το Mo.js είναι μια βιβλιοθήκη κινούμενων γραφικών JavaScript. Η βιβλιοθήκη σάς δίνει τον απόλυτο έλεγχο των κινούμενων εικόνων μέσω του δηλωτικού API της.
Εγκατάσταση
npm εγκατάσταση @mojs/core
ή
νήμα προσθήκη @mojs/core
Χρήση;
εισαγωγή mojs από το ‘@mojs/core’.
Βασικά χαρακτηριστικά:
- Modular: Τα στοιχεία αυτής της βιβλιοθήκης χωρίζονται σε μικρά, επαναχρησιμοποιήσιμα μπλοκ κώδικα. Κατά τη δοκιμή αυτής της βιβλιοθήκης, θα μπορούσα να προσθέσω ή να καταργήσω διάφορα στοιχεία χωρίς να ξαναγράψω ολόκληρο τον κώδικα.
- Απλό: Ο δηλωτικός σχεδιασμός του API καθιστά εύκολη τη χρήση αυτής της βιβλιοθήκης και την προσαρμογή των στοιχείων της.
- Responsive: Το Mo.js είναι έτοιμο για αμφιβληστροειδή, καθιστώντας το να ανταποκρίνεται σε διαφορετικά μεγέθη οθόνης.
- Στιβαρή: Αυτή η βιβλιοθήκη έχει ελεγχθεί εκτενώς για να διασφαλιστεί ότι λειτουργεί όπως αναμένεται.
Το Mo.js είναι μια δωρεάν βιβλιοθήκη ανοιχτού κώδικα.
Popmotion
Το Popmotion είναι μια απλή βιβλιοθήκη κινούμενων σχεδίων για τη δημιουργία απολαυστικών διεπαφών χρήστη. Βρήκα ότι ήταν εύκολο να χρησιμοποιήσω αυτήν τη βιβλιοθήκη με τη vanilla JavaScript και τις περισσότερες βιβλιοθήκες και πλαίσια JavaScript.
Εγκατάσταση
npm εγκατάσταση popmotion
Χρήση
εισαγωγή { animate } από το “popmotion”
Βασικά χαρακτηριστικά:
- Ισχυρό: Αν και η λειτουργία κίνησης είναι μόλις 4,5 kb, υποστηρίζει κινούμενα σχέδια ελατηρίου, αδράνειας και βασικού καρέ για χρώματα, αριθμούς και σύνθετες συμβολοσειρές.
- Υποστήριξη TypeScript: Το Popmotion είναι γραμμένο σε TypeScript, έναν εκθέτη της JavaScript. Έτσι, μπορείτε να χρησιμοποιήσετε τύπους εάν χρησιμοποιείτε TypeScript στο έργο σας.
- Προσαρμόσιμα: Τα στοιχεία αυτής της βιβλιοθήκης μπορούν να προσαρμοστούν ώστε να ταιριάζουν στις ανάγκες σας για κινούμενα σχέδια.
- Σταθερό: Όλα τα εξαρτήματα στο Popmotion έχουν υποβληθεί σε ενδελεχή δοκιμή.
Το Popmotion είναι δωρεάν για χρήση.
Θέατρο.js
Το Theatre.js είναι μια βιβλιοθήκη με ένα επαγγελματικό σύνολο εργαλείων σχεδίασης κίνησης. Με αυτό, μπορείτε να σχεδιάσετε κινηματογραφικές σκηνές και απολαυστικές αλληλεπιδράσεις διεπαφής χρήστη.
Για να χρησιμοποιήσετε το Theatre.js με HTML και απλή JavaScript, μπορείτε να προσθέσετε τον σύνδεσμο CDN του στην κύρια ενότητα του εγγράφου HTML.
Βασικά χαρακτηριστικά:
- Λειτουργεί με πολλά πλαίσια και βιβλιοθήκες JavaScript: Μπορείτε να χρησιμοποιήσετε το Theatre.js με το React Three Fiber και το THREE.js.
- Προσαρμόσιμο: Αυτή η βιβλιοθήκη διαθέτει ένα πρόγραμμα επεξεργασίας ακολουθιών αιχμής που σας βοηθά να αποκλείσετε ακολουθίες σε δευτερόλεπτα. Μπορείτε επίσης να ρυθμίσετε με ακρίβεια κάθε καρέ στην εφαρμογή σας χρησιμοποιώντας τον επεξεργαστή γραφημάτων.
- Επεκτάσιμο: Το Theatre.js έχει διάφορες επεκτάσεις που προσθέτουν στη χρηστικότητά του. Μπορείτε να χρησιμοποιήσετε τα εργαλεία σας ή να προσθέσετε επεκτάσεις σε αυτήν τη βιβλιοθήκη.
Το Theatre.js είναι μια βιβλιοθήκη ανοιχτού κώδικα.
Το ScrollReveal.js είναι μια βιβλιοθήκη JavaScript που σας επιτρέπει να κάνετε κίνηση στοιχείων καθώς αυτά μετακινούνται στη θύρα προβολής.
Εγκατάσταση;
npm εγκατάσταση scrollreveal
Χρήση;
const ScrollReveal = απαιτείται (‘scrollreveal’)
Βασικά χαρακτηριστικά:
- Εύκολο στη χρήση: Προσθέστε κλάση scrollreveal στα στοιχεία που θέλετε να κάνετε κίνηση και είστε έτοιμοι να αρχίσετε να χρησιμοποιείτε αυτήν τη βιβλιοθήκη.
- Επεκτάσιμο: Μπορείτε να προσθέσετε νέα στοιχεία ή να τα αφαιρέσετε από τα στοιχεία που λαμβάνετε από αυτήν τη βιβλιοθήκη.
- Ευέλικτο: Μπορείτε να ρυθμίσετε το ScrollReveal.js να αποκαλύπτει στοιχεία κατά την τοποθέτηση του ποντικιού, το κλικ ή την κύλιση. Η βιβλιοθήκη σάς επιτρέπει επίσης να ελέγχετε την ευκολία, την κατεύθυνση και την ταχύτητα της αποκάλυψης.
Το ScrollReveal.js είναι μια πληρωμένη βιβλιοθήκη με πακέτα που ξεκινούν από $30.
GreenSock GSAP
Το GreenSock GSAP είναι μια βιβλιοθήκη JavaScript για κινούμενα στοιχεία SVG, UI, React ή Three.js. Η βιβλιοθήκη έχει όλα όσα χρειάζεστε για να δημιουργήσετε γρήγορα και ελκυστικά κινούμενα σχέδια.
Βασικά χαρακτηριστικά:
- Υψηλή συμβατότητα: Μπορείτε να χρησιμοποιήσετε το GSAP με βιβλιοθήκες και πλαίσια Canvas, CSS, HTML, SVG και JavaScript όπως Angular, React, Vue και jQuery.
- Επεκτάσιμο: Η αρθρωτή αρχιτεκτονική του GSAP σάς επιτρέπει να προσαρμόσετε τα στοιχεία για να ταιριάζουν στις ανάγκες κινούμενων εικόνων σας.
- Ευέλικτο: Το GSAP δεν έχει προκαθορισμένη λίστα με πράγματα που μπορείτε να κάνετε κίνηση. Μπορείτε να κάνετε κίνηση σε οποιαδήποτε αριθμητική ιδιότητα ενός αντικειμένου.
- Ισχυρό: Με το GSAP, μπορείτε να κάνετε κίνηση σε πίνακες, beziers, ιδιότητες CSS, χρώματα και πολλά άλλα. Αυτή η βιβλιοθήκη σάς επιτρέπει επίσης να δημιουργείτε ακολουθίες, να επαναλαμβάνετε, να κάνετε yoyo και να ορίζετε επανακλήσεις.
Το GreenSock Animation Platform (GSAP) διαθέτει δωρεάν πακέτο, ενώ το επί πληρωμή ξεκινά από 88 £.
ProgressBar.js
Το ProgressBar.js είναι μια βιβλιοθήκη κινούμενων εικόνων για τη δημιουργία αποκριτικών και κομψών γραμμών προόδου για τον Ιστό.
Εγκατάσταση
Χρησιμοποιώντας τόξο
bower install progressbar.js
Χρήση npm
npm εγκατάσταση progressbar.js
Βασικά χαρακτηριστικά:
- Διάφορα ενσωματωμένα σχήματα: Το ProgressBar.js έχει τρία ενσωματωμένα σχήματα, ένα SemiCircle, Circle και Line. Μπορείτε επίσης να δημιουργήσετε ένα προσαρμοσμένο σχήμα χρησιμοποιώντας αυτήν τη βιβλιοθήκη.
- Responsive: Οι γραμμές προόδου από αυτήν τη βιβλιοθήκη λειτουργούν τέλεια σε διαφορετικά μεγέθη οθόνης.
- Προσαρμόσιμο: Μπορείτε να προσαρμόσετε τα χρώματα, το μέγεθος γραμματοσειράς και το στυλ γραμματοσειράς των στοιχείων σας.
Το ProgressBar.js είναι μια βιβλιοθήκη ανοιχτού κώδικα.
AnisJS
Το AniJS είναι μια βιβλιοθήκη αλληλεπίδρασης διεπαφής χρήστη που παρέχει έναν γρήγορο και εύκολο τρόπο ανάπτυξης και πρωτότυπης διεπαφής χρήστη. Αυτή η βιβλιοθήκη είναι 9,0 kb μετά τη συμπίεση.
Εγκατάσταση;
bower install anijs –save
Χρήση;
Βασικά χαρακτηριστικά:
- Απλό στη χρήση: Για να χρησιμοποιήσετε αυτήν τη βιβλιοθήκη, προσθέστε την κλάση AnisJS σε ένα στοιχείο που πρέπει να κάνετε κίνηση.
- Επεκτάσιμο: Μπορείτε να προσαρμόσετε στοιχεία από το AnisJS για να ταιριάζουν στις ανάγκες σας.
- Ευέλικτο: Μπορείτε να χρησιμοποιήσετε το AnisJS με αντικείμενα JavaScript, χαρακτηριστικά SVG, ιδιότητες CSS και στοιχεία DOM.
- Συμβατό με μεγάλα προγράμματα περιήγησης: Μπορείτε να AnisJS με Chrome, Firefox, Safari και Edge.
Το AnisJS είναι μια βιβλιοθήκη ανοιχτού κώδικα που είναι δωρεάν στη χρήση.
Three.js
Το Three.js είναι μια τρισδιάστατη βιβλιοθήκη γενικής χρήσης. Η βιβλιοθήκη χρησιμοποιεί ένα πρόγραμμα απόδοσης WebGL, αλλά υποστηρίζει επίσης συσκευές απόδοσης SVG και CSS3D ως πρόσθετα.
Εγκατάσταση;
npm εγκατάσταση – αποθήκευση τριών
Χρήση;
Εισαγωγή * ως ΤΡΙΑ από το ‘τρεις’.
Βασικά χαρακτηριστικά:
- Ευκολία χρήσης: Το Three.js διαθέτει ένα καλά τεκμηριωμένο API, που καθιστά εύκολη τη ρύθμιση και τη χρήση του.
- Ισχυρό: Μπορείτε να δημιουργήσετε σύνθετες σκηνές 3D χρησιμοποιώντας αυτήν τη βιβλιοθήκη. Το Three.js υποστηρίζει επίσης διάφορες λειτουργίες, όπως κινούμενα σχέδια, υλικά και φωτισμό.
- Ευέλικτο: Μπορείτε να δημιουργήσετε διαφορετικά τρισδιάστατα κινούμενα σχέδια, από παιχνίδια, οπτικοποιήσεις έως προσομοιώσεις.
- Συμβατό με διάφορα πλαίσια και βιβλιοθήκες: Μπορείτε να χρησιμοποιήσετε τη βιβλιοθήκη Three.js με τα React Three Fiber, Egret, Aframe, PlayCanvas και Babylon.js.
Το Three.js είναι μια βιβλιοθήκη JavaScript ανοιχτού κώδικα.
Vivus.js
Το vivus.js είναι μια ελαφριά βιβλιοθήκη JavaScript για κίνηση SVG. Όταν κάνετε κίνηση SVG χρησιμοποιώντας αυτήν τη βιβλιοθήκη, εμφανίζονται σαν να έχουν σχεδιαστεί.
Εγκατάσταση;
npm εγκαταστήστε το vivus
ή
bower εγκατάσταση vivus
Βασικά χαρακτηριστικά:
- Διάφοροι τύποι κινούμενων εικόνων: Το Vivus.js σάς επιτρέπει να δημιουργείτε κινούμενα σχέδια Delayed, OnebyOne και Sync. Η καθυστέρηση είναι ο προεπιλεγμένος τύπος κινούμενης εικόνας σε αυτήν τη βιβλιοθήκη.
- Επιτρέπει προσαρμοσμένα σενάρια: Αντί να χρησιμοποιείτε τους τύπους κινούμενων εικόνων που είναι διαθέσιμοι σε αυτήν τη βιβλιοθήκη, μπορείτε να δημιουργήσετε προσαρμοσμένα σενάρια για να κάνετε κίνηση των αρχείων SVG.
- Χωρίς εξαρτήσεις: Μπορείτε να χρησιμοποιήσετε αυτήν τη βιβλιοθήκη στα περισσότερα έργα ιστού, καθώς είναι χωρίς εξαρτήσεις.
Το Vivus.js είναι μια δωρεάν βιβλιοθήκη.
Tilt.js
Το Tilt.js είναι μια μικρή βιβλιοθήκη JavaScript που επιτρέπει στους προγραμματιστές να δημιουργούν τρισδιάστατα εφέ κλίσης στο DOM. Μπορείτε να χρησιμοποιήσετε το Tilt.js με vanilla JavaScript ή βιβλιοθήκες και πλαίσια όπως React, Preact, Angular και Polymer.
Εγκατάσταση;
npm εγκατάσταση – αποθήκευση tilt.js
Ή
νήμα προσθήκη κλίση.js
Χρήση;
Προσθέστε αυτό το σενάριο λίγο πριν την ετικέτα κλεισίματος
