Animierte Änderung der Hintergrundfarbe der Ansicht unter Android

Question

Wie kann man die Änderung der Hintergrundfarbe einer Ansicht unter Android animieren?

Zum Beispiel:

Ich habe eine Ansicht mit einer roten Hintergrundfarbe. Die Hintergrundfarbe der Ansicht ändert sich zu Blau. Wie kann ich einen sanften Übergang zwischen den Farben erreichen?

Wenn dies mit den Ansichten nicht möglich ist, ist eine Alternative willkommen.

Answer 1

Die Dokumentation zu XML-gestützten Animationen ist grauenhaft. Ich habe stundenlang gesucht, nur um die Hintergrundfarbe einer Schaltfläche beim Drücken zu animieren... Das Traurige daran ist, dass die Animation nur ein Attribut entfernt ist: Sie können verwenden exitFadeDuration dans le selector :

<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:exitFadeDuration="200">

    <item android:state_pressed="true">
        <shape android:tint="#3F51B5" />
    </item>

    <item>
        <shape android:tint="#F44336" />
    </item>

</selector>

Dann verwenden Sie es einfach als background für Ihre Ansicht. Kein Java/Kotlin-Code erforderlich.

Answer 2

Der beste Weg ist die Verwendung ValueAnimator y ColorUtils.blendARGB

 ValueAnimator valueAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);
 valueAnimator.setDuration(325);
 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {

              float fractionAnim = (float) valueAnimator.getAnimatedValue();

              view.setBackgroundColor(ColorUtils.blendARGB(Color.parseColor("#FFFFFF")
                                    , Color.parseColor("#000000")
                                    , fractionAnim));
        }
});
valueAnimator.start();

Answer 3

Eine weitere einfache Möglichkeit, dies zu erreichen, ist die Überblendung mit AlphaAnimation.

1. Machen Sie Ihre Ansicht zu einer ViewGroup
2. Hinzufügen einer untergeordneten Ansicht mit dem Index 0 und den Layout-Abmessungen match_parent
3. Geben Sie Ihrem Kind denselben Hintergrund wie dem Container
4. Ändern des Hintergrunds des Containers in die Zielfarbe
5. Blenden Sie das Kind mit AlphaAnimation aus.
6. Entfernen Sie das Kind, wenn die Animation abgeschlossen ist (mit einem AnimationListener)

Answer 4

Hier ist eine schöne Funktion, die dies ermöglicht:

public static void animateBetweenColors(final @NonNull View viewToAnimateItsBackground, final int colorFrom,
                                        final int colorTo, final int durationInMs) {
    final ColorDrawable colorDrawable = new ColorDrawable(durationInMs > 0 ? colorFrom : colorTo);
    ViewCompat.setBackground(viewToAnimateItsBackground, colorDrawable);
    if (durationInMs > 0) {
        final ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
        colorAnimation.addUpdateListener(animator -> {
            colorDrawable.setColor((Integer) animator.getAnimatedValue());
            ViewCompat.setBackground(viewToAnimateItsBackground, colorDrawable);
        });
        colorAnimation.setDuration(durationInMs);
        colorAnimation.start();
    }
}

Und in Kotlin:

@JvmStatic
fun animateBetweenColors(viewToAnimateItsBackground: View, colorFrom: Int, colorTo: Int, durationInMs: Int) {
    val colorDrawable = ColorDrawable(if (durationInMs > 0) colorFrom else colorTo)
    ViewCompat.setBackground(viewToAnimateItsBackground, colorDrawable)
    if (durationInMs > 0) {
        val colorAnimation = ValueAnimator.ofObject(ArgbEvaluator(), colorFrom, colorTo)
        colorAnimation.addUpdateListener { animator: ValueAnimator ->
            colorDrawable.color = (animator.animatedValue as Int)
            ViewCompat.setBackground(viewToAnimateItsBackground, colorDrawable)
        }
        colorAnimation.duration = durationInMs.toLong()
        colorAnimation.start()
    }
}

Answer 5

Dies ist die Methode, die ich in einer Basisaktivität verwende, um den Hintergrund zu ändern. Ich verwende GradientDrawables, die im Code generiert werden, aber man kann sie auch anpassen.

    protected void setPageBackground(View root, int type){
        if (root!=null) {
            Drawable currentBG = root.getBackground();
            //add your own logic here to determine the newBG 
            Drawable newBG = Utils.createGradientDrawable(type); 
            if (currentBG==null) {
                if(Build.VERSION.SDK_INT<Build.VERSION_CODES.JELLY_BEAN){
                    root.setBackgroundDrawable(newBG);
                }else{
                    root.setBackground(newBG);
                }
            }else{
                TransitionDrawable transitionDrawable = new TransitionDrawable(new Drawable[]{currentBG, newBG});
                transitionDrawable.setCrossFadeEnabled(true);
                if(Build.VERSION.SDK_INT<Build.VERSION_CODES.JELLY_BEAN){
                     root.setBackgroundDrawable(transitionDrawable);
                }else{
                    root.setBackground(transitionDrawable);
                }
                transitionDrawable.startTransition(400);
            }
        }
    }

aktualisieren: Falls jemand auf das gleiche Problem stößt, habe ich festgestellt, dass aus irgendeinem Grund auf Android <4.3 mit setCrossFadeEnabled(true) verursachen einen unerwünschten White-Out-Effekt, so dass ich für <4.3 mit der oben genannten Methode von @Roman Minenok ValueAnimator zu einer Volltonfarbe wechseln musste.