circulaire animation lors du passage révèlent entre deux vues

Question

Ce que je suis en train de réaliser

J'ai un groupe de boutons dans un GridLayout. L'un des boutons bascule la fonction des autres boutons entre l'arrondi et l'arrondi. J'essaye d'implémenter une animation qui change la couleur des boutons dans un effet d'ondulation. L'animation circulaire de révélation est l'effet que je veux où la nouvelle couleur se propage du point de contact sur le bouton de basculement au reste des autres boutons. Je veux seulement que l'animation se développe à partir du point de contact dans les deux cas, passant de l'arrondi à l'arrondi.

Problème

L'animation ne fonctionne qu'en première instance de l'arrondissement jusqu'à arrondi vers le bas (mon application commence par arrondi comme la valeur par défaut). Il n'y a pas d'animation lorsque vous passez de l'arrondi à l'arrondi; tous les boutons changent simplement de couleur et le bouton à bascule change d'icône.

Ceci est ma première application, donc j'ai de la difficulté à essayer de savoir où je me suis trompé.

Ma méthodologie et le code

Dans mon fichier de mise en page de activity_main.xml, j'ai créé deux ensembles de GridLayouts (chacun avec des boutons de l'enfant) et les en couches l'une sur l'autre en enveloppant les deux dans un FrameLayout. Un ensemble est donné une couleur différente à l'autre ensemble; J'ai également une icône différente pour le bouton de basculement pour chaque ensemble pour faire la différence entre les deux méthodes d'arrondi. J'ai défini l'attribut de visibilité sur le second parent GridLayout sur invisible.

<FrameLayout 

    <GridLayout 
     android:id="@+id/roundUp" 

     <ImageButton 
      android:id="@+id/buttonU1" 
      ... /> 
     <Button ... /> 
     <Button ... /> 
    </GridLayout> 

    <GridLayout 
     android:id="@+id/roundDown" 
     android:visibility="invisible" 

     <ImageButton 
      android:id="@+id/buttonD1" 
      ... /> 
     <Button ... /> 
     <Button ... /> 
    </GridLayout> 

</FrameLayout> 

Dans mon fichier MainActivity.java:

import ... 

boolean roundingMode; 

public class MainActivity extends AppCompatActivity { 

    GridLayout roundUp, roundDown; 
    ImageButton buttonU1, buttonD1; 
    Button ... 

    @Override; 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     roundUp = (GridLayout) findViewById(R.id.roundUp); 
     buttonU1 = (ImageButton) findViewById(R.id.buttonU1); 

     roundDown = (GridLayout) findViewById(R.id.roundDown); 
     buttonD1 = (ImageButton) findViewById(R.id.buttonD1); 

     roundingMode = true; 

     buttonU1.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 

       buttonCircularRevealAnim(roundDown); 
       roundingMode = false; 
      } 
     }); 

     buttonD1.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 

       buttonCircularRevealAnim(roundUp); 
       roundingMode = true; 
      } 
     }); 
    } 

    public void buttonCircularRevealAnim(View view) { 

     int originX = roundUp.getWidth()/2; 
     int originY = roundUp.getHeight()/2; 

     float finalRadius = (float) Math.hypot(originX,originY); 

     Animator anim; 

     if (roundingMode) { 

      anim = ViewAnimationUtils.createCircularReveal(roundDown, originX, originY, 0, finalRadius); 
      roundDown.setVisibility(View.VISIBLE); 
      anim.start(); 

      anim.addListener(new AnimatorListenerAdapter() { 
       @Override 
       public void onAnimationEnd(Animator animation) { 
        super.onAnimationEnd(animation); 
        roundUp.setVisibility(View.INVISIBLE); 
       } 
      }); 

     } else { 

      anim = ViewAnimationUtils.createCircularReveal(roundUp, originX, originY, 0, finalRadius); 
      roundUp.setVisibility(View.VISIBLE); 
      anim.start(); 

      anim.addListener(new AnimatorListenerAdapter() { 
       @Override 
       public void onAnimationEnd(Animator animation) { 
        super.onAnimationEnd(animation); 
        roundDown.setVisibility(View.INVISIBLE); 
       } 
      }); 
     } 
    } 

ignorer le fait que j'ai actuellement l'origine de l'animation dans le centre de la GridLayout. Je veux juste que les bases fonctionnent en premier.

Je pense que le problème réside dans la logique et/ou la mise en place de l'animation?

J'ai essayé de déplacer les calculs originX, originY et finalRadius dans l'instruction if et d'utiliser roundUp (pour roundingMode true) et roundDown GridLayouts (pour roundingMode false) mais ça n'a pas fonctionné - donc je me dis que ça ne marche pas Peu importe si elle est invisible (dans le scénario où vous passez de l'arrondi à l'arrondi).

Answer 1

On comprendra finalement que l'animation de révélation circulaire fonctionne pour révéler une vue chevauchante qui est initialement invisible. Donc, pour l'utiliser pour changer la couleur d'une vue d'avant en arrière, vous devez appliquer la nouvelle couleur (à partir de la vue révélée) à la vue en dessous après la fin de l'animation, puis rendre invisible la vue révélée avec l'autre couleur appliqué à elle.

Mon code original essayait de révéler la vue en dessous qui est bien sûr impossible.

Je trouve la page suivante très utile: http://myhexaville.com/2016/12/19/keep-your-app-material/