一、项目

做一个带动画的登陆界面，如下图所示：

效果图片

当点击输入密码时，猫头鹰的翅膀向上翻转，遮住眼睛。

遮住眼睛图片

二、知识补充——属性动画

Android之前的补间动画机制其实还算是比较健全的，在android.view.animation包下面有好多的类可以供我们操作，来完成一系列的动画效果，比如说对View进行移动、缩放、旋转和淡入淡出，并且我们还可以借助AnimationSet来将这些动画效果组合起来使用，除此之外还可以通过配置Interpolator来控制动画的播放速度等。补间动画是只能够作用在View上的。也就是说，我们可以对一个Button、TextView、甚至是LinearLayout、或者其它任何继承自View的组件进行动画操作，但是如果我们想要对一个非View的对象进行动画操作，补间动画就帮不上忙了。举一个简单的例子，比如说我们有一个自定义的View，在这个View当中有一个Point对象用于管理坐标，然后在onDraw()方法当中就是根据这个Point对象的坐标值来进行绘制的。也就是说，如果我们可以对Point对象进行动画操作，那么整个自定义View的动画效果就有了。显然，补间动画是不具备这个功能的，这是它的第一个缺陷。还有补间动画只能够实现移动，缩放，旋转和淡入淡出这四种动画操作，不能对View的背景色进行改变。最后补间动画只改变了view的效果而已，而没有改变他的属性。如果要改变view的属性，就需要使用属性动画了

菜鸟教程

我们这个项目的动画就是属性动画，猫头鹰的翅膀旋转上去之后还需要旋转下来，转之前的坐标和转之后的坐标应该是不一样的，但如果使用补间动画旋转之前后旋转之后的坐标是一致的，这样不利于翅膀的复原。

三、具体实现

1，在XML文件添加背景图片，输入框，文本框，图像素材，按钮等，还有调控它们的位置，还可以在背景上添加虚化层，需要导入第三方库
在build.gradle中添加

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

并把 minSdkVersion 改成 21

未添加虚化层效果展示：

图片展示

其中输入框的形状在drawable文件里面配置

使用style抽离输入框共有属性

在drawable文件里面配置按钮的形状

2，这样就基本完成了素材的添加，接下来就需要为输入框添加内容和焦点改变事件，当有控件获得焦点就会自动弹出键盘。

    //监听内容改变，控制按钮的点击状态
    user.addTextChangedListener(this);
    password.addTextChangedListener(this);
    //监听EditText的焦点变化，判断是否需要捂住眼睛
    password.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            if(hasFocus == true){
                //捂住眼睛
                //测试代码
    //  Toast toast=  Toast.makeText(getApplicationContext(),"捂住眼睛",Toast.LENGTH_SHORT);
    //   toast.show();
                closeEye();
            }else{
        //打开眼睛
                open();
              }
          }
        });
    }

3，实现输入框内容改变事件回调，管理登录按钮状态

 @Override
  public void afterTextChanged(Editable s) {
    //判断这两个输入框是否有内容
    if(user.getText().toString().length() > 0&&
    password.getText().toString().length() > 0){
        //登录按钮可以点击
        button.setEnabled(true);
    }else{
         //登录按钮不可以点击
        button.setEnabled(false);
    }
}

4，监听touch事件，触摸屏幕，隐藏键盘，相应的输入框失去焦点

@Override
public boolean onTouchEvent(MotionEvent event) {
    if(event.getAction() == MotionEvent.ACTION_DOWN){
        //隐藏键盘
        //1，获取系统输入的管理器
       InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
        //2,隐藏软键盘
        inputMethodManager.hideSoftInputFromWindow(user.getWindowToken(),0);

        //3，取消焦点
        View focusView = getCurrentFocus();
        if(focusView != null) {
            focusView.clearFocus(); //取消焦点
        }

        //focusView.requestFocus();//请求焦点
        //简单方式
        //getCurrentFocus().clearFocus();
    }
    return true;
}

5，创建一个anim文件，在里面配置手掌向上和向下的动画

image.png

向上移动的文件和这个一致，只是移动的方向相反
6，给猫头鹰的两个翅膀添加旋转动画

  //捂眼睛
public void closeEye(){
    // 左边 旋转翅膀
    //创建一个旋转动画
    RotateAnimation rotateAnimation1 = new RotateAnimation(0,170,leftArm.getWidth(),0f);
    rotateAnimation1.setDuration(600);
    //旋转后保持状态
    rotateAnimation1.setFillAfter(true);
    leftArm.startAnimation(rotateAnimation1);

    //创建一个旋转动画
    RotateAnimation rotateAnimation2 = new RotateAnimation(0,-170,0f,0f);
    rotateAnimation2.setDuration(600);
    //旋转后保持状态
    rotateAnimation2.setFillAfter(true);
    rightArm.startAnimation(rotateAnimation2);

    TranslateAnimation translateAnimation = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_down);
    leftHand.startAnimation(translateAnimation);
    rightHand.startAnimation(translateAnimation);
}
public void open(){
    // 左边 旋转翅膀
    //创建一个旋转动画
    RotateAnimation rotateAnimation1 = new RotateAnimation(170,0,leftArm.getWidth(),0f);
    rotateAnimation1.setDuration(600);
    //旋转后保持状态
    rotateAnimation1.setFillAfter(true);
    leftArm.startAnimation(rotateAnimation1);

    //创建一个旋转动画
    RotateAnimation rotateAnimation2 = new RotateAnimation(-170,0,0f,0f);
    rotateAnimation2.setDuration(600);
    //旋转后保持状态
    rotateAnimation2.setFillAfter(true);
    rightArm.startAnimation(rotateAnimation2);

    TranslateAnimation translateAnimation = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_up);

    leftHand.startAnimation(translateAnimation);
    rightHand.startAnimation(translateAnimation);

}

