Κίνηση: Μεταπήδηση

Πρόσφατα μια κλήση για βοήθεια έπεσε στα μάτια μου. ζητώντας πώς να εφαρμόσετε μια φανταχτερά animation 'getting location' στο Android:

- http://drbl.in/2470871 από @lekarew

Σκεφτόμουν αμέσως ότι ήταν ένας πρωταρχικός υποψήφιος για ένα AnimatedVectorDrawable (AVD στο εξής) που τέθηκε έτσι ώστε να αποδειχθεί ένας τρόπος για να υλοποιηθεί αυτό. Μερικοί άνθρωποι ρώτησαν πώς έκανα αυτό ... έτσι εδώ είναι μια βλάβη.

Για μια εισαγωγή στις δυνατότητες του AnimatedVectorDrawable, συνιστώ ανεπιφύλακτα αυτή τη θέση από τον Alex Lockwood

Περίγραμμα

Κοιτάζοντας τη σύνθεση, αυτό αποτελείται από τρεις τύπους κινούμενων σχεδίων:

  1. Η καρφίτσα κινείται & αλλάζει το σχήμα για να κάνει άλμα. Το AVD υποστηρίζει αυτό με την κίνηση του πραγματικού σχήματος μιας διαδρομής, γνωστή ως μορφοποίηση διαδρομής.
  2. Οι κουκίδες κινούνται προς τα αριστερά, αυτό θα είναι μια απλή μετάφραση.
  3. Οι κουκίδες εξασθενούν ως είσοδος / έξοδος από τη σκηνή.

Ιχνηλασία

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

Άνοιξα το GIF στο Photoshop το οποίο παρέχει μια χρονολογική απεικόνιση των πλαισίων της κινούμενης εικόνας. Έχω περάσει από αυτό και έσωσε αντίγραφα των πλαισίων όπου ο πείρος ήταν σε ακραίες κινήσεις δηλαδή περίπου να αλλάξει κατεύθυνση ή να αλλάξει το σχήμα σημαντικά. Αυτά τα «θέτει» θα είναι τα σχήματα που θα μεταμορφωθεί ανάμεσα στον πείρο. Συνολικά υπήρχαν 5 σημαντικές θέσεις.

Έχω επικολλήσει κάθε ένα από αυτά στο Sketch (το προτιμώμενο εργαλείο σχεδίασης διάνυσμα) και προέκυψε το pin σε κάθε μία από τις θέσεις.

Τα 5 σχήματα μορφοποιούν την καρφίτσα

Ορισμένα εργαλεία μπορούν να ανιχνεύσουν αυτόματα εικόνες ράστερ και να δημιουργήσουν μονοπάτια διανύσματος για εσάς. Γνωρίζοντας ότι ήθελα να εκτελέσω μια κίνηση μορφοποίησης μονοπατιού εντούτοις, σήμαινε ότι χρειάζομαι «συμβατά μονοπάτια». ότι κάθε διαδρομή πρέπει να έχει τον ίδιο αριθμό και τύπο σημείων. Έτσι, τραβώντας τον πείρο με ένα απλό σχήμα (αποτελούμενο από 8 σημεία, το καθένα με 2 σημεία ελέγχου) και μεταβάλλοντας το με το χέρι για να σχηματίσουν κάθε στάση θα μπορούσα να είμαι σίγουρος ότι μπορούμε αργότερα να ζωντανέψουμε ανάμεσα στα σχήματα.

Έπειτα εξήγαγα κάθε καρέ ως μεμονωμένα αρχεία SVG. Τώρα το SVG είναι ένα τεράστιο spec και το VectorDrawable του Android υποστηρίζει μόνο ένα υποσύνολο του. Είναι επίσης χρήσιμο να θυμάστε ότι πρέπει να αναλύονται και να αποδίδονται σε μια περιορισμένη κινητή συσκευή. επομένως πάντα προσπαθώ να απλοποιήσω τα SVG μου. Για να το κάνετε αυτό, τους έτρεξα μέσα από το SVGO (χρησιμοποιώντας το SVGOMG από τον Jake Archibald) ορίζοντας την ακρίβεια στο 1 δεκαδικό ψηφίο.

Χοροπηδώ

