一個(gè)登錄的特效動(dòng)畫

前段事件突然心血來潮，在國外設(shè)計(jì)找了個(gè)比較酷炫的動(dòng)畫自己來練練手，效果如下，初看之下像是一個(gè)簡單的共享動(dòng)畫，但是仔細(xì)一看，明顯是點(diǎn)擊登錄后先擴(kuò)散一個(gè)波紋，然后無縫跳轉(zhuǎn)到第二個(gè)頁面繼續(xù)擴(kuò)散

short.gif
解決過程

當(dāng)時(shí)卡在使用共享元素動(dòng)畫，但是共享元素動(dòng)畫不能實(shí)現(xiàn)在登錄頁面先擴(kuò)散然后再跳轉(zhuǎn)到第二個(gè)頁面，剛好翻到一個(gè)人寫的波紋動(dòng)畫的使用，思路是，點(diǎn)擊a頁面任意一個(gè)區(qū)域，將點(diǎn)擊的坐標(biāo)傳遞給b頁面，然后在b頁面以傳遞過來的x y為中心坐標(biāo)軸開啟一個(gè)波紋動(dòng)畫。

首先先將b 頁面設(shè)置為背景透明

    <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="請(qǐng)輸入用戶名"
        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="請(qǐng)輸入密碼"
        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="注冊(cè)"
        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頁面點(diǎn)擊時(shí)，取得點(diǎn)擊的坐標(biāo)


    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>

進(jìn)入b頁面，開始波浪動(dòng)畫

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

效果如下，跟原始效果相差不大了， 其他的可以自己調(diào)節(jié)參數(shù)


login.gif
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,836評(píng)論 25贊 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,116評(píng)論 4贊 61
  • 窗外陽光慵懶的散在窗臺(tái)。今天陽光很好，我坐在窗前，擺弄前幾天剛花四百大洋從商場買回來才穿一天的毛衣上起的各種毛，心...
    碑格姑娘閱讀 469評(píng)論 0贊 0
  • 接上一期《如何制定年度計(jì)劃（一）》 二、制定年度計(jì)劃的方法 （五）確定年度目標(biāo) 有人問，為了精細(xì)管理，是否要寫出四...
    做自己的CEO閱讀 2,125評(píng)論 0贊 19
  • 孔乙己是站著喝啤酒而穿著耐克鞋的的唯一的人。 他身材也不算高大，臉色也不是有生機(jī)，雖然年齡不算很大，卻長得滿臉褶子...
    天宮過客寫小說閱讀 501評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容