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

Sie können neue Eigenschaft Animation Api für Farbanimation:

int colorFrom = getResources().getColor(R.color.red);
int colorTo = getResources().getColor(R.color.blue);
ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
colorAnimation.setDuration(250); // milliseconds
colorAnimation.addUpdateListener(new AnimatorUpdateListener() {

    @Override
    public void onAnimationUpdate(ValueAnimator animator) {
        textView.setBackgroundColor((int) animator.getAnimatedValue());
    }

});
colorAnimation.start();

Für die Abwärtskompatibilität mit Android 2.x verwenden Sie Bibliothek "Neun alte Androiden von Jake Wharton.

Le site getColor Methode wurde in Android M veraltet, so dass Sie zwei Möglichkeiten haben:

• Wenn Sie die Support-Bibliothek verwenden, müssen Sie die getColor ruft mit:

  ContextCompat.getColor(this, R.color.red);

• wenn Sie die Support-Bibliothek nicht verwenden, müssen Sie die getColor ruft mit:

  getColor(R.color.red);

Answer 2

Am Ende habe ich eine (ziemlich gute) Lösung für dieses Problem gefunden!

Sie können eine TransitionDrawable um dies zu erreichen. In einer XML-Datei im Drawable-Ordner könnten Sie zum Beispiel etwas schreiben wie:

<?xml version="1.0" encoding="UTF-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- The drawables used here can be solid colors, gradients, shapes, images, etc. -->
    <item android:drawable="@drawable/original_state" />
    <item android:drawable="@drawable/new_state" />
</transition>

Dann, in Ihrem XML für die eigentliche Ansicht würden Sie diese TransitionDrawable in der android:background Attribut.

An dieser Stelle können Sie den Übergang in Ihrem Code on-command einleiten, indem Sie dies tun:

TransitionDrawable transition = (TransitionDrawable) viewObj.getBackground();
transition.startTransition(transitionTime);

Oder führen Sie den Übergang in umgekehrter Reihenfolge aus, indem Sie aufrufen:

transition.reverseTransition(transitionTime);

---

Véase Romans Antwort für eine andere Lösung unter Verwendung der Property Animation API, die zum Zeitpunkt der ursprünglichen Veröffentlichung dieser Antwort noch nicht verfügbar war.

Answer 3

Je nachdem, wie Ihre Ansicht ihre Hintergrundfarbe erhält und wie Sie Ihre Zielfarbe erhalten, gibt es verschiedene Möglichkeiten, dies zu tun.

Bei den ersten beiden wird die Android-Eigenschaftsanimation Rahmen.

Verwenden Sie eine Objekt-Animator wenn:

• Ihre Ansicht hat eine Hintergrundfarbe, die als argb Wert in einer xml-Datei.
• Die Farbe Ihrer Ansicht wurde zuvor durch view.setBackgroundColor()
• Ihre Ansicht hat ihre Hintergrundfarbe in einer Zeichenfläche definiert, die NICHT definiert alle zusätzlichen Eigenschaften wie Striche oder Eckradien.
• Wenn die Hintergrundfarbe Ihrer Ansicht in einer Zeichenfläche definiert ist und Sie zusätzliche Eigenschaften wie Striche oder Eckradien entfernen möchten, beachten Sie, dass die Entfernung der zusätzlichen Eigenschaften nicht animiert wird.

Der Objektanimator funktioniert durch den Aufruf von view.setBackgroundColor die die definierte Zeichenfläche ersetzt, es sei denn, sie ist eine Instanz einer ColorDrawable was selten der Fall ist. Das bedeutet, dass alle zusätzlichen Hintergrundeigenschaften einer Zeichenfläche wie Striche oder Ecken entfernt werden.

Verwenden Sie eine Wert Animator wenn:

• Ihre Ansicht hat ihre Hintergrundfarbe in einem Drawable definiert, das auch Eigenschaften wie die Kontur oder die Eckradien festlegt, und Sie möchten sie in eine neue Farbe ändern, die während der Ausführung festgelegt wird.

Verwenden Sie eine Übergang zeichenbar wenn:

• Ihre Ansicht sollte zwischen zwei Drawables wechseln, die vor der Bereitstellung definiert wurden.

