studio - material design android pdf

¿Cómo llenar una vista con otra con Material Design Animation?

Question

Estoy tratando de ir por diferentes funcionalidades integradas con Android Material Design pero no puedo hacer este tipo de animación cuando una vista llena otra como la siguiente:

¿Sabes cómo hacerlo o una biblioteca / proyecto un ejemplo que hace esto?

Answer 1

La solución para hacer eso es pathInterpolator y el nombre de este efecto es Curved Motion .

Las animaciones en el diseño de material se basan en curvas de interpolación de tiempo y patrones de movimiento espacial. Con Android 5.0 (nivel API 21) y superior, puede definir curvas de tiempo personalizadas y patrones de movimiento curvo para animaciones.

Puede ver cómo implementarlo aquí:

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

Y muestra en GitHub HERE :

Answer 2

Traté de implementar esto a continuación API 21

agregar dependencia de gradle

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

Mi actividad xml es

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>

Mi actividad java es

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