Come riempire una vista con un'altra con Animazione disegno materiale?

Question

sto cercando di andare in giro diverse funzionalità integrate con Materiale Android design ma non posso fare questo tipo di animazione quando una vista riempire un altro genere:

Sai come si fa o una biblioteca/progetto un esempio che fa questo?

Answer 1

La soluzione per farlo è pathInterpolator e il nome di questo effetto è movimento curvo.

Le animazioni nel design del materiale si basano sulle curve per l'interpolazione temporale e sui modelli di spostamento spaziale. Con Android 5.0 (livello API 21) e sopra, è possibile definire curve temporali personalizzate e modelli di movimento curvi per le animazioni.

Si può vedere come implementare qui:

http://developer.android.com/training/material/animations.html#CurvedMotion

e il campione su GitHub HERE:

Answer 2

ho cercato di attuare questa sotto API 21

aggiungere dipendenza Gradle

dependencies { 
     compile 'com.github.ozodrukh:CircularReveal:1.0.6@aar' 
    } 

mia attività XML è

activity_reval_anim.xml

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context=".RevalAnimActivity"> 

    <ImageView 
     android:id="@+id/img_top" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     android:layout_alignParentTop="true" 
     android:background="@color/color_primary" 

     android:src="@drawable/ala"/> 


    <io.codetail.widget.RevealLinearLayout 

     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:layout_below="@+id/img_top" 
     android:background="@color/color_primary"> 
     <LinearLayout 
      android:visibility="invisible" 
      android:id="@+id/ll_reveal" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@color/color_accent" 
      android:orientation="horizontal" 
      ></LinearLayout> 

    </io.codetail.widget.RevealLinearLayout> 
    <ImageButton 
     android:id="@+id/img_floating_btn" 
     android:layout_width="60dp" 
     android:layout_height="60dp" 
     android:layout_alignParentRight="true" 
     android:layout_marginRight="40dp" 
     android:layout_marginTop="170dp" 
     android:background="@drawable/expand_btn"/> 
</RelativeLayout> 

La mia attività è java

RevalAnimActivity.java

public class RevalAnimActivity extends ActionBarActivity { 

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

     final ImageButton mFloatingButton = (ImageButton) findViewById(R.id.img_floating_btn); 
     mFloatingButton.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 


       animateButton(mFloatingButton); 


      } 


     }); 

    } 

    private void animateButton(final ImageButton mFloatingButton) { 

     mFloatingButton.animate().translationXBy(0.5f).translationY(150).translationXBy(-0.9f) 
       .translationX(-150). setDuration(300).setListener(new AnimatorListenerAdapter() { 
      @Override 
      public void onAnimationEnd(Animator animation) { 
       super.onAnimationEnd(animation); 

       animateReavel((int) mFloatingButton.getX(), 150,mFloatingButton); 
      } 
     }); 

    } 

    private void animateReavel(int cx, int cy, final ImageButton mFloatingButton) { 


     final View myView = findViewById(R.id.ll_reveal); 

     // get the final radius for the clipping circle 
     float finalRadius = hypo(myView.getWidth(), myView.getHeight()); 

     SupportAnimator animator = 
       ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius); 
     animator.addListener(new SupportAnimator.AnimatorListener() { 
      @Override 
      public void onAnimationStart() { 
       mFloatingButton.setVisibility(View.INVISIBLE); 
       myView.setVisibility(View.VISIBLE); 
      } 

      @Override 
      public void onAnimationEnd() { 
       Toast.makeText(getApplicationContext(), "Done", Toast.LENGTH_LONG) 
         .show(); 
      } 

      @Override 
      public void onAnimationCancel() { 
      } 

      @Override 
      public void onAnimationRepeat() { 
      } 
     }); 
     animator.setInterpolator(new AccelerateDecelerateInterpolator()); 
     animator.setDuration(1000); 
     animator.start(); 

    } 

    static float hypo(int a, int b) { 
     return (float) Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); 
    } 


}