Android属性动画实现炫酷的登录界面

我们聊聊我们常写的登录界面，这个界面我相信很多人都写过，而且也没什么难度，但是如果要实现比较不一般的效果，那就要花点心思了，先看看项目的效果吧：

我一直都不知道怎么在编辑框连设置图片大小，所以这个图不怎么样适配编辑框了，大家先凑合着看看。

我先讲讲思路，当我们输入完账号跟密码之后，点击登录，那这个输入框就慢慢的消失，在消失后，紧接着就出现这个进度的界面。

思路有了，那我们就开始编码了：
新建一个项目，然后系统生成了一个mainactivity.java文件和activity_main.xml文件。先在activity_main里面操作：
代码如下：

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#7adfb8"
  tools:context=".mainactivity" >

  <include
    android:id="@+id/main_title"
    layout="@layout/title_layout" />

  <linearlayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/main_title"
    android:orientation="vertical" >

    <imageview
      android:layout_width="55dip"
      android:layout_height="55dip"
      android:layout_gravity="center_horizontal"
      android:src="@drawable/project_detail_cir" />

    <textview
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_margintop="5dip"
      android:gravity="center"
      android:text="firefly forest"
      android:textcolor="#ffffff"
      android:textsize="24sp" />

    <textview
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:text="show your ideas"
      android:textcolor="#ffffff"
      android:textsize="16sp" />
  </linearlayout>

  <relativelayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerinparent="true" >

    <include
      android:id="@+id/input_layout"
      android:layout_width="match_parent"
      android:layout_height="130dip"
      layout="@layout/input_layout" />

    <include
      android:id="@+id/layout_progress"
      android:layout_width="match_parent"
      android:layout_height="130dip"
      layout="@layout/layout_progress"
      android:visibility="gone" />

    <textview
      android:id="@+id/main_btn_login"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_below="@+id/input_layout"
      android:layout_centerinparent="true"
      android:layout_margintop="15dip"
      android:background="@drawable/text_bg"
      android:gravity="center"
      android:paddingbottom="2dip"
      android:paddingleft="15dip"
      android:paddingright="15dip"
      android:paddingtop="2dip"
      android:text="login"
      android:textcolor="#ffffff"
      android:textsize="20sp" />
  </relativelayout>

</relativelayout>

这里我引用外面的三个布局，再加上一个textview写的按钮，标题所引用的文件:
title_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="50dip"
  android:gravity="center_vertical"
  android:padding="10dip" >

  <imageview
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/back" />

  <textview 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textcolor="#ffffff"
    android:layout_alignparentright="true"
    android:layout_centervertical="true"
    android:textsize="20sp"
    android:text="sign up"
    />
</relativelayout>

输入框引用的文件：input_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical" >

  <linearlayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="20dip"
    android:background="@drawable/radius_drawable_bg"
    android:orientation="vertical"
    android:padding="10dip" >

    <linearlayout
      android:id="@+id/input_layout_name"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center_vertical"
      android:orientation="horizontal" >

      <imageview
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/paw_code" />

      <edittext
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginleft="10dip"
        android:background="#00000000"
        android:hint="账号/用户名/邮箱"
        android:padding="5dip"
        android:textsize="16sp" />
    </linearlayout>

    <view
      android:layout_width="match_parent"
      android:layout_height="1px"
      android:layout_marginbottom="5dip"
      android:layout_margintop="5dip"
      android:background="#eeeeee" />

    <linearlayout
      android:id="@+id/input_layout_psw"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center_vertical"
      android:orientation="horizontal" >

      <imageview
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/paw_left" />

      <edittext
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginleft="10dip"
        android:background="#00000000"
        android:hint="密码"
        android:inputtype="textpassword"
        android:padding="5dip"
        android:textsize="16sp" />
    </linearlayout>
  </linearlayout>
</linearlayout>

