android 登录注册动画,Android开发（14）——动画实战：炫酷登录

本节内容

1.第三方库实现虚化

2.添加输入框和按钮

3.按钮状态

4.键盘隐藏

5.监听焦点改变的事件

6.手臂旋转动画

7.手掌和手臂动画

Demo简介

1.做一个炫酷登录的界面。

image.png

当我们输入密码的时候，猫头鹰会捂住眼睛。点击其他地方后，它的手臂又会张开。

QQ图片20210329154151.png

登录按钮只有当用户名和密码都输入了之后，才会变成蓝色，否则就是灰色。

QQ图片20210329154304.png

一、第三方库实现虚化

1.首先在gradle中添加一个依赖库，然后同步一下。

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

2.在code中添加一个虚化框

android:id="@+id/blurLayout"

android:layout_width="0dp"

android:layout_height="270dp"

android:layout_marginEnd="20dp"

app:blk_blurRadius="20"

app:blk_cornerRadius="10dp"

app:blk_fps="1"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/mHead">

app:blk_blurRadius="20"，表示虚化半径为20.

app:blk_cornerRadius="10dp"，表示虚化框的圆角半径。

app:blk_fps="1"，表示每秒帧数。

3.让它在onStart()方法里面就开始虚化。

override fun onStart() {

super.onStart()

//开始虚化

blurLayout.startBlur()

}

4.启动完毕之后再停止虚化

override fun onResume() {

super.onResume()

//暂停虚化

blurLayout.pauseBlur()

}

二、添加输入框和按钮

1.拖动两个EditText到虚化框里面，设置id为mName和mPassword。

2.给这两个控件添加一个边框，新建资源文件自己设计一个边框

android:shape="rectangle">

然后在code中把这个添加到EditText中去

android:background="@drawable/edit_shape"

3.在输入框左侧再添加一张图片，并设置一下内间距，再设置一下内部的文字与该图片的间距，还有文字间的间距。其他属性自行调整。

android:drawableStart="@drawable/iconfont_user"

android:paddingStart="10dp"

android:drawablePadding="10dp"

android:letterSpacing="0.1"

4.添加一个按钮，为了实现不同状态下显示不同颜色的效果，我们添加一个选择器

5.为了有更多的颜色可以选择，我们可以在colors.xml中多添加几个颜色

#6200EE

#3700B3

#03DAC5

#4496EF

#D6D7D7

#666

#FFF

6.找到button的code，将background设置为我们创建的资源文件

android:background="@drawable/loginbtn_state"

三、按钮状态

1.输入框设置内容改变的监听器

mName.addTextChangedListener(this)

mPassword.addTextChangedListener(this)

2.只需要实现输入完了的事件，只有输入框都不为空时才能点击

override fun afterTextChanged(s: Editable?) {

//当两个输入框都有内容才能点击

mLogin.isEnabled = mName.text.isNotEmpty() &&mPassword.text.isNotEmpty()

}

四、键盘隐藏(只有用户输入名字和密码的时候才弹出键盘，其他时候点击任何其他地方就需要把键盘隐藏起来)

1.当一个输入框被点击 这个输入框就获取到焦点focus。系统自动弹出一个键盘和拥有焦点的输入框进行绑定。

2.键盘是由一个类来管理的(InputMethodManager)，它是系统提供的服务service

3.实现onTouchEvent方法，如果点下去了，那么就隐藏键盘。

override fun onTouchEvent(event: MotionEvent?): Boolean {

if(event?.action==MotionEvent.ACTION_DOWN){

//隐藏键盘

hideKeyboard()

}

return super.onTouchEvent(event)

}

4.实现隐藏键盘的方法

private fun hideKeyboard(){

//取消焦点

if(mName.hasFocus()){

mName.clearFocus()

}

if(mPassword.hasFocus()){

mPassword.clearFocus()

}

//获取管理输入的Manager

val inputMethodManager=

getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager

inputMethodManager.hideSoftInputFromWindow(mPassword.windowToken,InputMethodManager.HIDE_NOT_ALWAYS)

}

五、监听焦点改变的事件

1.主类必须继承一个焦点的监听器

class MainActivity : AppCompatActivity(),TextWatcher,View.OnFocusChangeListener {

}

2.实现焦点改变的事件的方法

override fun onFocusChange(v: View?, hasFocus: Boolean) {

if(v == mPassword){

if(hasFocus){

coverEye()

}else{

openEye()

}

}

}

3.输入焦点改变的监听事件

mName.onFocusChangeListener = this

