Animation之震动效果动画在登录Activity上的应用

jopen 12年前

在账户登录错误时，如果显示弹出框则会显得很难看而且不友好。

当然使用Toast也是不错的选择。

在这里提供一种Animation的动画效果。

当用户名或者密码错误时，输入框会左右震动，来表示“用户名或者密码错误”。

同时，通过这个小案例，来初步了解Animation动画。

【注】灵感来自android自带的API。

 

Animation的XML

在项目的res目录下新建anim文件夹，用来存放Animation动画的XML。

新建shake.xml如下：

<?xml version="1.0" encoding="utf-8"?>  <translate xmlns:android="http://schemas.android.com/apk/res/android"       android:fromXDelta="0"       android:toXDelta="10"       android:duration="1000"       android:interpolator="@anim/cycle_7" />
其中，fromXDelta表示指定控件在动画开始时水平方向的像素位置，toXDelta表示在水平方向上的位移像素。
相应的，还可以有fromYDelta和toYDelta。
duration表示动画的持续时间。

Animation的应用

          Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);            findViewById(R.id.editText2).startAnimation(shake);            findViewById(R.id.editText1).startAnimation(shake);

完整的应用

Java文件

package com.app;    import android.annotation.SuppressLint;  import android.app.Activity;  import android.content.Intent;  import android.net.Uri;  import android.os.Bundle;  import android.view.View;  import android.view.animation.Animation;  import android.view.animation.AnimationUtils;  import android.widget.EditText;  import android.widget.Toast;    @SuppressLint("NewApi")  public class MyQQActivity extends Activity implements View.OnClickListener{      /** Called when the activity is first created. */      @Override      public void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.qq_login);          findViewById(R.id.button1).setOnClickListener(this);          findViewById(R.id.button2).setOnClickListener(this);          findViewById(R.id.button3).setOnClickListener(this);      }        public void onClick(View v) {       EditText editText1 = (EditText) findViewById(R.id.editText1);       String text1 = editText1.getText().toString();       EditText editText2 = (EditText) findViewById(R.id.editText2);       String text2 = editText2.getText().toString();    switch (v.getId()) {    case R.id.button1:         if (text1.equals(text2)) {      Intent intent2 = new Intent();      intent2.setClass(MyQQActivity.this,Tabs.class );      startActivity(intent2);       int version = Integer.valueOf(android.os.Build.VERSION.SDK);       if(version >= 5) {             overridePendingTransition(R.anim.zoomin, R.anim.zoomout);       }      }      else {      Toast.makeText(MyQQActivity.this, "账号或密码错误，请重新输入！", Toast.LENGTH_LONG).show();            Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);            findViewById(R.id.editText2).startAnimation(shake);            findViewById(R.id.editText1).startAnimation(shake);      editText2.setText(null);     }     break;    case R.id.button2:       //注册账号     Uri uri1 = Uri.parse("http://zc.qq.com/chs/index.html");     Intent it1  = new Intent(Intent.ACTION_VIEW,uri1);     startActivity(it1);      break;    case R.id.button3:       //忘记密码     Uri uri2 = Uri.parse("https://aq.qq.com/cn2/findpsw/pc/pc_find_pwd_input_account");     Intent it2  = new Intent(Intent.ACTION_VIEW,uri2);     startActivity(it2);      break;    default:     break;    }   }       }

layout文件

<?xml version="1.0" encoding="utf-8"?>  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:id="@+id/qqlogin"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:orientation="vertical"       android:background="@drawable/phone_call_bg"      android:padding="10dp">   <LinearLayout       android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:orientation="vertical" >    <ImageView           android:id="@+id/imageView1"           android:layout_width="fill_parent"           android:layout_height="120dp"           android:layout_marginTop="15dp"           android:src="@drawable/ic_launcher" />   </LinearLayout>      <RelativeLayout          android:layout_width="match_parent"          android:layout_height="100dp"          android:layout_marginTop="15dp"          android:background="@drawable/login_management_background"          android:padding="10dp" >          <TextView              android:id="@+id/textView1"              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_alignParentLeft="true"              android:layout_alignParentTop="true"              android:layout_marginLeft="15dp"              android:layout_marginTop="10dp"              android:layout_marginBottom="5dp"              android:text="账号"               android:textSize="20dp"              android:textColor="#333"/>          <TextView              android:id="@+id/textView2"              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_alignParentLeft="true"              android:layout_below="@+id/textView1"              android:layout_alignLeft="@+id/textView1"              android:layout_marginLeft="15dp"              android:layout_marginTop="5dp"              android:layout_marginBottom="10dp"              android:text="密码"               android:textSize="20dp"              android:textColor="#333"/>          <EditText              android:id="@+id/editText1"              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:paddingTop="3dp"              android:layout_alignBaseline="@+id/textView1"              android:layout_alignBottom="@+id/textView1"              android:layout_marginLeft="22dp"              android:drawableTop="#fff"              android:hint="用户名/邮箱"     android:phoneNumber="true"              android:layout_toRightOf="@+id/textView1"              android:ems="10" >              <requestFocus />          </EditText>          <EditText              android:id="@+id/editText2"              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_alignBaseline="@+id/textView2"              android:layout_alignBottom="@+id/textView2"              android:layout_alignLeft="@+id/editText1"              android:ems="10"     android:phoneNumber="true"              android:drawableTop="#fff"              android:hint="请输入密码"              android:inputType="textPassword" />      </RelativeLayout>   <LinearLayout       android:layout_width="wrap_content"       android:layout_marginTop="15dp"       android:layout_height="40dp"       android:orientation="horizontal" >    <Button        android:id="@+id/button1"        android:layout_width="170dp"        android:layout_height="40dp"        android:layout_marginLeft="60dp"              android:background="@drawable/bg_alibuybutton"        android:text="登          录"         android:gravity="center"        android:textSize="20sp"        android:textColor="#000000"/>   </LinearLayout>    <LinearLayout       android:layout_width="fill_parent"       android:layout_marginTop="100dp"       android:gravity="center_horizontal"       android:orientation="horizontal"       android:layout_height="wrap_content" >    <Button        android:id="@+id/button2"        style="?android:attr/buttonStyleSmall"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textSize="10sp"        android:text="注册账号" />    <Button        android:id="@+id/button3"        style="?android:attr/buttonStyleSmall"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textSize="10sp"        android:text="忘记密码" />   </LinearLayout>  </LinearLayout>

效果图

20130922233824984.jpg