IOS的用户体验做的很好，其中一点很重要的地方就是动画效果。
最近在学习Android的Animation，简单实现了一个IOS相机滤镜退出的动画：
布局文件：activity_animation_demo.xml 布局未考虑各个分辨率，只是为了实现动画逻辑，（代码测试是在720P分辨率的手机上）
<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"
tools:context="com.example.andanimationdemo.AnimationDemoActivity" > <FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="25px"
android:layout_marginRight="25px"
>
<LinearLayout
android:id="@+id/rootLinearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<LinearLayout
android:id="@+id/firstLinearLayout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/Button_1"
android:layout_width="200px"
android:layout_height="200px"
android:background="@android:color/holo_blue_bright"/>
<Button
android:id="@+id/Button_2"
android:layout_width="200px"
android:layout_height="200px"
android:layout_marginLeft="35px"
android:background="@android:color/holo_green_light"/>
<Button
android:layout_marginLeft="35px"
android:id="@+id/Button_3"
android:layout_width="200px"
android:layout_height="200px"
android:background="@android:color/black"/>
</LinearLayout> <LinearLayout
android:id="@+id/SencondLinearLayout"
android:layout_marginTop="35px"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/Button_4"
android:layout_width="200px"
android:layout_height="200px"
android:background="@android:color/holo_orange_dark"/>
<Button
android:id="@+id/Button_5"
android:layout_width="200px"
android:layout_height="200px"
android:layout_marginLeft="35px"
android:background="@android:color/holo_red_light"/>
<Button
android:layout_marginLeft="35px"
android:id="@+id/Button_6"
android:layout_width="200px"
android:layout_height="200px"
android:background="@android:color/darker_gray"/>
</LinearLayout> <LinearLayout
android:id="@+id/ThirdLinearLayout"
android:layout_marginTop="35px"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/Button_7"
android:layout_width="200px"
android:layout_height="200px"
android:background="@android:color/holo_green_light"/>
<Button
android:id="@+id/Button_8"
android:layout_width="200px"
android:layout_height="200px"
android:layout_marginLeft="35px"
android:background="@android:color/holo_orange_light"/>
<Button
android:layout_marginLeft="35px"
android:id="@+id/Button_9"
android:layout_width="200px"
android:layout_height="200px"
android:background="@android:color/holo_blue_light"/>
</LinearLayout>
</LinearLayout>
</FrameLayout> <Button
android:id="@+id/Reset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="40dp"
android:layout_marginBottom="40dp"
android:text="Reset"></Button> </RelativeLayout>
AnimationDemoActivity.java
package com.example.andanimationdemo; import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.ScaleAnimation;
import android.widget.Button;
import android.widget.LinearLayout; public class AnimationDemoActivity extends Activity implements OnClickListener{ private static final String TAG = "AnimationDemo";
LinearLayout rootLinearLayout;
Button resetButton;
int mCurrentClickButtonId = -1; int[] ButtonID = new int[] {
R.id.Button_1,R.id.Button_2,R.id.Button_3,
R.id.Button_4,R.id.Button_5,R.id.Button_6,
R.id.Button_7,R.id.Button_8,R.id.Button_9
}; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_animation_demo);
rootLinearLayout = (LinearLayout) findViewById(R.id.rootLinearLayout);
resetButton = (Button) findViewById(R.id.Reset);
setButtonListener();
} private void setButtonListener() {
for (int i = 0; i < ButtonID.length; i++) {
rootLinearLayout.findViewById(ButtonID[i]).setOnClickListener(this);
}
resetButton.setOnClickListener(this);
} /**
* 点击某个按钮后，开始放大动画
* 这里提供的是一个思路，并不局限于当前布局，放大倍数，通过哪个点放大，都可以计算出来。
*/
boolean onAnimationRunning = false; public void onAnimationButtonClick() {
Log.d(TAG, "onAnimationButtonClick");
int[] position = new int[2];
int[] ButtonPosition = new int[2];
Button AnimaitonBtton = (Button) rootLinearLayout.findViewById(ButtonID[mCurrentClickButtonId - 1]);
rootLinearLayout.getLocationInWindow(position);
AnimaitonBtton.getLocationInWindow(ButtonPosition);
int rootWidth = rootLinearLayout.getWidth();
int rootHeight = rootLinearLayout.getHeight();
int ButtonWidth = AnimaitonBtton.getWidth();
int ButtonHeight = AnimaitonBtton.getHeight(); /**
* 计算 scale factor
*/
float widthRate = (float)rootWidth/ButtonWidth;
float heightRate = (float)rootHeight/ButtonHeight; /**
* 计算放大的中心点
*/
float PointA = (ButtonPosition[0] - position[0]) * widthRate / (widthRate - 1);
float PointB = (ButtonPosition[1] - position[1]) * heightRate / (heightRate - 1); onAnimationRunning = true;
ScaleAnimation mScaleAnimation = new ScaleAnimation(1.0f, widthRate, 1.0f, heightRate,PointA,PointB);
mScaleAnimation.setDuration(2000);
mScaleAnimation.setFillAfter(true);
mScaleAnimation.setAnimationListener(new AnimationListener() { @Override
public void onAnimationStart(Animation animation) {
} @Override
public void onAnimationRepeat(Animation animation) {
} @Override
public void onAnimationEnd(Animation animation) {
Log.d(TAG,"onAnimationEnd");
onAnimationRunning = false;
for (int i = 0; i< ButtonID.length; i++) {
rootLinearLayout.findViewById(ButtonID[i]).setEnabled(false);
}
}
});
rootLinearLayout.startAnimation(mScaleAnimation); } @Override
public void onClick(View v) {
// TODO Auto-generated method stub
Log.d(TAG, "onClick :" + v.getId());
if (onAnimationRunning) {
Log.d(TAG, "onAnimationRunning = true");
return;
} switch (v.getId()) {
case R.id.Button_1:
mCurrentClickButtonId = 1;
onAnimationButtonClick();
break;
case R.id.Button_2:
mCurrentClickButtonId = 2;
onAnimationButtonClick();
break;
case R.id.Button_3:
mCurrentClickButtonId = 3;
onAnimationButtonClick();
break;
case R.id.Button_4:
mCurrentClickButtonId = 4;
onAnimationButtonClick();
break;
case R.id.Button_5:
mCurrentClickButtonId = 5;
onAnimationButtonClick();
break;
case R.id.Button_6:
mCurrentClickButtonId = 6;
onAnimationButtonClick();
break;
case R.id.Button_7:
mCurrentClickButtonId = 7;
onAnimationButtonClick();
break;
case R.id.Button_8:
mCurrentClickButtonId = 8;
onAnimationButtonClick();
break;
case R.id.Button_9:
mCurrentClickButtonId = 9;
onAnimationButtonClick();
break;
case R.id.Reset:
mCurrentClickButtonId = -1;
rootLinearLayout.clearAnimation();
rootLinearLayout.postInvalidate();
for (int i = 0; i< ButtonID.length; i++) {
rootLinearLayout.findViewById(ButtonID[i]).setEnabled(true);
}
break;
default:
break;
}
}
}
点击某个Button后，可以通过它所在的位置坐标，以及父布局所在的位置坐标，计算出通过哪个点放大。
实现的效果如下图：
如有什么不对的地方，还望大神指正。