So fügen Sie einem ImageView einen Glanz- / Blendeffekt hinzu

Shine-Effekt auf Imageview mit Klick auf die Schaltfläche

Ich habe diesen Blendeffekt zum ersten Mal auf der Flipkart-App und der Website gesehen. Dies war ein attraktiver Effekt und ich fragte mich, ob ich das gleiche in meiner Android-App implementieren könnte. Das Konzept ist zwar einfach, aber das hat meinen Blick darauf gelenkt. Dieser Beitrag kann für Anfänger hilfreich sein, die diesen Effekt in ihrer Android-Anwendung erzielen möchten.

Was ist eigentlich in dieser Animation los?

Dieser Effekt wird nur erzielt, indem ein Zeichenobjekt (die Blendung) über eine Bildansicht mit einigen zeitlichen und interpolatorischen Einschränkungen verschoben wird. Inzwischen konnten Sie sehen, wie einfach dies ist. Beginnen wir also mit der Implementierung derselben:

Schritt 1: Konstruieren Sie das grundlegende XML-Layout mit einer Bildansicht und einer Schaltfläche (um den Glanzeffekt zum Testen immer wieder zu zeigen).

Der Beispielcode sieht folgendermaßen aus:





    

        
    


    

Sie könnten fragen, warum ich imageview in ein anderes relatives Layout lege. Sie werden erfahren, wann ich die Blendung ziehbar hinzufügen werde.

Schritt 2: Erzielen eines "Glanzes". Für den zuvor in Photoshop generierten Shine-Effekt verwendete Flipkart ein Png-Zeichen. Wir verwenden jedoch das XML von Android selbst, um dies zu generieren. Mit Hilfe von Shape> Gradient kann dies problemlos erreicht werden. Der Code für den Blendeffekt sieht folgendermaßen aus:



    

Die Vorschau sieht ungefähr so ​​aus:

leuchten ziehbar

Beobachten Sie, dass der Farbverlauf aus drei Farben besteht, die ich ausgewählt habe. Die Farbe "Mitte" ist "Weiß" mit etwas Transparenz, während die restlichen Farben "Ende" und "Start" transparent sind. Dieses Zeichen läuft über die Bildansicht, wodurch der gewünschte Blendeffekt erzielt wird.

Schritt 3: Fügen Sie dieses Drawable zum XML hinzu.





    

        

        
    


    

Schritt 4: Codieren Sie die Übersetzungsanimation für die Bildansicht "Shine" (mit id: shine). Fügen Sie diesen Code in den Clicklistener () der Schaltfläche ein. Der Beispielcode ist unten angegeben:

findViewById (R.id.button) .setOnClickListener (neuer View.OnClickListener () {
    @Override
    public void onClick (View v) {
        Animation animation = new TranslateAnimation (0, img.getWidth () + shine.getWidth (), 0, 0);
        animation.setDuration (550);
        animation.setFillAfter (false);
        animation.setInterpolator (neuer AccelerateDecelerateInterpolator ());
        shine.startAnimation (Animation);
    }
});

Ich erstelle eine Übersetzungsanimation, in der ich die Glanzbildansicht mit einem Abstand X übersetze, der der "Breite des zu zeichnenden Glanzes" + "Breite der Hintergrundbildansicht" entspricht. Nun kann die Frage beantwortet werden, warum ich imageview in ein relativelayout einbinde. Tatsächlich fungiert das übergeordnete Element jetzt als Beschneidungsrechteck, sodass der zu zeichnende Glanz nicht über die Bildgrenzen hinaus sichtbar ist. Dieser Fehler tritt auf, wenn der Hintergrund des Layouts schwarz oder in einer anderen Farbe als Weiß angezeigt wird.

Hurra! Sie haben den Glanzeffekt erreicht. Glückwunsch…

Der obige Beispielcode befindet sich auf git: https://github.com/apgapg/ShineEffect.git

Dieser Effekt wird derzeit in einer meiner Apps mit dem Namen "Reweyou" verwendet: https://play.google.com/store/apps/details?id=in.reweyou.reweyou