Android Animation学习 实现 IOS 滤镜退出动画

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后，可以通过它所在的位置坐标，以及父布局所在的位置坐标，计算出通过哪个点放大。

实现的效果如下图：

如有什么不对的地方，还望大神指正。