Home-theater-designers
Αν ψάχνετε για ξεκινήστε τη δική σας ιστοσελίδα , τα όμορφα κινούμενα σχέδια μπορούν να το κάνουν να λάμψει. Υπάρχουν πολλοί τρόποι για να επιτευχθεί αυτό, από απλά δημιουργία κινούμενου GIF από ένα κομμάτι υπάρχουσας ταινίας, μέχρι να μάθετε να φτιάχνετε το δικό σας από την αρχή με λογισμικό όπως Μίξερ ή Μάγια Το
Υπάρχουν επίσης διαθέσιμες βιβλιοθήκες για τη δημιουργία κινούμενων σχεδίων μέσω προγραμματισμού. Ιστορικά, οι προγραμματιστές ιστού χρησιμοποιούσαν το jQuery για να δημιουργήσουν απλά κινούμενα σχέδια, αλλά καθώς ο ιστός αναπτύχθηκε και HTML5 έγινε το νέο πρότυπο, εμφανίστηκαν νέες επιλογές. Οι βιβλιοθήκες CSS για κινούμενα σχέδια έγιναν απίστευτα ισχυρές στο νέο πλαίσιο, μαζί με τις βιβλιοθήκες JavaScript που σχεδιάστηκαν ειδικά για διανυσματικά κινούμενα σχέδια στο πρόγραμμα περιήγησης.
Σήμερα θα κοιτάξουμε το mo.js, ένα από τα νεότερα παιδιά στο μπλοκ για τη δημιουργία όμορφων εικόνων από κώδικα. Θα καλύψουμε μερικές βασικές λειτουργίες, πριν δημιουργήσουμε μια σειρά κινούμενων αντιδράσεων από χρήστες που δημιουργεί όμορφα μοτίβα.
Εισαγάγετε Mo.js
Το Mo.js είναι μια βιβλιοθήκη για τη δημιουργία κινούμενων γραφικών για τον ιστό με ευκολία. Έχει σχεδιαστεί για να κάνει τη δημιουργία όμορφων πραγμάτων απλή για όσους δεν είναι πολύ εξοικειωμένοι με τον κώδικα, ενώ επιτρέπει στους βετεράνους προγραμματιστές να ανακαλύψουν μια καλλιτεχνική πλευρά που δεν γνώριζαν ποτέ ότι είχαν. Όπως υποδηλώνει το όνομά του, βασίζεται στη δημοφιλή γλώσσα προγραμματισμού JavaScript, αν και εφαρμόζεται με τέτοιο τρόπο ώστε ο καθένας να μπορεί να πάρει εύκολα τα βασικά.
Πριν προχωρήσουμε περαιτέρω, ας ρίξουμε μια ματιά σε αυτό που πρόκειται να δημιουργήσουμε σήμερα:
Θα χρησιμοποιήσουμε CodePen για το σημερινό έργο, αφού μας επιτρέπει να δουλεύουμε τα πάντα στο ίδιο παράθυρο του προγράμματος περιήγησης. Εάν προτιμάτε, μπορείτε να εργαστείτε σε ένα συντάκτης της επιλογής σας αντι αυτου. Εάν θέλετε να παραλείψετε το σεμινάριο βήμα προς βήμα, ο πλήρης κώδικας είναι διαθέσιμος εδώ.
Ρυθμίστε μια νέα πένα και θα σας υποδεχτεί με αυτήν την οθόνη:
Πριν ξεκινήσουμε, θα χρειαστεί να κάνετε μερικές αλλαγές. Κάνε κλικ στο Ρυθμίσεις εικονίδιο επάνω δεξιά και μεταβείτε στο JavaScript αυτί.
Θα χρησιμοποιήσουμε Βαβυλωνία ως προεπεξεργαστής κώδικα, οπότε επιλέξτε αυτό από το αναπτυσσόμενο μενού. Το Babel κάνει την JavaScript λίγο πιο κατανοητή, μαζί με την παροχή ECMAScript 6 υποστήριξη για παλαιότερα προγράμματα περιήγησης. Αν δεν ξέρετε τι σημαίνει αυτό, μην ανησυχείς , απλώς θα κάνει τη ζωή μας λίγο πιο εύκολη εδώ.
Πρέπει επίσης να εισαγάγουμε τη βιβλιοθήκη mo.js στο έργο. Κάντε αυτό αναζητώντας mo.js στο Προσθέστε εξωτερικά σενάρια/στυλό μήνυμα κειμένου και επιλέγοντάς το.
Με αυτά τα δύο πράγματα στη θέση τους, κάντε κλικ Αποθήκευσε και κλείσε Το Είμαστε έτοιμοι να ξεκινήσουμε!
Βασικά σχήματα με Mo.js
Πριν ξεκινήσουμε με τα γραφικά, ας κάνουμε κάτι για αυτό το εκτυφλωτικό λευκό φόντο στο παράθυρο προβολής. Αλλάξτε την ιδιότητα χρώματος φόντου γράφοντας αυτόν τον κώδικα στο CSS ψωμί.
body{
background: rgba(11,11,11,1);
}Η δημιουργία ενός σχήματος είναι μια απλή διαδικασία και η ιδέα πίσω από αυτό οδηγεί ολόκληρη τη βιβλιοθήκη. Ας ορίσουμε ένα προεπιλεγμένο σχήμα κύκλου. Εισαγάγετε αυτόν τον κωδικό στο JS ψωμί:
const redCirc = new mojs.Shape({
isShowStart:true
});Εδώ, έχουμε δημιουργήσει ένα const τιμή με το όνομα redCirc και το ανέθεσε σε α νέα mojs.Σχήμα Το Εάν είστε εντελώς νέοι στην κωδικοποίηση, δώστε προσοχή στη σειρά παρένθεσης εδώ και μην ξεχάσετε το ερωτηματικό στο τέλος!
Μέχρι στιγμής δεν έχουμε περάσει σε άλλες παραμέτρους εκτός isShowStart: true , πράγμα που σημαίνει ότι θα εμφανιστεί στην οθόνη ακόμη και πριν του αναθέσουμε οποιαδήποτε κίνηση. Θα δείτε ότι έχει τοποθετήσει έναν ροζ κύκλο στο κέντρο της οθόνης:
Αυτός ο κύκλος είναι ο προεπιλεγμένος Σχήμα για mo.js. Μπορούμε να αλλάξουμε αυτό το σχήμα εύκολα προσθέτοντας μια γραμμή στον κώδικά μας:
const redCirc = new mojs.Shape({
isShowStart:true,
shape:'rect'
});Για να προσθέσουμε περισσότερες ιδιότητες σε ένα αντικείμενο, χρησιμοποιούμε κόμμα για να το διαχωρίσουμε. Εδώ, προσθέσαμε ένα σχήμα ιδιοκτησίας, και το όρισε ως α 'ορθός' Το Αποθηκεύστε το στυλό σας και θα δείτε τις προεπιλεγμένες αλλαγές σχήματος σε τετράγωνο.
Αυτή η διαδικασία μεταβίβασης τιμών στο Σχήμα Το αντικείμενο είναι πώς τα προσαρμόζουμε. Αυτή τη στιγμή έχουμε ένα τετράγωνο που δεν κάνει πραγματικά πολλά. Ας προσπαθήσουμε να εμψυχώσουμε κάτι.
Βασικά της Κίνησης
Για να πάρουμε κάτι που φαίνεται λίγο πιο εντυπωσιακό, ας στήσουμε έναν κύκλο, με ένα κόκκινο κτύπημα γύρω του και χωρίς γέμιση μέσα.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius:15
});Όπως μπορείτε να δείτε, έχουμε εκχωρήσει επίσης ένα πλάτος τιμή για το εγκεφαλικό επεισόδιο, και α ακτίνα κύκλου για τον κύκλο. Τα πράγματα έχουν ήδη αρχίσει να φαίνονται λίγο διαφορετικά. Εάν το σχήμα σας δεν ενημερώνεται, βεβαιωθείτε ότι δεν έχετε χάσει κόμματα ή ενιαία εισαγωγικά 'καθαρά' ή 'κανένας' , και βεβαιωθείτε ότι έχετε κάνει κλικ αποθηκεύσετε στο πάνω μέρος της σελίδας.
Ας προσθέσουμε κινούμενα σχέδια σε αυτό. Στο παραπάνω παράδειγμα, αυτός ο κόκκινος κύκλος εμφανίζεται εκεί που κάνει κλικ ο χρήστης, πριν ξεθωριάσει προς τα έξω. Ένας τρόπος για να συμβεί αυτό είναι να αλλάξουμε την ακτίνα και την αδιαφάνεια με την πάροδο του χρόνου. Ας τροποποιήσουμε τον κώδικα:
radius: {15:30},
opacity: {1:0},
duration:1000Με την αλλαγή του ακτίνα κύκλου ιδιοκτησίας και προσθήκης αδιαφάνεια και διάρκεια ιδιότητες, έχουμε δώσει οδηγίες σχήματος για να εκτελέσουμε με την πάροδο του χρόνου. Αυτά είναι Δέλτα αντικείμενα, κρατώντας πληροφορίες έναρξης και λήξης για αυτές τις ιδιότητες.
Θα παρατηρήσετε ότι τίποτα δεν συμβαίνει ακόμη. Αυτό συμβαίνει επειδή δεν έχουμε προσθέσει το .παίζω() λειτουργία για να του πούμε να εκτελέσει τις οδηγίες μας. Προσθέστε το ανάμεσα στις αγκύλες και το ερωτηματικό και θα δείτε ότι ο κύκλος σας ζωντανεύει.
Τώρα φτάνουμε κάπου, αλλά για να το κάνουμε πραγματικά ξεχωριστό, ας δούμε μερικές ακόμη σε βάθος δυνατότητες.
Παραγγελία και διευκόλυνση με Mo.js
Αυτή τη στιγμή, μόλις εμφανιστεί ο κύκλος, αρχίζει να σβήνει. Αυτό θα λειτουργήσει τέλεια, αλλά θα ήταν ωραίο να έχετε λίγο περισσότερο έλεγχο.
Μπορούμε να το κάνουμε αυτό με το .τότε() λειτουργία. Αντί να αλλάξει η ακτίνα ή η αδιαφάνειά μας, ας κάνουμε το σχήμα μας να παραμείνει εκεί που ξεκινά, πριν αλλάξει μετά από ένα καθορισμένο χρονικό διάστημα.
const redCirc = new mojs.Shape({
isShowStart:true,
stroke:'red',
strokeWidth:5,
fill:'none',
radius: 15,
duration:1000
}).then({
//do more stuff here
}).play();Τώρα, το σχήμα μας θα εμφανιστεί με τις τιμές που του έχουμε αναθέσει, περιμένετε 1000 ms, προτού εκτελέσετε οτιδήποτε βάζουμε στο .τότε() λειτουργία. Ας προσθέσουμε μερικές οδηγίες μεταξύ των παρενθέσεων:
//do more stuff here
strokeWidth: 0,
scale: { 1: 2, easing: 'sin.in' },
duration: 500Αυτός ο κώδικας εισάγει ένα άλλο σημαντικό μέρος της κινούμενης εικόνας. Εκεί που έχουμε δώσει οδηγίες κλίμακα για αλλαγή από 1 σε 2, έχουμε επίσης εκχωρήσει χαλάρωση με βάση το ημιτονοκύμα αμαρτία.σε Το Το Mo.js διαθέτει μια ποικιλία καμπυλών χαλάρωσης, με δυνατότητα για προχωρημένους χρήστες να προσθέτουν τις δικές τους. Σε αυτή την περίπτωση, η κλίμακα με την πάροδο του χρόνου συμβαίνει σύμφωνα με ένα ημιτονοειδές κύμα που καμπυλώνει προς τα πάνω.
Για οπτική εκτέλεση διαφορετικών καμπυλών, ανατρέξτε easings.net Το Συνδυάστε το με το strokeWidth αλλάζοντας στο 0 κατά τη διάρκεια της καθορισμένης διάρκειάς μας και έχετε πολύ πιο δυναμικό αποτέλεσμα εξαφάνισης.
Τα σχήματα είναι η βάση για τα πάντα στο Mo.js, αλλά είναι μόνο η αρχή της ιστορίας. Ας δούμε Εκρήξεις Το
Bursting With Potential στο Mo.js
ΠΡΟΣ ΤΟ Εκρηξη στο Mo.js είναι μια συλλογή σχημάτων που προέρχονται από ένα κεντρικό σημείο. Θα τα κάνουμε αυτά τη βάση του ολοκληρωμένου κινούμενου σχεδίου μας. Μπορείτε να καλέσετε μια προεπιλεγμένη έκρηξη με τον ίδιο τρόπο που κάνετε ένα σχήμα. Ας κάνουμε μερικές σπίθες:
const sparks = new mojs.Burst({
}).play();Μπορείτε να δείτε, απλά προσθέτοντας ένα κενό Εκρηξη αντικείμενο και λέγοντάς το να παίξει, έχουμε το προεπιλεγμένο εφέ έκρηξης. Μπορούμε να επηρεάσουμε το μέγεθος και την περιστροφή της έκρηξης ζωντανεύοντας την ακτίνα κύκλου και γωνία ιδιότητες:
const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
}).play();Readyδη, έχουμε προσθέσει μια προσαρμοσμένη ακτίνα και περιστροφή στην έκρηξή μας:
Για να μοιάζουν περισσότερο με σπίθες, ας αλλάξουμε τα σχήματα που χρησιμοποιεί η ριπή και πόσα σχήματα δημιουργεί η έκρηξη. Αυτό μπορείτε να το κάνετε απευθύνοντας τις ιδιότητες των παιδιών της έκρηξης.
const sparks = new mojs.Burst({
radius: {0:30, easing:'cubic.out'},
angle:{0: 90,easing:'quad.out'},
count:50,
children:{
shape: 'cross',
stroke: 'white',
points: 12,
radius:10,
fill:'none',
angle:{0:360},
duration:300
}
}).play();Θα παρατηρήσετε ότι οι ιδιότητες του παιδιού είναι ίδιες με τις ιδιότητες σχήματος με τις οποίες έχουμε ήδη εργαστεί. Αυτή τη φορά επιλέξαμε έναν σταυρό ως σχήμα. Και τα 50 από αυτά τα σχήματα έχουν τώρα τις ίδιες ιδιότητες. Έχει αρχίσει να φαίνεται αρκετά καλό! Αυτό είναι το πρώτο πράγμα που θα δει ο χρήστης όταν κάνει κλικ στο ποντίκι.
Δη αν και μπορούμε να δούμε ότι το κόκκινο κτύπημα του αρχικού μας redCirc το σχήμα παραμένει για πολύ καιρό. Δοκιμάστε να αλλάξετε τη διάρκειά του έτσι ώστε και τα δύο κινούμενα σχέδια να ταιριάζουν μεταξύ τους. Θα πρέπει να φαίνεται κάπως έτσι:
Είμαστε πολύ μακριά από το να τελειώσουμε με το animation μας, αλλά ας αφιερώσουμε λίγο χρόνο για να το κάνουμε να αντιδράσει στο χρήστη.
Το Κεντρικό Γεγονός
Θα χρησιμοποιήσουμε έναν χειριστή συμβάντων για να ενεργοποιήσουμε τα κινούμενα σχέδιά μας στη θέση που κάνει κλικ ο χρήστης. Στο τέλος του μπλοκ κώδικα, προσθέστε αυτό:
document.addEventListener( 'click', function(e) {
});Αυτό το κομμάτι κώδικα ακούει για κλικ του ποντικιού και εκτελεί όποιες οδηγίες υπάρχουν σε παρένθεση για εμάς. Μπορούμε να προσθέσουμε το δικό μας redCirc και σπινθήρες αντιτίθεται σε αυτόν τον ακροατή.
document.addEventListener( 'click', function(e) {
redCirc
.tune({ x: e.pageX, y: e.pageY, })
.replay();
sparks
.tune({ x: e.pageX, y: e.pageY })
.replay();
});Οι δύο συναρτήσεις που καλούμε εδώ είναι .αρμονία() και .επανάληψη() Το Η λειτουργία επανάληψης είναι παρόμοια με τη λειτουργία αναπαραγωγής, αν και καθορίζει ότι η κίνηση πρέπει να ξεκινά ξανά από την αρχή κάθε φορά που γίνεται κλικ.
ο αρμονία η συνάρτηση περνά σε τιμές στο αντικείμενό μας, ώστε να μπορείτε να αλλάξετε πράγματα όταν ενεργοποιηθεί. Σε αυτή την περίπτωση περνάμε στις συντεταγμένες της σελίδας όπου έγινε κλικ στο ποντίκι, και εκχωρούμε ανάλογα τη θέση x και y της κινούμενης εικόνας μας. Αποθηκεύστε τον κωδικό σας και δοκιμάστε να κάνετε κλικ στην οθόνη. Θα παρατηρήσετε μερικά προβλήματα.
Πρώτον, η αρχική μας κίνηση εμφανίζεται ακόμα στη μέση της οθόνης, ακόμη και αν ο χρήστης δεν κάνει κλικ σε τίποτα. Δεύτερον, η κίνηση δεν ενεργοποιείται στο σημείο του ποντικιού, αλλά μετατοπίζεται προς τα κάτω και προς τα δεξιά. Μπορούμε να διορθώσουμε και τα δύο αυτά πράγματα εύκολα.
Το σχήμα και η έκρηξή μας έχουν το .παίζω() στο τέλος των αντίστοιχων μπλοκ κώδικα. Δεν το χρειαζόμαστε πια .επανάληψη() καλείται στο χειριστή συμβάντων. Μπορείτε να αφαιρέσετε .play () και από τα δύο μπλοκ κώδικα. Για τον ίδιο λόγο, μπορείτε να καταργήσετε isShowStart: true επίσης, καθώς δεν το χρειαζόμαστε πλέον για να το δείξουμε στην αρχή.
Για να διορθώσουμε το πρόβλημα τοποθέτησης θα χρειαστεί να ορίσουμε τιμές θέσης για τα αντικείμενά μας. Όπως θα θυμάστε από το πρώτο μας σχήμα, το mo.js τα τοποθετεί στο κέντρο της σελίδας από προεπιλογή. Όταν αυτές οι τιμές συνδυάζονται με τη θέση του ποντικιού, δημιουργείται η μετατόπιση. Για να απαλλαγείτε από αυτήν την αντιστάθμιση, απλά προσθέστε αυτές τις γραμμές και στα δύο redCirc και σπινθήρες αντικείμενα:
left: 0,
top: 0,Τώρα οι μόνες τιμές θέσης που λαμβάνουν τα αντικείμενά μας είναι οι τιμές θέσης ποντικιού που μεταβιβάζονται από τον ακροατή συμβάντων. Τώρα τα πράγματα πρέπει να λειτουργούν πολύ καλύτερα.
Αυτή η διαδικασία προσθήκης αντικειμένων στον χειριστή συμβάντων είναι ο τρόπος με τον οποίο θα ενεργοποιήσουμε όλα τα κινούμενα σχέδιά μας θυμηθείτε να προσθέσετε κάθε νέο αντικείμενο σε αυτό από εδώ και πέρα! Τώρα που έχουμε τα βασικά να λειτουργούν όπως τα θέλουμε, ας προσθέσουμε μερικές μεγαλύτερες και φωτεινότερες εκρήξεις.
Να πάρει ψυχεδελικό
Ας ξεκινήσουμε με μερικά περιστρεφόμενα τρίγωνα. Η ιδέα εδώ ήταν να δημιουργηθεί ένα υπνωτικό στροβοσκοπικό αποτέλεσμα και η ρύθμιση αυτού είναι στην πραγματικότητα αρκετά εύκολη. Προσθέστε μια άλλη έκρηξη με αυτές τις παραμέτρους:
const triangles = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {1080 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
points: 3,
radius: { 10 : 100 },
fill: ['red','yellow','blue','green'],
duration: 3000
}
});Όλα εδώ θα πρέπει να είναι αρκετά οικεία μέχρι τώρα, αν και υπάρχουν μερικά νέα σημεία. Θα παρατηρήσετε ότι αντί να ορίσουμε το σχήμα ως τρίγωνο, το ονομάσαμε α πολύγωνο πριν εκχωρήσετε τον αριθμό των πόντους έχει ως 3.
Δώσαμε επίσης γέμισμα λειτουργεί μια σειρά χρωμάτων για εργασία, κάθε πέμπτο τρίγωνο θα επανέλθει στο κόκκινο και το μοτίβο θα συνεχιστεί. Η υψηλή αξία του γωνία η ρύθμιση κάνει την έκρηξη να περιστρέφεται αρκετά γρήγορα για να παράγει το στροβοσκοπικό αποτέλεσμα.
Εάν ο κώδικας δεν λειτουργεί για εσάς, βεβαιωθείτε ότι έχετε προσθέσει το τρίγωνο αντικείμενο στην τάξη ακροατή συμβάντων όπως κάναμε με τα προηγούμενα αντικείμενα.
Αρκετά ψυχεδελικό! Ας προσθέσουμε άλλη μια έκρηξη για να την ακολουθήσουμε.
Χορεύοντας πεντάγωνα
Μπορούμε να χρησιμοποιήσουμε κάτι σχεδόν πανομοιότυπο με το δικό μας τρίγωνα αντικείμενο για να κάνει την έκρηξη που ακολουθεί. Αυτός ο ελαφρώς τροποποιημένος κώδικας παράγει έντονα χρωματισμένα επικαλυπτόμενα εξάγωνα περιστροφής:
const pentagons = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 720,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'polygon',
radius: { 1 : 300 },
points: 5,
fill: ['purple','pink','yellow','green'],
delay:500,
duration: 3000
}
});Η κύρια αλλαγή εδώ είναι ότι έχουμε προσθέσει ένα καθυστέρηση 500ms, έτσι ώστε η έκρηξη να μην ξεκινήσει παρά μόνο μετά τα τρίγωνα. Αλλάζοντας μερικές τιμές, η ιδέα εδώ ήταν να κάνουμε το σκάσιμο να γυρίσει προς την αντίθετη κατεύθυνση από τα τρίγωνα. Κατά τύχη, μέχρι να εμφανιστούν τα πεντάγωνα, η στροβοσκοπική επίδραση των τριγώνων το κάνει να μοιάζει να περιστρέφονται μεταξύ τους.
Λίγη τυχαιότητα
Ας προσθέσουμε ένα εφέ που κάνει χρήση τυχαίων τιμών. Δημιουργήστε μια έκρηξη με αυτές τις ιδιότητες:
const redSparks = new mojs.Burst({
left: 0, top: 0,
count:8,
radius: { 150: 350 },
angle: {0:90 ,easing:'cubic.out'},
children: {
shape: 'line',
stroke: {'red':'transparent'},
strokeWidth: 5,
scaleX: {0.5:0},
degreeShift: 'rand(-90, 90)',
radius: 'rand(20, 300)',
duration: 500,
delay: 'rand(0, 150)',
}
});Αυτή η έκρηξη θα δημιουργήσει γραμμές που αρχίζουν κόκκινες και ξεθωριάζουν στη διαφάνεια, συρρικνώνονται με την πάροδο του χρόνου. Αυτό που κάνει αυτό το στοιχείο ενδιαφέρον είναι ότι χρησιμοποιούνται τυχαίες τιμές για τον προσδιορισμό ορισμένων από τις ιδιότητές του.
ο degreeShift δίνει στο παιδί αντικείμενο μια γωνία εκκίνησης. Με την τυχαιοποίηση αυτού, δίνει μια εντελώς διαφορετική έκρηξη σε κάθε κλικ. Οι τυχαίες τιμές χρησιμοποιούνται επίσης για το ακτίνα κύκλου και καθυστέρηση λειτουργίες για να προσθέσετε στο χαοτικό αποτέλεσμα.
Εδώ είναι το αποτέλεσμα από μόνο του:
Δεδομένου ότι χρησιμοποιούμε τυχαίες τιμές εδώ, πρέπει να προσθέσουμε μια επιπλέον μέθοδο στον χειριστή συμβάντων για το αντικείμενο:
redSparks
.tune({ x: e.pageX, y: e.pageY })
.replay()
.generate();ο παράγω() Η συνάρτηση υπολογίζει νέες τυχαίες τιμές κάθε φορά που καλείται το συμβάν. Χωρίς αυτό, το σχήμα θα επιλέξει τυχαίες τιμές την πρώτη φορά που καλείται και θα συνεχίσει να χρησιμοποιεί αυτές τις τιμές για κάθε επόμενη κλήση. Αυτό θα καταστρέψει εντελώς το αποτέλεσμα, οπότε βεβαιωθείτε ότι το προσθέσατε!
Μπορείτε να χρησιμοποιήσετε τυχαίες τιμές για σχεδόν κάθε στοιχείο αντικειμένων mo.js και είναι ένας απλός τρόπος για να δημιουργήσετε μοναδικές κινούμενες εικόνες.
απροσδόκητη λειτουργία πυρήνα παγιδεύει τα παράθυρα 10
Ωστόσο, η τυχαιότητα δεν είναι ο μόνος τρόπος για να προσθέσετε δυναμικές κινήσεις σε κινούμενα σχέδια. Ας δούμε το εναλλαγή λειτουργία.
Συγκλονιστικές Γραμμές
Για να επιδείξετε πώς το εναλλαγή η λειτουργία λειτουργεί, θα φτιάξουμε κάτι λίγο σαν Catherine Wheel. Δημιουργήστε μια νέα έκρηξη με αυτές τις παραμέτρους:
const lines = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {0 : 1440,easing: 'cubic.out'},
left: 0, top: 0,
count: 50,
children : {
shape: 'line',
radius: { 1 : 100,easing:'elastic.out' },
fill: 'none',
stroke: ['red','orange'],
delay:'stagger(10)',
duration: 1000
}
});Όλα εδώ είναι οικεία, μια έκρηξη δημιουργεί 50 παιδιά που είναι κόκκινες ή πορτοκαλί γραμμές. Η διαφορά εδώ είναι ότι περνάμε το καθυστέρηση ιδιοκτησία α τρεκλίζω (10) λειτουργία. Αυτό προσθέτει 10ms καθυστέρησης μεταξύ της εκπομπής κάθε παιδιού, δίνοντάς του το περιστρεφόμενο αποτέλεσμα που ψάχνουμε.
Η λειτουργία stagger δεν χρησιμοποιεί τυχαίες τιμές, επομένως δεν θα χρειαστείτε ένα παράγω αυτή τη φορά στο χειριστή συμβάντων. Ας δούμε όλα όσα έχουμε μέχρι τώρα σε δράση:
Θα μπορούσαμε εύκολα να σταματήσουμε εδώ, αλλά ας προσθέσουμε μια ακόμη έκρηξη για να ολοκληρώσουμε αυτό το έργο.
Έξυπνα τετράγωνα
Για αυτήν την τελευταία έκρηξη, ας φτιάξουμε κάτι χρησιμοποιώντας ορθογώνια. Προσθέστε αυτό το αντικείμενο στον κώδικα και τον ακροατή συμβάντων:
const redSquares = new mojs.Burst({
radius: { 0 : 1000,easing: 'cubic.out'},
angle: {360 : 0,easing: 'quad.out'},
left: 0, top: 0,
count: 20,
children : {
shape: 'rect',
radiusX: { 1 : 1000 },
radiusY:50,
points: 5,
fill: 'none',
stroke: {'red':'orange'},
strokeWidth:{5:15},
delay:1000,
duration: 3000
}
});Αυτό το αντικείμενο δεν προσθέτει τίποτα νέο σε αυτό που έχουμε ήδη εργαστεί σήμερα, περιλαμβάνεται απλώς για να δείξει πώς πολύπλοκα γεωμετρικά μοτίβα μπορούν εύκολα να δημιουργηθούν μέσω κώδικα.
Αυτό δεν ήταν το επιδιωκόμενο αποτέλεσμα αυτού του αντικειμένου όταν δημιουργήθηκε στα στάδια δοκιμών συγγραφής αυτού του σεμιναρίου. Μόλις έτρεξε ο κώδικας, έγινε σαφές ότι έπεσα πάνω σε κάτι πολύ πιο όμορφο από ό, τι θα μπορούσα να είχα κάνει επίτηδες!
Με αυτό το τελικό αντικείμενο που προστέθηκε, τελειώσαμε. Ας δούμε το όλο πράγμα εν δράσει.
Mo.js: Ένα ισχυρό εργαλείο για κινούμενα σχέδια Ιστού
Αυτή η απλή εισαγωγή στο mo.js καλύπτει τα βασικά εργαλεία που απαιτούνται για τη δημιουργία όμορφων κινούμενων εικόνων. Ο τρόπος με τον οποίο χρησιμοποιούνται αυτά τα εργαλεία μπορεί να δημιουργήσει σχεδόν οτιδήποτε, και για πολλές εργασίες οι βιβλιοθήκες ιστού είναι μια απλή εναλλακτική λύση στη χρήση Photoshop , After Effects, ή άλλο δαπανηρό λογισμικό.
Αυτή η βιβλιοθήκη είναι χρήσιμη για όσους εργάζονται τόσο στον προγραμματισμό όσο και στην ανάπτυξη ιστού, ο χειρισμός συμβάντων που χρησιμοποιείται στο έργο θα μπορούσε εύκολα να χρησιμοποιηθεί για τη δημιουργία αντιδραστικών κουμπιών και κειμένου σε ιστότοπους ή σε εφαρμογές. Διασκεδάστε με αυτό: δεν υπάρχουν λάθη, μόνο χαρούμενα ατυχήματα!
Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Αξίζει την αναβάθμιση σε Windows 11;Τα Windows έχουν επανασχεδιαστεί. Είναι όμως αυτό αρκετό για να σας πείσει να μεταβείτε από τα Windows 10 στα Windows 11;
Διαβάστε Επόμενο Σχετικά θέματα- Προγραμματισμός
- JavaScript
Ο Ian Buckley είναι ανεξάρτητος δημοσιογράφος, μουσικός, ερμηνευτής και παραγωγός βίντεο που ζει στο Βερολίνο της Γερμανίας. Όταν δεν γράφει ή δεν είναι στη σκηνή, ασχολείται με ηλεκτρονικά ή κώδικα DIY με την ελπίδα να γίνει τρελός επιστήμονας.
Περισσότερα από τον Ian BuckleyΕγγραφείτε στο newsletter μας
Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!
Κάντε κλικ εδώ για εγγραφή