效果展示：

展示

录制屏幕时当点击输入密码时录制的内容是黑屏，目前还没解决……
MainActivity完整代码

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.TranslateAnimation;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity implements TextWatcher {
private EditText user;
private EditText password;
private Button button;
private ImageView leftArm;
private ImageView rightArm;
private ImageView leftHand;
private ImageView rightHand;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //调用
    initView();
}
//初始化
public void initView(){

    user = findViewById(R.id.et_user);
    password = findViewById(R.id.et_password);
    button = findViewById(R.id.button_login);
    leftArm = findViewById(R.id.iv_leftArm);
    rightArm = findViewById(R.id.iv_rightArm);
    leftHand = findViewById(R.id.leftHand);
    rightHand = findViewById(R.id.rightHand);

    //监听内容改变，控制按钮的点击状态
    user.addTextChangedListener(this);
    password.addTextChangedListener(this);
    //监听EditText的焦点变化，判断是否需要捂住眼睛
    password.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            if(hasFocus == true){
                //捂住眼睛
                //测试代码
//  Toast toast=  Toast.makeText(getApplicationContext(),"捂住眼睛",Toast.LENGTH_SHORT);
//     toast.show();
                closeEye();
            }else{
                open();
            }
        }
    });
}
/**
 * 当有控件获得焦点focus，自动弹出键盘
 * 1，点击软键盘的enter键 自动收回键盘
 * 2，代码控制 InputMentionManager
 * showSoftInput:显示键盘
 * @param event
 * @return
 */
@Override
public boolean onTouchEvent(MotionEvent event) {
    if(event.getAction() == MotionEvent.ACTION_DOWN){
        //隐藏键盘
        //1，获取系统输入的管理器
       InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
        //2,隐藏软键盘
        inputMethodManager.hideSoftInputFromWindow(user.getWindowToken(),0);

        //3，取消焦点
        View focusView = getCurrentFocus();
        if(focusView != null) {
            focusView.clearFocus(); //取消焦点
        }

        //focusView.requestFocus();//请求焦点
        //简单方式
        //getCurrentFocus().clearFocus();

    }
    return true;
}


@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {

}

@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {

}

@Override
public void afterTextChanged(Editable s) {
    //判断这两个输入框是否有内容
    if(user.getText().toString().length() > 0&&
    password.getText().toString().length() > 0){
        //按钮可以点击
        button.setEnabled(true);
    }else{
        button.setEnabled(false);
    }
}
//捂眼睛
public void closeEye(){
    // 左边 旋转翅膀
    //创建一个旋转动画
    RotateAnimation rotateAnimation1 = new RotateAnimation(0,170,leftArm.getWidth(),0f);
    rotateAnimation1.setDuration(600);
    //旋转后保持状态
    rotateAnimation1.setFillAfter(true);
    leftArm.startAnimation(rotateAnimation1);

    //创建一个旋转动画
    RotateAnimation rotateAnimation2 = new RotateAnimation(0,-170,0f,0f);
    rotateAnimation2.setDuration(600);
    //旋转后保持状态
    rotateAnimation2.setFillAfter(true);
    rightArm.startAnimation(rotateAnimation2);

    TranslateAnimation translateAnimation = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_down);
    leftHand.startAnimation(translateAnimation);
    rightHand.startAnimation(translateAnimation);



}
public void open(){
    // 左边 旋转翅膀
    //创建一个旋转动画
    RotateAnimation rotateAnimation1 = new RotateAnimation(170,0,leftArm.getWidth(),0f);
    rotateAnimation1.setDuration(600);
    //旋转后保持状态
    rotateAnimation1.setFillAfter(true);
    leftArm.startAnimation(rotateAnimation1);

    //创建一个旋转动画
    RotateAnimation rotateAnimation2 = new RotateAnimation(-170,0,0f,0f);
    rotateAnimation2.setDuration(600);
    //旋转后保持状态
    rotateAnimation2.setFillAfter(true);
    rightArm.startAnimation(rotateAnimation2);

    TranslateAnimation translateAnimation = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.hand_up);

    leftHand.startAnimation(translateAnimation);
    rightHand.startAnimation(translateAnimation);

    }
}

四、写在最后

学习的主要内容主要是属性动画的使用，所以密码设置这一块并没有做，因为之前写过用用户偏好保存密码所以这里就没有具体写。还有手机屏幕录制时点击输入密码后录制的一段是黑屏，百度之后发现这是应用的自身策略。密码界面调起安全输入法的时候，系统自带的录屏功能、第三方的录屏软件无法录制屏幕，截取结果是黑屏。这是由于安全输入法在此做了访问控制，避免你的密码被泄露，让你的手机更加安全。

带有动画的登录界面制作

一、项目

二、知识补充——属性动画

三、具体实现

四、写在最后

你可能感兴趣的:(带有动画的登录界面制作)