Εξαγωγή μετά από εφέ κινούμενα σχέδια σε HTML5

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

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

• Ο επαγγελματίας οδηγός για το σχεδιασμό UI

Οι προγραμματιστές βασίστηκαν σε βιβλιοθήκες όπως το Greensock και το Snap.SVG για να κάνουν τη βαριά ανύψωση στην αναπαραγωγή κινούμενων σχεδίων μέσω JavaScript. Ενώ αυτά τα εργαλεία έχουν δώσει πολλή ευελιξία, δεν μπορούν να συγκριθούν με την ακρίβεια και τη λεπτότητα της κινούμενης εικόνας που μπορούν να επιτευχθούν χρησιμοποιώντας Μετά από αποτελέσματα cc δική του χρονοδιάγραμμα και χαλάρωση. Από μια προοπτική στο διαδίκτυο, μετά από τα αποτελέσματα είναι πολύ κατάλληλα κατάλληλα για να ταιριάζουν και να δοκιμάζουν την κίνηση πριν το διαπράξει στον κώδικα.

Εισαγω Σωματική ουσία , μια πρωτοποριακή επέκταση για την Adobe After Effects που εξάγει κινούμενα σχέδια απευθείας από τα αποτελέσματα στο JavaScript που πρόκειται να εμφανιστεί και να χειριστεί στο πρόγραμμα περιήγησης. Δημιουργήθηκε από Hernan Torrisi , Ο Bodymovin αφαιρεί πολλά από τα εμπόδια μεταξύ του εμψυχωτού και του προγραμματιστή. Στο βασικό της επίπεδο, το plugin λειτουργεί ως η μαγική λειτουργία "rendering for web" adobe ξέχασα. Κατά την πιο εξελιγμένη του ανοίγει νέες δυνατότητες για διαδραστική κινούμενη εικόνα.

Το Bodymovin είναι ένας σύνδεσμος στην αλυσίδα εργαλείων, plugins και συστήματα που ανεβαίνουν για να καλύψουν ορισμένες από αυτές τις νέες δυνατότητες. Lottie του Airbnb και Τα βασικά πλαίσια του Facebook Και οι δύο βασίζονται σε αυτά τα θεμέλια - και τελικά φέρνουν το πιο ισχυρό εργαλείο κινούμενων εικόνων στον ιστό.

Γιατί να χρησιμοποιήσετε το Bodymovin;

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

Εκτός από την απλοποίηση της διαδικασίας εξαγωγής των κινούμενων σχεδίων σας, το Bodymovin ανοίγει περισσότερη δυνατότητα για τους προγραμματιστές να γίνουν δημιουργικοί με νέες διαδραστικές εμπειρίες. Ελέγξτε την πληκέπτερα για μερικούς από τους φανταστικούς τρόπους, η επέκταση έχει χρησιμοποιηθεί - από τις διαδραστικές εκδηλώσεις IK σε διαδραστικό κείμενο τύπου Animate-As-You-You.

Για να απλοποιήσετε περαιτέρω τη διαδικασία του Web dev, δοκιμάστε ένα οικοδόμος ιστότοπου .

Το εξαγόμενο κινούμενο σχέδιο μπορεί να χειριστεί στο πρόγραμμα περιήγησης όπως οποιοδήποτε άλλο στοιχείο, επιτρέποντάς μας να σκεφτούμε την κινούμενη εικόνα ως ένα διαδραστικό και πειραματικό εργαλείο στο σχεδιασμό ιστοσελίδων. Και τώρα λόγω του Bodymovin, φέρνοντας ποτέ τα κινούμενα σχέδια σας στον ιστό δεν ήταν ποτέ ευκολότερη. Σε αυτό το σεμινάριο θα μάθετε πώς να εξάγετε ένα κινούμενο σχέδιο από τα αποτελέσματα και να δημιουργήσετε ένα απλό animation looping που ανταποκρίνεται στο κλικ του χρήστη.

Πώς να προετοιμάσετε τα αρχεία μετά από τα αποτελέσματα