Τώρα που έχουμε τα μονοπάτια της κάθε θέσης της καρφίτσας, ήρθε η ώρα να τα κινηθούμε! Για να το κάνω αυτό, στράφηκα στο φοβερό εικονογράφος του Roman Nurik. Πρόκειται για ένα IDE που βασίζεται στον ιστό για τη δημιουργία AnimatedVectorDrawables. Έπεσα στο πρώτο SVG και έπειτα έκανα κλικ στο εικονίδιο του χρονόμετρου δίπλα στο στρώμα pin και πρόσθεσε μια νέα animation pathData. Αυτό παράγει ένα πίνακα επιθεωρητών όπου θα μπορούσα να εισάγω τη διαδρομή του πείρου από το επόμενο πλαίσιο στο toValue. Επανέλαβα αυτό το 4 φορές για να φτιάξω το κινούμενο σχέδιο (όπου το τελευταίο βήμα ζωντανεύει από την τελική στάση, πίσω στην αρχική).

Για τις τιμές χρονισμού ανέφερα πίσω στο αρχικό GIF όπου κάθε πλαίσιο διήρκεσε 30ms έτσι αν υπήρχαν 4 καρέ μεταξύ των θέσεων, χρησιμοποιήστε μια διάρκεια των 120ms κλπ. Επέλεξα να χρησιμοποιήσω απλώς τυποποιημένους interpolators υλικών, αλλά στην πραγματικότητα αυτό θα μπορούσε να ωφεληθεί από το fine tuning .

Εμπόδια

Για τις κουκίδες που κινούνται κατά μήκος μπορούμε να εκτελέσουμε μια απλή μετάφραση. Εξετάζοντας τη σύνθεση πηγής, κάθε τρίτη κουκίδα είναι μεγαλύτερη και κόκκινη. πώς να το εφαρμόσετε σε ένα ωραίο βρόχο; Ενώ θα μπορούσατε να το εφαρμόσετε μόνο με 3 κουκκίδες και να ζωντανέψετε το καθένα ξεχωριστά. Αποφάσισα να συμπεριλάβω 5 κουκίδες όπου οι πιο δεξιές κουκίδες εκτείνονται πέρα ​​από την προβολή:

Κάνοντας αυτό, μπορούμε να ζωντανέψουμε ολόκληρη την ομάδα των κουκίδων προς τα αριστερά όλοι μαζί, μόλις η 4η κουκίδα φτάσει στην αρχική θέση της 1ης κουκίδας, επαναφέρουμε στιγμιαία τη μετάφραση, πηδώντας πίσω στο σημείο εκκίνησης. Καθαρός!

Ερχεται και φεύγει

Θέλουμε οι κουκίδες να ξεθωριάζουν καθώς εισέρχονται και ξεθωριάζουν καθώς φεύγουν, αυτό είναι ένα απλό κινούμενο σχέδιο του fillAlpha, το αφήνω αυτό σε εσάς για να δω πώς επιτυγχάνεται!

Βγάλτε τον βρόχο

Τώρα για να γίνει αυτό σε μια πλήρη animation βρόχο υπάρχουν μερικά πράγματα που πρέπει να εξετάσει. Το κινούμενο τεμάχιο έχει τριπλασιάσει τη διάρκεια του πηδαλιού. Θεώρησα ότι σπάζοντάς τα σε 2 ξεχωριστά AVDs και τα στρώματά τους ... αλλά αποφάσισε ότι η επανάληψη του άλματος 3 φορές ήταν απλούστερη!

Έχω χτυπήσει το μαγικό κουμπί εξαγωγής στο Icon Animator που μου έδωσε τον ορισμό AVD, έτοιμο να πέσει στο έργο μου. Ωστόσο, το εργαλείο εξακολουθεί να είναι σε "προεπισκόπηση", γι 'αυτό κάναμε μερικές βελτιώσεις σε αυτό για να καθαρίσετε την έξοδο, δηλαδή να αφαιρέσετε τυχόν περιττές ιδιότητες και να εξαργυρώσετε τυχόν επαναλαμβανόμενες τιμές (όπως οι διαφορετικές διαδρομές καρφώματος και ορισμένα χρώματα) πιο διατηρήσιμα.

Στην πραγματικότητα, κάνοντας τον πλήρη βρόχο AVD ήταν πιο δύσκολο από όσο σκέφτηκα. Προφανώς η επανάληψηMode στα σύνολα κινούμενων σχεδίων αγνοείται (έχουν κατατεθεί σφάλματα). Εργάστηκα γύρω από αυτό ακούγοντας το τέλος της κινούμενης εικόνας και ξεκινώντας ξανά. Δυστυχώς οι επανάκλησεις προστέθηκαν μόνο στο API23, αλλά θα μπορούσατε να επιτύχετε το ίδιο αποτέλεσμα μέσω PostDelayed κλπ.

Ζωντανέψτε

Μπορείτε να βρείτε μια ουσία του κώδικα εδώ ή να δείτε την πλήρη σύνθεση στο Icon Animator και να παίξετε με αυτό.

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