android 登陆界面动画,【Android开发】动画登录页面

心得感悟

这个Demo对我还是比较有难度的，花了好久去理解。因为动画比较有趣，所以想自己改改样式，也有助于自己的理解。这是进入Android开发学习第六天了，每天的学习都是懂了很多，却还有很多不懂，还是那句加油吧！

内容简概

一、需求分析

二、去除标题栏和虚化图片

三、虚化页面背景和输入框背景

四、新建xml文件配置输入框

五、新建xml文件管理按钮的不同状态

六、实现捂眼睛动画

七、图片素材及源代码

八、最终效果图

具体内容

一、需求分析

1. 实现效果预览

之前我们也做过登录页面，但这次做的和上次稍有不同，我们先来分析一下关键处，建议先滑到最后看一下动态效果图。

①页面背景和输入框背景都是透明色

②点击输入框，系统自动弹出键盘；点击输入框以外的地方，键盘收回

③只有输入框中的用户名和密码均不为空时，登录按钮可以点击，否则为无效状态

④点击密码输入框，有一个捂眼睛的动画；点击输入框以外的地方，猫头鹰不捂眼睛

二、去除标题栏和虚化图片

1. 去除标题栏

每次做项目都要去除标题栏，因为它不仅占位置还不好看，这里再温习一下如何去除标题栏。

找到styles.xml文件

讲文件中的DarkActionBar改为NoActionBar

2. 虚化图片

在Android studio中可以通过编写代码实现，但是这个方法太繁琐，所以我们可以通过引用第三方库来实现。进入GitHub网站，搜索blurkit即为这里用的库，你也可以搜索Virtual(虚化)使用其他库。再按下图顺序将其插入我们的项目中。

③添加一行代码

implementation 'io.alterac.blurkit:blurkit:1.1.0'

三、虚化页面背景和输入框背景

1. 虚化页面背景

这里我们只需要虚化第一帧即可。虚化程度最大为25

android:layout_width="match_parent"

android:layout_height="match_parent"

app:blk_fps="0" # 虚化哪一帧

app:blk_blurRadius="25"/> # 虚化程度

2. 虚化输入框

android:id="@+id/bg"

android:layout_width="match_parent"

android:layout_height="300dp"

android:background="@drawable/input_bg_shape"

android:layout_centerInParent="true"

android:layout_marginLeft="20dp"

android:layout_marginRight="20dp"

app:blk_fps="0"

app:blk_blurRadius="20"/>

四、新建xml文件配置输入框

用户名输入框和密码输入框的边框、背景、字体等都相同，若直接写在activity_main.xml中，不便阅读检查，所以当有大量重复性的代码时，可以考虑用一个文件专门管理它。

按箭头顺序创建一个xml文件，命名如白色方框中的文件

将二者相同的代码写进去

match_parent

50dp

@drawable/editview_shape

20dp

7dp

7dp

20sp

1

acitivity.main.xml中使用如下：

android:id="@+id/et_user"

style="@style/EditTextStyle"

android:inputType="text"

android:hint="请输入用户名"/>

五、新建xml文件管理按钮的不同状态

按钮有可点击状态和无法点击状态，在这个文件中设置不同状态下按钮的样式。

与上面相似创建文件，命名如白色方框所示。

有些属性并不存在，需要自己手打出来，注意不要打错。

六、实现捂眼睛动画

观察捂眼睛的翅膀，可以发现它实际上是在做旋转动作，上一篇文章中有讲解基本的动画如旋转，对动画不熟悉的朋友可以去看一看。

下面给出主要代码，添加监听、放置翅膀图片等代码就不在此多说。

public void close(){

//左边

RotateAnimation lAnim = new RotateAnimation(0,

170,

leftArm.getWidth(),

0f);

lAnim.setDuration(500);

lAnim.setFillAfter(true);

leftArm.startAnimation(lAnim);

RotateAnimation rAnim = new RotateAnimation(0,

-170,

0f,

0f);

rAnim.setDuration(500);

rAnim.setFillAfter(true);

rightArm.startAnimation(rAnim);

TranslateAnimation down = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_down_anim);

leftHand.startAnimation(down);

rightHand.startAnimation(down);

}

在Project中找到anim，在里面创建两个xml文件

七、图片素材及源代码

文件如下

综合考虑后，决定不提供源码和素材了

八、最终效果图

输入密码时录屏软件不可用，会黑屏直到密码输完。其他要点都能在动图中展现。

你也可以尝试自己改改配色高度等，改代码也有助于自己理解这个Demo。