Android仿FaceBook登录动画效果

浅浅的花香味﹌ 2022-12-18 08:58 165阅读 0赞

先看效果图  
![在这里插入图片描述][20201026114227601.gif_pic_center]

效果图录制出来有黑屏帧，勉强看哈，效果就是点击输入框后，顶部缩小，按返回按钮时再还原

布局文件

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="true"
        android:fitsSystemWindows="true"
        android:orientation="vertical">
    
        <RelativeLayout
            android:id="@+id/topPanel"
            android:layout_width="match_parent"
            android:layout_height="200dp">
    
            <View
                android:id="@+id/back_line"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:alpha="0"
                android:background="#d4ab7f" />
    
            <ImageView
                android:id="@+id/back_bg"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_centerInParent="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/login_top_back" />
    
            <ImageView
                android:id="@+id/logo_bg"
                android:layout_width="120dp"
                android:layout_height="120dp"
                android:layout_centerInParent="true"
                android:src="@mipmap/default_headimg" />
        </RelativeLayout>
    
        <LinearLayout
            android:id="@+id/body"
            android:layout_width="match_parent"
            android:layout_height="210dp"
            android:layout_below="@+id/logo"
            android:layout_marginTop="30dp"
            android:orientation="vertical"
            android:paddingLeft="10dp"
            android:paddingRight="10dp">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="55dp"
                android:focusable="true"
                android:focusableInTouchMode="true"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:paddingLeft="13dp">
    
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
    
                <EditText
                    android:id="@+id/et_mobile"
                    android:layout_width="0dp"
                    android:layout_height="55dp"
                    android:layout_weight="1"
                    android:background="@null"
                    android:hint="请输入手机号码"
                    android:inputType="textVisiblePassword"
                    android:maxLength="11"
                    android:singleLine="true"
                    android:text=""
                    android:textColor="#999999"
                    android:textColorHint="#999999"
                    android:textSize="14dp" />
    
            </LinearLayout>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="#eeeeee" />
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="55dp"
                android:focusable="true"
                android:focusableInTouchMode="true"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:paddingLeft="13dp">
    
                <EditText
                    android:id="@+id/et_password"
                    android:layout_width="0dp"
                    android:layout_height="55dp"
                    android:layout_weight="1"
                    android:background="@null"
                    android:hint="请输入密码"
                    android:inputType="textPassword"
                    android:maxLength="30"
                    android:singleLine="true"
                    android:text=""
                    android:textColor="#999999"
                    android:textColorHint="#999999"
                    android:textSize="14dp" />
            </LinearLayout>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="#eeeeee" />
    
            <Button
                android:id="@+id/btn_login"
                android:layout_width="match_parent"
                android:layout_height="45dp"
                android:layout_marginTop="21dp"
                android:background="#d4ab7f"
                android:text="登录"
                android:textColor="#ffffff"
                android:textSize="18dp" />
        </LinearLayout>
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal">
    
            <LinearLayout
                android:id="@+id/service"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:gravity="center"
                android:orientation="horizontal"
                android:padding="10dp">
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:text="联系客服"
                    android:textColor="#b0b8b2"
                    android:textSize="14dp" />
    
                <View
                    android:layout_width="1dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:background="#eeeeee" />
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:text="关于我们"
                    android:textColor="#b0b8b2"
                    android:textSize="14dp" />
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>

看代码 这里是布局，注意图片的scaleType

android:scaleType="centerCrop"

初始化的数据

private void initView() {
        
            //logo图
            logo = findViewById(R.id.logo_bg);
            //背景图渐变消失后的颜色
            bgLine = findViewById(R.id.back_line);
            //背景图
            backBg = findViewById(R.id.back_bg);
            //包裹上面三个view的父View
            topView = findViewById(R.id.topPanel);
            et_mobile = findViewById(R.id.et_mobile);
            et_password = findViewById(R.id.et_password);
        }

输入框事件监听，获取焦点是时调用缩小动画