Η υποστήριξη των χαρακτηριστικών μετά τα αποτελέσματα έχει βελτιωθεί σημαντικά και μπορείτε να περιμένετε να πάρετε αρκετά καλά αποτελέσματα κατ 'ευθείαν έξω από το κουτί. Τούτου λεχθέντος, τα φανταχτερά σας στρώματα που φέρουν 3D δεν θα παίξουν ωραία, ώστε να γνωρίζετε τα όρια πριν ξεκινήσετε. Πριν ξεκινήσετε ένα έργο, λάβετε πάντα την τελευταία έκδοση του Bodymovin και ελέγξτε τη σελίδα GitHub για να δείτε ποιες λειτουργίες υποστηρίζονται αυτήν τη στιγμή.

Μην είστε πολύ βιαστικός να μετακινηθείτε στο διασκεδαστικό μέρος ... τακτοποιημένα αρχεία κάνουν ένα τακτοποιημένο μυαλό. Σε αυτή την περίπτωση, θα βοηθήσουν επίσης να πάρετε κάποια από την επιπλέον εργασία μακριά από το πρόγραμμα περιήγησης και να σας δώσει μεταξένια ομαλή αναπαραγωγή. Πρώτον, θα θελήσετε να βεβαιωθείτε ότι το περιεχόμενό σας είναι αργότερα με τα εφέ στρώματα σχήματος για πλήρη ισχύ φορέα. Για να μετατρέψετε οποιοδήποτε αρχείο Illustrator για να διαμορφώσετε στρώματα, μπορείτε απλά να κάνετε δεξί κλικ και να επιλέξετε να δημιουργήσετε σχηματικά σχήματα από το στρώμα φορέα. Οποιαδήποτε στρώματα που δεν έχουν σχήματα σε αυτό το στάδιο θα μετατραπούν στη συνέχεια σε εικόνες και δεν θα καταστούν διανύσματα.

Στη συνέχεια, ελέγξτε τα στρώματα και τα υποσημείωτα σας. Υπάρχει μια καλή πιθανότητα να απλοποιήσετε τα περιεχόμενα του σχήματος χωρίς να θυσιάσετε τίποτα. Προσπαθήστε να μειώσετε τον αριθμό των ομάδων, των διαδρομών και να γεμίσετε μόνο τα γυμνά απαραίτητα.

Φροντίστε με τις μάσκες

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

Απόδοση

Το Bodymovin λειτουργεί σε δύο μέρη - μια επέκταση μετά την εφέ που μετατρέπει τα δεδομένα κινούμενων εικόνων σε ένα αρχείο JSON και ένα bodymovin.js player για να συμπεριλάβει στην ιστοσελίδα σας που μπορεί να ερμηνεύσει αυτό το αρχείο και να το κάνει στο πρόγραμμα περιήγησης.

Σκεφτείτε ότι τα αρχεία σας είναι καλά για να πάτε; Ανοίξτε την επέκταση Bodymovin μέσω του Window & GT; Επεκτάσεις και στη συνέχεια σωματική σωματοφύλακα.

Μόλις χτυπήσετε την ανανέωση, θα δείτε μια λίστα όλων των συνθέσεων σε αυτό το έργο μετά τα αποτελέσματα. Επιλέξτε το επιλεγμένο comp και στη συνέχεια επιλέξτε ένα φάκελο προορισμού μέσα στο έργο του ιστού σας. Όταν είστε χαρούμενοι απλά κάντε κλικ στην επιλογή Render και παρακολουθήστε τη μαγεία να συμβεί. Όταν τελειώσει, θα πάρετε ένα "τελειωμένο" μήνυμα. Συγχαρητήρια! Μόλις εξάγετε ένα αρχείο JSON με όλες τις πληροφορίες που χρειάζεται ο παίκτης να αναδημιουργήσει το κινούμενο σχέδιο.

