Android仿FaceBook登录动画效果

作者: 龙旋之谷 | 来源:发表于2020-10-26 11:52 被阅读0次

先看效果图

1603675346871.gif

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

布局文件


<?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

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

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

[图片上传失败...(image-bfac0e-1603684268674)]

网友评论

本文标题：Android仿FaceBook登录动画效果

本文链接：https://www.haomeiwen.com/subject/rldamktx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

Android仿FaceBook登录动画效果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android录集（公众号：龙旋）

android UI系列专题