private void initListener() {
        
            // EditText焦点的监听
            et_mobile.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        
    
                @RequiresApi(api = Build.VERSION_CODES.KITKAT)
                @Override
                public void onFocusChange(View v, boolean hasFocus) {
        
                    // 当hasFocus = true 是获取焦点
                    if (hasFocus && !isSuoxiao) {
        
                        suoxiao();
                        isSuoxiao = true;
                    }
                }
            });
    
            et_password.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        
    
                @RequiresApi(api = Build.VERSION_CODES.KITKAT)
                @Override
                public void onFocusChange(View v, boolean hasFocus) {
        
                    // 当hasFocus = true 是获取焦点
                    if (hasFocus && !isSuoxiao) {
        
                        suoxiao();
                        isSuoxiao = true;
                    }
                }
            });
        }

返回时还原动画

@RequiresApi(api = Build.VERSION_CODES.KITKAT)
        @Override
        public boolean onKeyDown(int keyCode, KeyEvent event) {
        
            if (keyCode == KeyEvent.KEYCODE_BACK) {
        
                if (isSuoxiao) {
        
                    kuoda();
                    isSuoxiao = false;
                }
            }
            return false;
        }

再来看看实际调用的动画

//缩小动画
        @RequiresApi(api = Build.VERSION_CODES.KITKAT)
        public void suoxiao() {
        
            final int height = topView.getHeight();
            topView.animate().setDuration(300).setUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
        
                    //0.5代表要缩小多少倍高度
                    int i = (int) (height * 0.5 * (float) animation.getAnimatedValue());
                    topView.getLayoutParams().height = height - i;
                    topView.requestLayout();
                }
            }).setInterpolator(new AccelerateDecelerateInterpolator()).start();
            logo.animate().scaleX(0.5f).scaleY(0.5f).setInterpolator(new AccelerateDecelerateInterpolator()).start();
            backBg.animate().setDuration(300).alpha(0).setInterpolator(new AccelerateDecelerateInterpolator()).start();
            bgLine.animate().setDuration(300).alpha(1).setInterpolator(new AccelerateDecelerateInterpolator()).start();
        }

//扩大动画
        @RequiresApi(api = Build.VERSION_CODES.KITKAT)
        public void kuoda() {
        
            final int height = topView.getHeight();
            topView.animate().setDuration(300).setUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
        
                    int i = (int) (height * (float) animation.getAnimatedValue());
                    topView.getLayoutParams().height = height + i;
                    topView.requestLayout();
                }
            }).setInterpolator(new AccelerateDecelerateInterpolator()).start();
            logo.animate().scaleX(1f).scaleY(1.0f).setInterpolator(new AccelerateDecelerateInterpolator()).start();
            backBg.animate().setDuration(300).alpha(1).setInterpolator(new AccelerateDecelerateInterpolator()).start();
            bgLine.animate().setDuration(300).alpha(0).setInterpolator(new AccelerateDecelerateInterpolator()).start();
        }

以上使用的都是View自带的动画ViewPropertyAnimator

完整代码请参考Demo

需要源码的童鞋底部公众号回复：“登录动画” 即可获取哦.

--------------------

小编整理了一份Android电子书籍，需要的童鞋关注底部公众号(longxuanzhigu)回复：“e\_books” 即可获取哦！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd4dWFuemhpZ3U_size_16_color_FFFFFF_t_70_pic_center]

以下是公众号(longxuanzhigu)，之后发布的文章会同步到该公众号，方便交流学习Android知识，欢迎关注：

![在这里插入图片描述][20201026114721352.png_pic_center]

[20201026114227601.gif_pic_center]: /images/20221122/3a58fba1dd0645ae9c782e7797ebd5fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd4dWFuemhpZ3U_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/7eb936a60e6d40e5973539bfc9dc591f.png
[20201026114721352.png_pic_center]: /images/20221122/93ee5f8ca1e940c19e76666ee9ee0adb.png