Ένας οδηγός για αρχάριους για την εφαρμογή των κινούμενων εικόνων Android (Μέρος 2)

Στο Μέρος 1, συζητήσαμε για τα βασικά των κινούμενων σχεδίων και για τις κινήσεις των ιδιοκτησιών. Σε αυτήν την ανάρτηση, θα συζητήσουμε για το Animation View και το νέο πλαίσιο μεταβάσεων δραστηριότητας που εισήχθη στο επίπεδο API 21. Το μεταβατικό πλαίσιο είχε ήδη προστεθεί στο API Level 19 (4.4.2), αλλά έγινε ισχυρότερο στο επίπεδο API 21.

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

Τύποι προβολής κινούμενων εικόνων

  1. Tween Animation - Αυτές είναι οι κινούμενες εικόνες που εφαρμόζονται σε μια προβολή που είναι υπεύθυνη για την κλιμάκωση, τη μετάφραση, την περιστροφή ή την εξασθένιση μιας όψης (είτε μαζί είτε μία προς μία).
  2. Frame Animation - Αυτές οι κινούμενες εικόνες εφαρμόζονται με τη χρήση διαφόρων σχεδίων. Σε αυτό, πρέπει απλώς να καθορίσουμε μια λίστα σχεδίων στο κώδικα XML και η κινούμενη εικόνα να τρέχει ακριβώς όπως τα πλαίσια ενός βίντεο.

Προβολή των κινούμενων εικόνων δεν χρησιμοποιούνται πολύ επειδή το ίδιο πράγμα μπορεί να χρησιμοποιεί το αντικείμενο ViewPropertyAnimator το οποίο είναι πολύ πιο γρήγορο και ευανάγνωστο. Η κινούμενη εικόνα πλαισίου είναι παρόμοια με την Σχεδίαση κινούμενων εικόνων. Το πιο σημαντικό είναι να κατανοήσουμε το νέο πλαίσιο μετάβασης το οποίο είναι πολύ χρήσιμο και προσφέρει όμορφα κινούμενα σχέδια.

Τα νέα κινούμενα σχέδια (API Level 21+)

Δεν είναι δροσερό;

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

android: background = "? attr / selectableItemBackground"

Εδώ θα δοκιμάσουμε τις μεταβάσεις δραστηριότητας και τις μεταβάσεις των κοινών στοιχείων ακριβώς όπως παραπάνω από το GIF.

Το βασικό βήμα είναι να δημιουργήσετε το αρχείο στυλ-v21 και να κάνετε τα εξής:

Επεξήγηση των παραπάνω στυλ-v21.xml

Μεταβάσεις κοινών στοιχείων - Σε αυτό, υπάρχει μια κοινή άποψη μεταξύ δύο δραστηριοτήτων / θραυσμάτων. Η κοινή προβολή σημαίνει ότι και οι δύο απόψεις είναι ίδιες και στις δύο δραστηριότητες, είναι απλά ότι τα μεγέθη τους είναι λίγο διαφορετικά. Για παράδειγμα - μια εικόνα σε ένα στοιχείο προβολής ανακυκλωτή, το οποίο, όταν κάνει κλικ (εμφανίζεται), εμφανίζει τις λεπτομέρειες του στοιχείου με την ίδια εικόνα αλλά σε μεγαλύτερο μέγεθος. Θα κάνουμε κάτι τέτοιο:

Cool ... Αλλά πώς λειτουργεί αυτό;

Βασικά υπάρχουν 2 δραστηριότητες εδώ. Ένα με μια μικρή κουκίδα και μια άλλη με μια μεγάλη κουκίδα και κείμενο. Όταν κάνω κλικ στο κουμπί στη Δραστηριότητα Α, ανοίγει τη Δραστηριότητα Β με την κινούμενη εικόνα. Αυτό το εφέ μπορεί επίσης να διαπιστωθεί στην εφαρμογή Google Play Store. Αλλά εφαρμόζουν επίσης κυκλικές αποκαλύψεις, εφέ κίνησης τόξου. Το πιο σημαντικό πράγμα που πρέπει να παρατηρήσετε εδώ είναι ότι η εικόνα ΔΕΝ κινείται από την αρχική θέση στην τελική θέση. Το μεταβατικό πλαίσιο υπολογίζει τη σκηνή έναρξης και την τελική σκηνή και στη συνέχεια ζωντανεύει ανάμεσα στις σκηνές αυτές. Για να γνωρίζετε πώς λειτουργούν οι κινούμενες εικόνες, ανατρέξτε σε αυτό. Επίσης με τη βοήθεια νέου μηχανισμού πρόθεσης, αυτό είναι εφικτό όπως φαίνεται παρακάτω:

Εδώ έχω χρησιμοποιήσει τον έλεγχο API για γλειφιτζούρι και στη συνέχεια τρέχω τη μετάβαση και σε άλλα επίπεδα η δραστηριότητα θα αρχίσει κανονικά. Η νέα γραμμή ζευγών <> βοηθά το σύστημα να γνωρίζει τα κοινόχρηστα στοιχεία.

Σημείωση - Διατηρήστε το ίδιο όνομα μετάβασης και στις δύο προβολές (μικρή κουκκίδα και μεγάλη κουκίδα). Αυτό βοηθά το σύστημα να γνωρίζει τα κοινά στοιχεία. Ένα καλό πράγμα είναι να τοποθετήσετε το όνομα μετάβασης στο strings.xml.

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

Μεταβάσεις δραστηριοτήτων - Το επίπεδο API 21 εισήγαγε πιο ρεαλιστικές και φιλικές προς το χρήστη μεταβάσεις δραστηριοτήτων. Για παράδειγμα, οι μεταβάσεις Explode, ChangeImageTransform εμφανίζονται πιο ρεαλιστικές και οδηγούν καλύτερα τον χρήστη της ροής των δραστηριοτήτων. Στο παράδειγμά μας παραπάνω χρησιμοποίησα τη μετάβαση από την εξασθένιση που παρέχεται από το σύστημα Android. Αν δεν καθορίσουμε κάποια κινούμενη εικόνα, τότε χρησιμοποιείται από προεπιλογή η λειτουργία AutoTransition. Μπορούμε να δημιουργήσουμε τη δική μας μετάβαση δημιουργώντας μια προσαρμοσμένη τάξη που επεκτείνει τη μετάβαση. Δείτε αυτό για αναφορά.

Circular Reveal

Εφέ κυκλικής αποκάλυψης

Το παραπάνω αποτέλεσμα κυκλικής αποκάλυψης δημιουργείται όταν κάνετε κλικ στο FAB:

Ευχαριστώ που διαβάσατε το άρθρο. Προτάσεις / Διορθώσεις / Σχόλια είναι πάντα ευπρόσδεκτα. Αν σας αρέσει, πατήστε το κουμπί παρόμοιο και μοιραστείτε το άρθρο με την κοινότητα του Android. Ας μοιραστούμε τη γνώση όσο μπορούμε.

Επίσης, Ας γίνουμε φίλοι στο About.me, Twitter, LinkedIn, Github και Facebook.