Animer le changement de la couleur de fond de la vue dans Android

Question

Comment animer le changement de couleur d'arrière-plan d'une vue dans Android?

Par exemple:

J'ai une vue avec une couleur de fond rouge. La couleur d'arrière-plan de la vue devient bleue. Comment puis-je faire une transition en douceur entre les couleurs?

Si cela ne peut pas être fait avec des vues, une alternative sera la bienvenue.

Answer 1

Vous pouvez utiliser la nouvelle propriété Property Animation Api pour l'animation couleur:

 Integer colorFrom = getResources().getColor(R.color.red);
Integer colorTo = getResources().getColor(R.color.blue);
ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
colorAnimation.addUpdateListener(new AnimatorUpdateListener() {

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

});
colorAnimation.start();
 

Pour la compatibilité ascendante avec Android 2.x, utilisez la bibliothèque Nine Old Androids de Jake Wharton.

Answer 2

J'ai fini par en trouver une (assez bonne) solution pour ce problème!

Vous pouvez utiliser un TransitionDrawable pour accomplir cette tâche. Par exemple, dans un fichier xml dans le dossier drawable vous pouvez écrire quelque chose comme:

<?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>

Puis, dans votre xml pour l'Affichage vous fasse référence à cette TransitionDrawable dans l' android:background d'attribut.

À ce stade, vous pouvez lancer la transition dans votre code-commande par:

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

Ou exécuter la transition dans le sens inverse en appelant:

transition.reverseTransition(transitionTime);

J'espère que cela vous aide à résoudre votre problème!

Answer 3

Selon la façon dont votre vue est sa couleur d'arrière-plan et la façon dont vous obtenez votre cible de couleur il y a plusieurs façons de le faire.

Les deux premières utilisations de l' Android à la Propriété Animation - cadre.

Utiliser un Objet de l'Animateur si:

• Votre point de vue couleur d'arrière-plan définie comme un argb de la valeur dans un fichier xml.
• Votre point de vue ont déjà eu son jeu de couleurs en view.setBackgroundColor()
• Votre point de vue couleur d'arrière-plan définie dans un drawable qui NE définit toutes les propriétés supplémentaires comme la course ou l'angle des rayons.
• Votre point de vue couleur d'arrière-plan définie dans un drawable et que vous souhaitez supprimer toutes les propriétés supplémentaires comme la course ou l'angle des rayons, gardez à l'esprit que la suppression des propriétés supplémentaires ne seront pas animés.

L'objet de l'animateur travaille en appelant view.setBackgroundColor qui remplace le défini drawable, sauf si c'est une instance d'un ColorDrawable, c'est rarement le cas. Cela signifie que toutes les propriétés de l'arrière à partir d'un drawable comme l'avc ou les coins seront supprimés.

Utiliser une Valeur Animateur si:

• Votre point de vue couleur d'arrière-plan définie dans un drawable qui définit également des propriétés comme la course ou l'angle des rayons ET vous voulez le changer pour une nouvelle couleur qui est décidé lors de l'exécution.

Utiliser une Transition drawable si:

• Votre vue doit passer entre deux drawable qui ont été définis avant le déploiement.

J'ai eu quelques problèmes de performances avec un drawable Transition qui s'exécute pendant que je vais ouvrir un DrawerLayout que je n'ai pas été en mesure de résoudre, donc si vous rencontrez des imprévus bégaiement vous pourriez avoir couru dans le même bug que j'ai.

Vous devrez modifier la Valeur de l'Animateur exemple, si vous souhaitez utiliser un StateLists drawable ou un LayerLists drawable, sinon il va se planter sur l' final GradientDrawable background = (GradientDrawable) view.getBackground(); ligne de.

Objet De L'Animateur:

Définition de la vue:

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

Créer et utiliser un ObjectAnimator aime cela.

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

Vous pouvez également charger l'animation de définition à partir d'un xml à l'aide d'un AnimatorInflater comme XMight n'en Android objectAnimator animer backgroundColor de Mise en page

La Valeur De L'Animateur:

Définition de la vue:

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

Drawable définition:

<?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>

Créer et utiliser un ValueAnimator comme ceci:

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();

Transition drawable:

Définition de la vue:

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

Drawable définition:

<?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>

Utiliser le TransitionDrawable comme ceci:

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

Vous pouvez inverser les animations en appelant .reverse() sur l'animation de l'instance.

Il ya d'autres façons de faire des animations, mais ces trois est probablement le plus commun. J'utilise généralement un ValueAnimator.

Answer 4

vous pouvez faire un animateur d'objet. Par exemple, j'ai un targetView et je veux changer la couleur de votre fond:

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

Answer 5

Un autre moyen facile d'y parvenir est d'effectuer un fondu en utilisant AlphaAnimation.

1. Faites de votre vue un ViewGroup
2. Ajoutez une vue enfant à l'index 0, avec les dimensions de mise en page match_parent
3. Donnez à votre enfant le même arrière-plan que le contenant
4. Passer à l'arrière-plan du conteneur à la couleur cible
5. Masquer l'enfant en utilisant AlphaAnimation.
6. Supprimer l'enfant lorsque l'animation est terminée (en utilisant un AnimationListener)