Για να δοκιμάσετε το πρόσφατα εξαγόμενο animation, κάντε κλικ στο Preview & GT; Το τρέχον καθιστά και θυμηθείτε να τρίβετε μέσα από το χρονοδιάγραμμα, όπως μπορείτε να εντοπίσετε κάτι που φαίνεται λίγο διαφορετικό από αυτό που θα περιμένατε. Εάν κάνετε εντοπισμό οποιωνδήποτε προβλημάτων, ανοίξτε ξανά και ελέγχετε τα στρώματα σας - θα μπορούσε να είναι ένα μη υποστηριζόμενο χαρακτηριστικό ή μια έκφραση που χρησιμοποιείται στα αποτελέσματα.

Ορισμένα plugins μετά από εφέ, όπως η καουτσούκ υποστηρίζει τώρα το bodymovin. Η καουτσούκ χρησιμοποιεί τα στρώματα καθοδήγησης και τα κρυμμένα στρώματα. Για να ενεργοποιήσετε αυτά, απλά κάντε κλικ στις ρυθμίσεις Cog δίπλα στη σύνθεση που επιλέξατε και επιλέξτε τις λειτουργίες που χρειάζεστε.

Εάν όλα φαίνονται καλά, υπάρχει μόνο ένα ακόμα πράγμα που πρέπει να κάνετε πριν φύγετε από τα αποτελέσματα πίσω. Σε αυτό το στάδιο θα πρέπει να έχετε ένα φρέσκο ​​αρχείο Data.json που περιγράφει την κινούμενη εικόνα σας, αλλά κανένας παίκτης Bodymovin να το ερμηνεύσει. Στην επέκταση, κάντε κλικ στο κουμπί "Πάρτε το κουμπί αναπαραγωγής" στην επάνω δεξιά γωνία και αποθηκεύστε το με το αρχείο JSON σας.

Τοποθετήστε το κινούμενο σχέδιο

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

Πρώτα κάνετε ένα νέο δοχείο #ANIM_CONTAINER Για να κρατήσετε το κινούμενο σχέδιο σας. Πρέπει επίσης να συμπεριλάβετε το bodymovin.js αρχείο πριν από την ετικέτα κλεισίματος. Επόμενο Πείτε στο Bodymovin τα πάντα για την κινούμενη εικόνα σας και φορτώστε το στο νέο δοχείο.

Ας περπατήσουμε μέσω της εγκατάστασης βήμα προς βήμα:

 VAR Container = Document.getElementidiid ('anim_container');
// Ρυθμίστε το κινούμενο μας

var animdata = {
Δοχείο: Δοχείο,
Renderer: 'SVG',
Autoplay: TRUE,
Loop: Αληθινή,
Διαδρομή: 'data.json'
};
var anim = bodymovin.loadAmation (animdata); 

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

Η ιδιοκτησία διαδρομής λέει στον παίκτη Bodymovin Πού να βρείτε το αρχείο δεδομένων JSON για το κινούμενο σχέδιο. Λόγω της πολιτικής ανταλλαγής πόρων διασταυρούμενης προέλευσης (CARS), η τεχνική που θα χρησιμοποιήσετε για την πρόσβαση στο αρχείο JSON θα λειτουργήσει μόνο αν βρίσκεστε σε ένα διακομιστή ή τοπικό διακομιστή. Για να εργαστείτε τοπικά, μπορείτε να κάνετε αυτό το data.json σε ένα αρχείο Javascript που εκχωρεί το αντικείμενο σε μια μεταβλητή. Σε αυτή την περίπτωση η ρύθμισή σας μπορεί να μοιάζει με αυτό:

& lt; script src = "js / data.js" & gt; / script & gt;
& lt; script & gt;
VAR Container = Document.getELEMEMEDByid ('anim_container');
// Ρυθμίστε το κινούμενο μας
var animdata = {
Δοχείο: Δοχείο,
Renderer: 'SVG',
Autoplay: TRUE,
Loop: Αληθινή,
AnimationData: Δεδομένα
};
var anim = bodymovin.loadApation (animdata);
& lt; / script & gt; 

