web-dev-qa-db-fra.com

Comment remplir une vue avec une autre avec Material Design Animation?

J'essaie de contourner différentes fonctionnalités intégrées à Android Material Design mais je ne peux pas faire ce type d'animation quand une vue en remplit une autre comme ça:

Savez-vous comment le faire ou une bibliothèque/projet un exemple qui fait cela?

enter image description here

androidanimationmaterial-design
45
lopez.mikhael

La solution pour ce faire est pathInterpolator et le nom de cet effet est Curved Motion .

Les animations dans la conception des matériaux reposent sur des courbes pour l'interpolation temporelle et les modèles de mouvement spatial. Avec Android 5.0 (API niveau 21) et supérieur, vous pouvez définir des courbes de synchronisation personnalisées et des modèles de mouvement incurvés pour les animations.

Vous pouvez voir comment l'implémenter ici:

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

Et échantillon sur GitHub ICI :

enter image description here

29
lopez.mikhael

J'ai essayé de l'implémenter ci-dessous API 21

ajouter une dépendance gradle

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

Mon xml d'activité est

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>

Mon activité Java is

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


}
45
N J