一个登录的特效动画

前段事件突然心血来潮，在国外设计找了个比较酷炫的动画自己来练练手，效果如下，初看之下像是一个简单的共享动画，但是仔细一看，明显是点击登录后先扩散一个波纹，然后无缝跳转到第二个页面继续扩散

short.gif

解决过程

当时卡在使用共享元素动画，但是共享元素动画不能实现在登录页面先扩散然后再跳转到第二个页面，刚好翻到一个人写的波纹动画的使用，思路是，点击a页面任意一个区域，将点击的坐标传递给b页面，然后在b页面以传递过来的x y为中心坐标轴开启一个波纹动画。

首先先将b 页面设置为背景透明

    <style name="noAnimTheme" parent="AppTheme">
        <item name="android:windowAnimationStyle">@null</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowIsTranslucent">true</item>
    </style>

xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/spalsh_bg"
    android:orientation="vertical">


    <EditText
        android:id="@+id/et_user_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="请输入用户名"
        android:inputType="textPersonName"
        android:textAlignment="viewStart"
        android:textColor="@android:color/white"
        android:textColorHint="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.32999998" />

    <EditText
        android:id="@+id/et_password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="请输入密码"
        android:inputType="textPassword"
        android:textAlignment="viewStart"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.49"
        android:textColorHint="@android:color/white" />

    <FrameLayout
        android:layout_width="214dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="@+id/et_password"
        app:layout_constraintRight_toRightOf="@+id/et_password"
        app:layout_constraintTop_toBottomOf="@+id/et_password">

        <wdwd.com.booklib.view.weight.CircleImageView
            android:id="@+id/btn_login"
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_gravity="center"
            android:background="?android:attr/textColorLink"
            android:elevation="7dp"
            android:text="登录"

            android:textColor="@android:color/white" />

        <com.wang.avi.AVLoadingIndicatorView
            android:id="@+id/av_loading_view"
            style="@style/AVLoadingIndicatorView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:indicatorName="BallClipRotate" />

    </FrameLayout>


    <TextView
        android:id="@+id/tv_register"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:text="注册"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_forget_password" />

    <TextView
        android:id="@+id/tv_forget_password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:text="忘记密码"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <wdwd.com.booklib.view.weight.CircularRevealView
        android:id="@+id/scale_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:transitionName="login"
        android:background="@android:color/transparent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"

         />

</android.support.constraint.ConstraintLayout>

在a页面点击时，取得点击的坐标

    private Point getLocationInView(View src, View target) {
        final int[] l0 = new int[2];
        src.getLocationOnScreen(l0);

        final int[] l1 = new int[2];
        target.getLocationOnScreen(l1);

        l1[0] = l1[0] - l0[0] + target.getWidth() / 2;
        l1[1] = l1[1] - l0[1] + target.getHeight() / 2;

        return new Point(l1[0], l1[1]);
    }

   Intent intent = new Intent(LoginActivity.this,MainActivity.class);
                        intent.putExtra("x",point.x);
                        intent.putExtra("y",point.y);
                        intent.putExtra("height",btnLogin.getHeight());

b页面布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/ll_content"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v4.view.ViewPager
            android:id="@+id/fl_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:alpha="0"
            android:visibility="visible"
            ></android.support.v4.view.ViewPager>

        <it.sephiroth.android.library.bottomnavigation.BottomNavigation
            android:id="@+id/bottomNavigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:visibility="gone"
            app:bbn_entries="@menu/tab_menu"
            app:layout_behavior="@string/bbn_phone_view_behavior">

        </it.sephiroth.android.library.bottomnavigation.BottomNavigation>

        <wdwd.com.booklib.view.weight.CircularRevealView
            android:id="@+id/circularView"
            android:transitionName="login"
            android:layout_centerInParent="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorAccent"
            />
    </RelativeLayout>
</LinearLayout>

进入b页面，开始波浪动画

  private void setupEnterAnimation() {
        circularView.post(new Runnable() {
            @Override
            public void run() {
                createRevealAnimator(false).start();
            }
        });

    }

private AnimatorSet createRevealAnimator(boolean reversed) {
        int x = getIntent().getIntExtra("x", 0);
        int y = getIntent().getIntExtra("y", 0);
        int height = getIntent().getIntExtra("height", 0);
        float hypot = (float) Math.hypot(circularView.getHeight(), circularView.getWidth()) * 2;
        float startRadius = reversed ? hypot : height;
        float endRadius = reversed ? height : hypot;

        AnimatorSet animatorSet = new AnimatorSet();
        Animator animator = ViewAnimationUtils.createCircularReveal(
                circularView, x, y,
                startRadius,
                endRadius);
        animator.setDuration(2600);

        Animator animator1 = ObjectAnimator.ofFloat(flContent, View.ALPHA, 0, 1);
        Animator animator2 = ObjectAnimator.ofFloat(circularView, View.ALPHA, 1, 0);
        animator1.setDuration(50);
        animator1.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                llContent.setBackgroundResource(android.R.color.white);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animator2.setDuration(1800);
        animator1.setStartDelay(450);
        animator2.setStartDelay(600);

        animatorSet.setInterpolator(new AccelerateDecelerateInterpolator());
        animatorSet.playTogether(animator, animator1, animator2);
        animatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                bottomNavigation.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        return animatorSet;
    }

效果如下，跟原始效果相差不大了， 其他的可以自己调节参数

login.gif