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

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

时间： 2024-09-20 10:55:32

Android属性动画实现炫酷的登录界面的相关文章

win7如何设置炫酷开机登录界面提示语

  1.打开运行,在运行对话框中输入secpol.msc,回车; 2.在打开的本地安全策略窗口中,依次展开"本地策略--安全选项",在右侧找到并双击打开"交互式登录:试图登录的用户的消息文本"项; 3.接着在打开的属性界面中,输入你希望登录前出现的文本消息,然后点击确定按钮保存; 4.完成上面的步骤之后,还要设置消息标题,双击"交互式登录: 试图登录的用户的消息标题",然后输入标题内容(比如:木木虎的话),单击"确定"保存就可

Android属性动画完全解析(上)，初识属性动画的基本用法

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/43536355 在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系统在一开始的时候就给我们提供了两种实现动画效果的方式,逐帧动画(frame-by-frame animation)和补间动画(tweened animation).逐帧动画的工作原理很简单,其实就是将一个完整的动画拆分成一张张单独的图片,然后再将它们连贯起来进行播放,类似于动画片的工作原理.补间动画

Android技术进阶的要素之Android属性动画

由于Android3.0之前就有了许多的动画框架,其中之一就是Animation,但是随着时代的发展和交互要求的提高,Animation的局限性也越来越明显,例如:Anmiation动画不能响应点击事件等等.因此,在Android3.0之后,Google推出了新的动画框架--属性动画(Animator). 而在Animator框架中使用最多的就是AnimatorSet和ObjectAnimator的配合,使用ObjectAnimator进行更加精细化的控制,只控制一个对象的一个属性值,而使用多个

Android属性动画之实现灵动菜单效果

前段时间,我学习了自定义View,基本能够绘制一些比较好看的控件,那么今天开始,我将会学习属性动画.前面我也简单的看过属性动画的概念,然后也是看了一下效果,了解了一些基本概念,比如Animator.ObjectAnimator.插值器等等.为此我还特意写了博客Android技术进阶的要素--Android属性动画,但是没有一个项目去巩固,也一直耿耿于怀,今天终于可以开始写这方面的程序了,好了,讲了这么多的废话,下面开始看看今天的内容,我是通过demo来了解属性动画的.先看你效果: 这个就是展开后

android 属性动画在ScrollView中平移view的问题

问题描述 android 属性动画在ScrollView中平移view的问题 在ScrollView里使用属性动画平移一个view 的时候,沿ScrollView滑动反向,不管是的动态改变translationX,还是x,view的宽度也会改变,就相当于只改变view的一个边界,另一个边界还是固定不动,看上去完全不是平移而是压缩或拉伸的效果,平移该如何实现? 解决方案 android view动画问题Android View 动画问题Android view动画问题 解决方案二: 我不知道你在说

Android属性动画完全解析(中)，ValueAnimator和ObjectAnimator的高级用法

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/43536355 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是最常用的一些用法,这些用法足以覆盖我们平时大多情况下的动画需求了.但是,正如上篇文章当中所说到的,属性动画对补间动画进行了很大幅度的改进,之前补间动画可以做到的属性动画也能做到,补间动画做不到的现在属性动画也可以做到了.因此,今天我们就来学习一下属性动画的高级用法,看看如何实现一些补间动画

Android属性动画完全解析(下) Interpolator和ViewPropertyAnimator的用法

大家好,欢迎继续回到Android属性动画完全解析.在上一篇文章当中我们学习了属性动画的一些进阶技巧,包括ValueAnimator和ObjectAnimator的高级用法,那么除了这些之外,当然还有一些其它的高级技巧在等着我们学习,因此本篇文章就对整个属性动画完全解析系列收个尾,来学习一下剩下的非常重要的高级技巧. 另外,本篇文章中使用的代码是建立在上篇文章基础之上的,如果你还没有阅读过前面的文章,建议先去参考阅读一下 Android属性动画完全解析(中),ValueAnimator和Obje

图文详解Android属性动画_Android

 Android中的动画分为视图动画(View Animation).属性动画(Property Animation)以及Drawable动画.从Android 3.0(API Level 11)开始,Android开始支持属性动画,本文主要讲解如何使用属性动画.关于视图动画可以参见博文<Android四大视图动画图文详解>. 一.概述 视图动画局限比较大,如下所述: 1.视图动画只能使用在View上面. 2.视图动画并没有真正改变View相应的属性值,这导致了UI效果与实际View状态存在差

详细的Android属性动画源代码解析及小结

本文假定你已经对属性动画有了一定的了解,至少使用过属性动画.下面我们就从属性动画最简单的使用开始. ObjectAnimator   .ofInt(target,propName,values[])   .setInterpolator(LinearInterpolator)   .setEvaluator(IntEvaluator)   .setDuration(500)   .start(); 相信这段代码对你一定不陌生,代码中有几个地方是本文中将要重点关注的,setInterpolator