Πώς να προσθέσετε λάμψη / λάμψη σε ένα ImageView

Πατήστε το κουμπί κλικ στο εικονίδιο εικόνας

Για πρώτη φορά είδα αυτό το φαινόμενο της λάμψης στην εφαρμογή flipkart και στον ιστότοπο. Αυτό ήταν ένα ελκυστικό αποτέλεσμα και αναρωτήθηκα αν θα μπορούσα να εφαρμόσω το ίδιο στην εφαρμογή Android μου. Η ιδέα είναι απλή, όμως αυτό μου έκανε το μάτι. Αυτή η ανάρτηση μπορεί να είναι χρήσιμη για αρχάριους που θέλουν να επιτύχουν αυτό το αποτέλεσμα στην εφαρμογή Android.

Τι συμβαίνει στην πραγματικότητα σε αυτό το κινούμενο σχέδιο;

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

Βήμα 1: Κατασκευάστε τη βασική διάταξη xml με μια απεικόνιση εικόνας και ένα κουμπί (για να δείξετε απλώς το αποτέλεσμα λάμψης ξανά και ξανά για έλεγχο).

Ο δείκτης κώδικας είναι έτσι:





    

        
    


    <Κουμπί
        android: id = "@ + id / κουμπί"
        android: layout_width = "wrap_content"
        android: layout_height = "wrap_content"
        android: layout_alignParentBottom = "true"
        android: layout_centerHorizontal = "true"
        android: layout_marginBottom = "100dp"
        android: layout_marginTop = "32dp"
        android: text = "SHINE" />

Ίσως να ρωτήσετε γιατί τοποθετώ την προβολή εικόνας μέσα σε άλλη σχετική διαφήμιση. Θα μάθετε πότε θα προσθέσω την αντανάκλαση.

Βήμα 2: Λήψη ενός "λαμπερού" σχεδίου. Το Flipkart χρησιμοποίησε πραγματικά ένα png που μπορεί να σχεδιαστεί για το αποτέλεσμα λάμψης που δημιουργήθηκε στο Photoshop. Αλλά θα χρησιμοποιήσουμε το ίδιο το XML της XML για να το δημιουργήσουμε. Με τη βοήθεια του shape> Gradient, αυτό μπορεί να επιτευχθεί εύκολα. Η ισχύς του λαμπρότερου κώδικα που μοιάζει με το αποτέλεσμα της ανάφλεξης είναι η εξής


<σχήμα xmlns: android = "http://schemas.android.com/apk/res/android">
    <κλίση
        android: centerColor = "# AAffffff"
        android: endColor = "# 00ffffff"
        android: startColor = "# 00ffffff" />

Η προεπισκόπηση θα φαίνεται κάπως έτσι:

λάμπει σχεδίαση

Παρατηρητής ότι η κλίση αποτελείται από τρία χρώματα τα οποία έχω επιλέξει, το «κεντρικό» χρώμα ως «λευκό» με κάποια διαφάνεια, ενώ το υπόλοιπο 'τέλος' και 'εκκίνηση' χρώμα είναι διαφανή. Αυτή η σχεδίαση τρέχει πάνω από την εικόνα που δίνει το επιθυμητό αποτέλεσμα της λάμψης.

Βήμα 3: Προσθέστε αυτό το σχέδιο στο xml.





    

        

        
    


    <Κουμπί
        android: id = "@ + id / κουμπί"
        android: layout_width = "wrap_content"
        android: layout_height = "wrap_content"
        android: layout_alignParentBottom = "true"
        android: layout_centerHorizontal = "true"
        android: layout_marginBottom = "100dp"
        android: layout_marginTop = "32dp"
        android: text = "SHINE" />

Βήμα 4: Κωδικοποιήστε την κινούμενη μετάφραση για τη "εικόνα λάμψης" (με id: λάμψη). Βάλτε αυτόν τον κωδικό μέσα στο clicklistener () του κουμπιού. Ο κώδικας δείγματος δίνεται παρακάτω:

findViewById (R.id.button) .setOnClickListener (νέο View.OnClickListener () {
    @Καταπατώ
    public void onClick (Προβολή v) {
        Animation animation = νέα μετάφρασηAnimation (0, img.getWidth () + shine.getWidth (), 0, 0);
        animation.setDuration (550);
        animation.setFillAfter (ψευδή);
        animation.setInterpolator (νέα AccelerateDecelerateInterpolator ());
        shine.startΑνεργοποίηση (κινούμενη εικόνα);
    }}
});

Αυτό που κάνω είναι να δημιουργήσω μια κινούμενη μετάφραση στην οποία i m μεταφράζοντας την εικόνα του λάμπου με απόσταση X ίση με το 'πλάτος της λάμψης που μπορεί να τραβηχτεί' + 'πλάτος της προβολής εικόνας φόντου'. Τώρα μπορούμε να απαντήσουμε στην ερώτηση γιατί κλείνω την προβολή εικόνας μέσα σε μια σχετική διαφήμιση; Στην πραγματικότητα, αυτός ο γονέας θα ενεργήσει τώρα ως ένα ορθογώνιο αποκοπής, έτσι ώστε το γυαλιστερό σχέδιο να μην φαίνεται πέρα ​​από τα όρια της εικόνας. Αυτό το σφάλμα μπορεί να παρατηρηθεί όταν το φόντο της διάταξης έχει γίνει μαύρο ή οποιοδήποτε άλλο χρώμα από το λευκό.

Ώρα! Έχετε επιτύχει το λάμψη. Συγχαρητήρια…

Ο παραπάνω κώδικας δείγματος βρίσκεται στο git: https://github.com/apgapg/ShineEffect.git

Αυτή η επίδραση χρησιμοποιείται αυτή τη στιγμή σε μία από την εφαρμογή μου που ονομάζεται "Reweyou": https://play.google.com/store/apps/details?id=in.reweyou.reweyou