mPassword.onFocusChangeListener = this

4.在隐藏键盘的时候，要取消焦点，所以前面hideKeyboard()里有取消焦点的方法。

六、手臂旋转动画

1.一开始手掌是一半在上，一半在虚化框背后的。

image.png

2.接着当我们输入密码时，手掌就要向下，然后手臂从下面旋转上来。所以手臂一开始也隐藏在虚化框背后。

image.png

当放下手臂时，手掌又会重新露出来。

3.配置的时候差不多如下图所示，手臂完全在虚化框后面，手掌一半在里面，一半在外面。

image.png

4. 遮住眼睛：两只手掌同时向下移动 ->两只手同时旋转。打开眼睛：两只手同时旋转 ->两个手掌同时向上移动。

实现创建一次有两种方法：懒加载。定义一个变量 定义一个方法 在方法中判断这个变量是否有值。这里我们使用懒加载。

5.使用懒加载 定义动画的对象。手臂的动画不仅包括旋转，还包括移动，而且手臂的向上和向右移动是同时进行的。

左手臂向上旋转

val leftArmUpAnim:AnimatorSet by lazy {

val rotate= ObjectAnimator.ofFloat(mLeftArm,"rotation",140f).apply {

duration = 500

}

//手臂向右移动

val tx= PropertyValuesHolder.ofFloat("translationX",dpToPx(48f))

//手臂向上移动

val ty= PropertyValuesHolder.ofFloat("translationY",-dpToPx(40f))

val translate= ObjectAnimator.ofPropertyValuesHolder(mLeftArm,tx,ty)

AnimatorSet().apply {

playTogether(rotate,translate)

duration = 500

}

}

右手臂向上旋转

val leftArmDownAnim:AnimatorSet by lazy {

val rotate= ObjectAnimator.ofFloat(mLeftArm,"rotation",0f).apply {

duration = 500

}

//手臂向左移动

val tx= PropertyValuesHolder.ofFloat("translationX",0f)

//手臂向下移动

val ty= PropertyValuesHolder.ofFloat("translationY",0f)

val translate= ObjectAnimator.ofPropertyValuesHolder(mLeftArm,tx,ty)

AnimatorSet().apply {

playTogether(rotate,translate)

duration = 500

}

}

右手臂向下旋转

val rightArmDownAnim:AnimatorSet by lazy {

val rotate= ObjectAnimator.ofFloat(mRightArm,"rotation",0f).apply {

duration = 500

}

//手臂向右移动

val tx= PropertyValuesHolder.ofFloat("translationX",0f)

//手臂向下移动

val ty= PropertyValuesHolder.ofFloat("translationY",0f)

val translate= ObjectAnimator.ofPropertyValuesHolder(mRightArm,tx,ty)

AnimatorSet().apply {

playTogether(rotate,translate)

duration = 500

}

}

6.实现捂眼睛动画函数

private fun coverEye(){

AnimatorSet().apply {

play(leftHandDownAnim)

.with(rightHandDownAnim)

.before(leftArmUpAnim)

.before(rightArmUpAnim)

start()

}

}

7.实现打开眼睛的动画

private fun openEye(){

AnimatorSet().apply {

play(leftArmDownAnim)

.with(rightArmDownAnim)

.before(leftHandUpAnim)

.before(rightHandUpAnim)

start()

}

}

七、手掌和手臂动画

1.将dp值转化为像素

private fun dpToPx(dp:Float):Float{

val display= DisplayMetrics()

windowManager.defaultDisplay.getMetrics(display)

return display.density*dp

}

2.手掌移动动画

左手掌下移

val leftHandDownAnim:ObjectAnimator by lazy {

ObjectAnimator.ofFloat(mLeftHand,"translationY",mLeftHand.height*0.5f).apply {

duration = 500

}

}

左手掌上移

val leftHandUpAnim:ObjectAnimator by lazy {

ObjectAnimator.ofFloat(mLeftHand,"translationY",0f).apply {

duration = 500

}

}

右手掌下移

val rightHandDownAnim:ObjectAnimator by lazy {

ObjectAnimator.ofFloat(mRighrHand,"translationY",mRighrHand.height*0.5f).apply {

duration = 500

}

}

右手掌上移

val rightHandUpAnim:ObjectAnimator by lazy {

ObjectAnimator.ofFloat(mRighrHand,"translationY",0f).apply {

duration = 500

}

}

所有内容就差不多了，可以结合前面的文章食用。主要的重难点就是监听焦点，还有动画的分析过程以及实现过程。