Ανανεώστε τη σελίδα και η κινούμενη εικόνα σας θα πρέπει να παίζει μέσα στο δοχείο. Επιλέξτε με τα εργαλεία DEV και θα δείτε ότι κάθε στοιχείο στο κινούμενο σχέδιο περιέχεται τώρα στο & lt; g & gt; Ετικέτες και μετατρέπονται σε πραγματικό χρόνο.

Φαίνεται εκπληκτικό, σωστά; Θα πρέπει τώρα να έχετε μια όμορφη, τραγανή κίνηση που δείχνει στο πρόγραμμα περιήγησης (χωρίς μια άθλια ετικέτα βίντεο στο θέαμα ...). Το κινούμενο σχέδιο θα κλιμακωθεί πάντα για να ταιριάζει στο δοχείο του, οπότε προχωρήστε και φυσήξτε το!

Το Bodymovin έχει μια σειρά ισχυρών μεθόδων για τον έλεγχο της κινούμενης εικόνας μετά τη φόρτωσή του. Καλώντας μια μέθοδο όπως anim.pause () ή anim.etdirection () Θα σας επιτρέψει να χειριστείτε την αναπαραγωγή με διαφορετικούς τρόπους. Ας δούμε μερικά παραδείγματα:

• anim.SetDiRection (-1) θα παίξει το κινούμενο σχέδιο αντίστροφα
• anim.pause () και anim.play () θα ξεκινήσει και θα σταματήσει το κινούμενο σχέδιο
• anim.Setspeed (0,5) θα παίξει το κινούμενο σχέδιο κατά τη διάρκεια της μισής ταχύτητας

Προσθέστε την αλληλεπίδραση

Σε αυτό το επόμενο βήμα θα εξερευνήσετε μερικούς από τους διαφορετικούς τρόπους για να προσθέσετε την αλληλεπίδραση στα κινούμενα σχέδια σας μέσω JavaScript. Σε αυτό το παράδειγμα εξάγουμε ένα animation μετά από τα αποτελέσματα με δύο τμήματα: τμήμα Α και τμήμα Β. Τμήμα A Χρήση πλαισίων από το ένα έως 20 (τρίγωνο κρατάει το τμήμα Pogo Stick) Το τμήμα Β χρησιμοποιεί τα πλαίσια από 20 έως 40 (τρίγωνο πηδά πάνω και κάτω σε ένα ραβδί Pogo).

Τώρα, θέλετε να παίξετε το τμήμα A σε ένα βρόχο και στη συνέχεια (μόνο μετά το κλικ του χρήστη) και το τμήμα βρόχου B. Μπορείτε να χρησιμοποιήσετε την ιδιοκτησία PlaySEMATMES για να διαχωρίσετε κινούμενα σχέδια με αυτόν τον τρόπο. Αυτή η μέθοδος θα λάβει δύο επιχειρήματα - μια συστοιχία με αξιώσεις έναρξης και τερματισμού και ένα δεύτερο boolean - isframe. Ρύθμιση αυτού του αληθινού θα ενημερώσει το animation να διαβάσει τις αξίες έναρξης και τερματισμού ως πλαίσια, ενώ το FALSE θα το πει να διαβάσει αυτές τις τιμές ως χρόνος.

 anim.pause ();
anim.playsgents ([0,20], αληθές). 

Προσθέτοντας αυτό λέει το Bodymovin να σταματήσει στο πρώτο πλαίσιο και να παίξει μόνο το κινούμενο σχέδιο από 0 έως 20 καρέ. Καθώς δημιουργήσατε την κινούμενη εικόνα σας με ένα Loop: αλήθεια Ακίνητα Αυτό θα συνεχίσει να αναπαράγει και πάλι και ξανά.

Ας δημιουργήσουμε ολόκληρο το παράδειγμα. Θα χρησιμοποιήσετε δύο τμήματα μιας κινούμενης εικόνας για αυτό το παράδειγμα, οπότε θα δημιουργήσετε δύο λειτουργίες:

 VAR Container = Document.getElementidiid ('anim_container');
