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


}