Ich hatte einige Performance-Probleme mit Transition Drawables, die ausgeführt werden, während ich ein DrawerLayout öffne, die ich nicht lösen konnte. Wenn Sie also auf unerwartetes Stottern stoßen, könnten Sie auf denselben Fehler gestoßen sein wie ich.

Sie müssen das Value Animator-Beispiel ändern, wenn Sie eine StateLists zeichenbar oder eine LayerLists zeichenbar sonst stürzt es bei der final GradientDrawable background = (GradientDrawable) view.getBackground(); Linie.

Objekt-Animator :

Definition anzeigen:

<View
    android:background="#FFFF0000"
    android:layout_width="50dp"
    android:layout_height="50dp"/>

Erstellen und Verwenden einer ObjectAnimator wie diese.

final ObjectAnimator backgroundColorAnimator = ObjectAnimator.ofObject(view,
                                                                       "backgroundColor",
                                                                       new ArgbEvaluator(),
                                                                       0xFFFFFFFF,
                                                                       0xff78c5f9);
backgroundColorAnimator.setDuration(300);
backgroundColorAnimator.start();

Sie können die Animationsdefinition auch aus einer Xml-Datei laden, indem Sie einen AnimatorInflater verwenden, wie es XMight in Android objectAnimator animate backgroundColor von Layout

Wert Animator :

Definition anzeigen:

<View
    android:background="@drawable/example"
    android:layout_width="50dp"
    android:layout_height="50dp"/>

Zeichnungsfähige Definition:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke
        android:color="#edf0f6"
        android:width="1dp"/>
    <corners android:radius="3dp"/>

</shape>

Erstellen und verwenden Sie einen ValueAnimator wie diesen:

final ValueAnimator valueAnimator = ValueAnimator.ofObject(new ArgbEvaluator(),
                                                           0xFFFFFFFF,
                                                           0xff78c5f9);

final GradientDrawable background = (GradientDrawable) view.getBackground();
currentAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

    @Override
    public void onAnimationUpdate(final ValueAnimator animator) {
        background.setColor((Integer) animator.getAnimatedValue());
    }

});
currentAnimation.setDuration(300);
currentAnimation.start();

Übergang zeichenbar :

Definition anzeigen:

<View
    android:background="@drawable/example"
    android:layout_width="50dp"
    android:layout_height="50dp"/>

Zeichnungsfähige Definition:

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#FFFFFF"/>
            <stroke
                android:color="#edf0f6"
                android:width="1dp"/>
            <corners android:radius="3dp"/>
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="#78c5f9"/>
            <stroke
                android:color="#68aff4"
                android:width="1dp"/>
            <corners android:radius="3dp"/>
        </shape>
    </item>
</transition>

Verwenden Sie das TransitionDrawable wie folgt:

final TransitionDrawable background = (TransitionDrawable) view.getBackground();
background.startTransition(300);

Sie können die Animationen umkehren, indem Sie .reverse() auf die Animationsinstanz.

Es gibt noch einige andere Möglichkeiten, Animationen zu erstellen, aber diese drei sind wahrscheinlich die häufigsten. Ich verwende in der Regel einen ValueAnimator.

Answer 4

Sie können einen Objektanimator erstellen. Ich habe zum Beispiel eine targetView und möchte ihre Hintergrundfarbe ändern:

int colorFrom = Color.RED;
int colorTo = Color.GREEN;
int duration = 1000;
ObjectAnimator.ofObject(targetView, "backgroundColor", new ArgbEvaluator(), colorFrom, colorTo)
    .setDuration(duration)
    .start();

Answer 5

Wenn Sie eine Farbanimation wie diese wünschen,

dieser Code wird Ihnen helfen:

ValueAnimator anim = ValueAnimator.ofFloat(0, 1);   
anim.setDuration(2000);

float[] hsv;
int runColor;
int hue = 0;
hsv = new float[3]; // Transition color
hsv[1] = 1;
hsv[2] = 1;
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {

        hsv[0] = 360 * animation.getAnimatedFraction();

        runColor = Color.HSVToColor(hsv);
        yourView.setBackgroundColor(runColor);
    }
});

anim.setRepeatCount(Animation.INFINITE);

anim.start();