// Ρυθμίστε το κινούμενο μας
var animdata = {
Δοχείο: Δοχείο,
Renderer: 'SVG',
Autoplay: False,
Loop: Αληθινή,
Διαδρομή: 'data.json'
};
var anim = bodymovin.loadApation (animdata);
// Όταν η animation έχει φορτωθεί εκτελέστε τη λειτουργία του FirstLoop
anim.addeventListener ('Domloaded', FirstLoop).
// Δημιουργήστε τις λειτουργίες αναπαραγωγής μας
Λειτουργία FirstLoop () {
anim.playsgents ([0,20], αληθές).
};
Λειτουργία δεύτερηςLOOP () {
anim.playsgents ([20,40], αληθές).
};
// Ακούστε για ένα συμβάν κλικ
Container.addeventListener ('κλικ', λειτουργία (συμβάν) {
anim.addeventListener ('loopcomplete', secondloop);
}) · 

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

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

• πρώτος - Πλαίσιο 0 έως 20
• μετάβαση - Πλαίσιο 20 έως 30
• διευθύνω - Πλαίσιο 30 έως 50

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

 VAR Container = Document.getElementidiid ('anim_container');
// Ρυθμίστε το κινούμενο μας
var animdata = {
Δοχείο: Δοχείο,
Renderer: 'SVG',
Autoplay: False,
Loop: Αληθινή,
Διαδρομή: 'data.json'
};
var anim = bodymovin.loadApation (animdata);
// Όταν η animation έχει φορτωθεί εκτελέστε τη λειτουργία του FirstLoop
anim.addeventListener ('Domloaded', FirstLoop).
// Δημιουργήστε τις λειτουργίες αναπαραγωγής μας
Λειτουργία FirstLoop () {
anim.playsgents ([0,20], αλήθεια).
};
μετάβαση λειτουργίας () {
anim.playsings ([20,30], αληθές).
anim.removeveventListener ('loopcomplete');
anim.addeventListener ('loopcomplete', secondloop);
};
Λειτουργία δεύτερηςLOOP () {
anim.playsgents ([30.100], TRUE).
anim.removeveventListener ('loopcomplete');
};
// Ακούστε για ένα συμβάν κλικ
Container.addeventListener ('κλικ', λειτουργία (συμβάν) {
anim.addeventListener ('loopcomplete', μετάβαση)?
}) · 

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

Αυτό είναι!

Έχετε εργαστεί με μερικά από τα χαρακτηριστικά του Bodymovin σήμερα, αλλά αν ενδιαφέρεστε να μάθετε περισσότερα για το plugin, μπορείτε να βρείτε ένα φορτίο πληροφοριών σχετικά με το Bodymovin github σελίδα. Για περισσότερα παραδείγματα, ελέγξτε την πάντα εντυπωσιακή συλλογή Codepen Bodymovin.

Ας ελπίσουμε ότι αυτό το σεμινάριο θα σας δώσει μια ιδέα για τους διαφορετικούς τρόπους με τους οποίους μπορείτε να συνδυάσετε τη χρήση μετά από εφέ και bodymovin για να παράγετε κάποια supercool animation για το διαδίκτυο!

Τώρα μπορείτε να ρυθμίσετε το animation που θα εξαχθεί για τον ιστό, φέρτε τα εξαγόμενα αρχεία σας στο πρόγραμμα περιήγησης και να κάνετε το animation να ανταποκρίνεται στο κλικ. Σκεφτείτε πέρα ​​από τα αρχεία MP4 που χρησιμοποιήσατε προηγουμένως και κοιτάξατε στο Bodymovin για τη δημιουργία πολύ πλουσιότερων εμπειριών στο διαδίκτυο στο μέλλον.

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

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

Αυτό το άρθρο εμφανίστηκε αρχικά στο καθαρό περιοδικό το 2017. Εγγραφείτε εδώ .

Διαβάστε περισσότερα:

• Δημιουργία και ζωντανή πολυγώνια SVG
• 14 εκπληκτικό Adobe Μετά τα πρόσθετα εφέ
• Δημιουργία ιστοριών για κινούμενα σχέδια ιστού