还有一个加载进度的界面：layout_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical" >

  <linearlayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="20dip"
    android:background="@drawable/rotate_layout_bg"
    android:orientation="vertical"
    android:padding="10dip" >

    <progressbar
      android:id="@+id/progressbar2"
      android:layout_width="wrap_content"
       android:layout_margin="10dip"
      android:layout_height="wrap_content" />
  </linearlayout>

</linearlayout>

当然，我这里还用到了drawable文件：radius_drawable_bg.xml，这个文件是输入框的圆角矩形背景：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <corners android:radius="5dip"/>
  <solid android:color="#ffffff"/>

</shape>

还有进度的白色圆形背景：rotate_layout_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval" >

  <corners android:radius="60dip" />

  <solid android:color="#ffffff" />

</shape>

除此之外，还有一个按钮的描边背景text_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  >

  <corners android:radius="50dip"/>

  <stroke
    android:width="1dip"
    android:color="#ffffff" />

</shape>

至此，我们的前期界面的编写就完成了，不难，很容易理解，下面开始处理mainactivity.java文件，先看看这里的初始化操作;

  private textview mbtnlogin;

  private view progress;

  private view minputlayout;

  private float mwidth, mheight;

  private linearlayout mname, mpsw;

  private void initview() {
    mbtnlogin = (textview) findviewbyid(r.id.main_btn_login);
    progress = findviewbyid(r.id.layout_progress);
    minputlayout = findviewbyid(r.id.input_layout);
    mname = (linearlayout) findviewbyid(r.id.input_layout_name);
    mpsw = (linearlayout) findviewbyid(r.id.input_layout_psw);

    mbtnlogin.setonclicklistener(this);
  }

这里主要就是加载控件了，不需要多解释，重点看看动画的处理：

/**
   * 输入框的动画效果
   * 
   * @param view
   *      控件
   * @param w
   *      宽
   * @param h
   *      高
   */
  private void inputanimator(final view view, float w, float h) {

    animatorset set = new animatorset();

    valueanimator animator = valueanimator.offloat(0, w);
    animator.addupdatelistener(new animatorupdatelistener() {

      @override
      public void onanimationupdate(valueanimator animation) {
        float value = (float) animation.getanimatedvalue();
        viewgroup.marginlayoutparams params = (marginlayoutparams) view
            .getlayoutparams();
        params.leftmargin = (int) value;
        params.rightmargin = (int) value;
        view.setlayoutparams(params);
      }
    });

    objectanimator animator2 = objectanimator.offloat(minputlayout,
        "scalex", 1f, 0.5f);
    set.setduration(1000);
    set.setinterpolator(new acceleratedecelerateinterpolator());
    set.playtogether(animator, animator2);
    set.start();
    set.addlistener(new animatorlistener() {

      @override
      public void onanimationstart(animator animation) {

      }

      @override
      public void onanimationrepeat(animator animation) {

      }

      @override
      public void onanimationend(animator animation) {
        /**
         * 动画结束后，先显示加载的动画，然后再隐藏输入框
         */
        progress.setvisibility(view.visible);
        progressanimator(progress);
        minputlayout.setvisibility(view.invisible);

      }

      @override
      public void onanimationcancel(animator animation) {

      }
    });

  }

这里用到的知识点还是挺多，例如：属性动画容器、插值器、属性动画的监听、动态的设置控件的相对位置;一开始可能不容易理解，没关系，以后我会在博客里都讲到。我就说一下这里的思路;
当我们开启这个动画的时候，先是设置相对位置，同时处理在x轴的缩放，然后我们监听到的生命周期，并且在动画结束的时候，隐藏当前布局，开启另外一个布局的显示动画，看到另外一个动画：

/**
   * 出现进度动画
   * 
   * @param view
   */
  private void progressanimator(final view view) {
    propertyvaluesholder animator = propertyvaluesholder.offloat("scalex",
        0.5f, 1f);
    propertyvaluesholder animator2 = propertyvaluesholder.offloat("scaley",
        0.5f, 1f);
    objectanimator animator3 = objectanimator.ofpropertyvaluesholder(view,
        animator, animator2);
    animator3.setduration(1000);
    animator3.setinterpolator(new jellyinterpolator());
    animator3.start();

  }

其实这里的套路是一样的但是不同的是，这里我用到了自己的插值器;
jellyinterpolator.java:

public class jellyinterpolator extends linearinterpolator {
  private float factor;

  public jellyinterpolator() {
    this.factor = 0.15f;
  }

  @override
  public float getinterpolation(float input) {
    return (float) (math.pow(2, -10 * input)
        * math.sin((input - factor / 4) * (2 * math.pi) / factor) + 1);
  }
}

让动画更有动感。下面我贴上mainactivity的全部代码;

public class mainactivity extends activity implements onclicklistener {

  private textview mbtnlogin;

  private view progress;

  private view minputlayout;

  private float mwidth, mheight;

  private linearlayout mname, mpsw;

  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    requestwindowfeature(window.feature_no_title);
    setcontentview(r.layout.activity_main);

    initview();
  }

  private void initview() {
    mbtnlogin = (textview) findviewbyid(r.id.main_btn_login);
    progress = findviewbyid(r.id.layout_progress);
    minputlayout = findviewbyid(r.id.input_layout);
    mname = (linearlayout) findviewbyid(r.id.input_layout_name);
    mpsw = (linearlayout) findviewbyid(r.id.input_layout_psw);

    mbtnlogin.setonclicklistener(this);
  }

  @override
  public void onclick(view v) {

    // 计算出控件的高与宽
    mwidth = mbtnlogin.getmeasuredwidth();
    mheight = mbtnlogin.getmeasuredheight();
    // 隐藏输入框
    mname.setvisibility(view.invisible);
    mpsw.setvisibility(view.invisible);

    inputanimator(minputlayout, mwidth, mheight);

  }

  /**
   * 输入框的动画效果
   * 
   * @param view
   *      控件
   * @param w
   *      宽
   * @param h
   *      高
   */
  private void inputanimator(final view view, float w, float h) {

    animatorset set = new animatorset();

    valueanimator animator = valueanimator.offloat(0, w);
    animator.addupdatelistener(new animatorupdatelistener() {

      @override
      public void onanimationupdate(valueanimator animation) {
        float value = (float) animation.getanimatedvalue();
        viewgroup.marginlayoutparams params = (marginlayoutparams) view
            .getlayoutparams();
        params.leftmargin = (int) value;
        params.rightmargin = (int) value;
        view.setlayoutparams(params);
      }
    });

    objectanimator animator2 = objectanimator.offloat(minputlayout,
        "scalex", 1f, 0.5f);
    set.setduration(1000);
    set.setinterpolator(new acceleratedecelerateinterpolator());
    set.playtogether(animator, animator2);
    set.start();
    set.addlistener(new animatorlistener() {

      @override
      public void onanimationstart(animator animation) {

      }

      @override
      public void onanimationrepeat(animator animation) {

      }

      @override
      public void onanimationend(animator animation) {
        /**
         * 动画结束后，先显示加载的动画，然后再隐藏输入框
         */
        progress.setvisibility(view.visible);
        progressanimator(progress);
        minputlayout.setvisibility(view.invisible);

      }

      @override
      public void onanimationcancel(animator animation) {

      }
    });

  }

  /**
   * 出现进度动画
   * 
   * @param view
   */
  private void progressanimator(final view view) {
    propertyvaluesholder animator = propertyvaluesholder.offloat("scalex",
        0.5f, 1f);
    propertyvaluesholder animator2 = propertyvaluesholder.offloat("scaley",
        0.5f, 1f);
    objectanimator animator3 = objectanimator.ofpropertyvaluesholder(view,
        animator, animator2);
    animator3.setduration(1000);
    animator3.setinterpolator(new jellyinterpolator());
    animator3.start();

  }
}

至此，所有的操作已经完成了，运行项目后点击登录按钮，就可以看到效果了。

源码下载：http://xiazai.jb51.net/201607/yuanma/loginproject(jb51.net).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。