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

IOS的用户体验做的很好，其中一点很重要的地方就是动画效果。

最近在学习Android的Animation，简单实现了一个IOS相机滤镜退出的动画：

布局文件：activity_animation_demo.xml  布局未考虑各个分辨率，只是为了实现动画逻辑，（代码测试是在720P分辨率的手机上）

1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  2     xmlns:tools="http://schemas.android.com/tools"  3     android:layout_width="match_parent"  4     android:layout_height="match_parent"  5     tools:context="com.example.andanimationdemo.AnimationDemoActivity" >  6       7     <FrameLayout  8         android:layout_width="wrap_content"  9         android:layout_height="wrap_content" 10         android:layout_marginTop="50dp" 11         android:layout_marginLeft="25px" 12         android:layout_marginRight="25px" 13         > 14         <LinearLayout 15             android:id="@+id/rootLinearLayout"  16             android:layout_width="wrap_content" 17             android:layout_height="wrap_content" 18             android:orientation="vertical" 19             >     20             <LinearLayout  21                 android:id="@+id/firstLinearLayout" 22                 android:orientation="horizontal" 23                 android:layout_width="wrap_content" 24                 android:layout_height="wrap_content"> 25                 <Button 26                     android:id="@+id/Button_1" 27                     android:layout_width="200px" 28                     android:layout_height="200px" 29                     android:background="@android:color/holo_blue_bright"/> 30                 <Button 31                     android:id="@+id/Button_2" 32                     android:layout_width="200px" 33                     android:layout_height="200px" 34                     android:layout_marginLeft="35px" 35                     android:background="@android:color/holo_green_light"/> 36                 <Button 37                     android:layout_marginLeft="35px" 38                     android:id="@+id/Button_3" 39                     android:layout_width="200px" 40                     android:layout_height="200px" 41                     android:background="@android:color/black"/> 42             </LinearLayout> 43              44             <LinearLayout  45                 android:id="@+id/SencondLinearLayout" 46                 android:layout_marginTop="35px" 47                 android:orientation="horizontal" 48                 android:layout_width="wrap_content" 49                 android:layout_height="wrap_content"> 50                 <Button 51                     android:id="@+id/Button_4" 52                     android:layout_width="200px" 53                     android:layout_height="200px" 54                     android:background="@android:color/holo_orange_dark"/> 55                 <Button 56                     android:id="@+id/Button_5" 57                     android:layout_width="200px" 58                     android:layout_height="200px" 59                     android:layout_marginLeft="35px" 60                     android:background="@android:color/holo_red_light"/> 61                 <Button 62                     android:layout_marginLeft="35px" 63                     android:id="@+id/Button_6" 64                     android:layout_width="200px" 65                     android:layout_height="200px" 66                     android:background="@android:color/darker_gray"/> 67             </LinearLayout> 68              69             <LinearLayout  70                 android:id="@+id/ThirdLinearLayout" 71                 android:layout_marginTop="35px" 72                 android:orientation="horizontal" 73                 android:layout_width="wrap_content" 74                 android:layout_height="wrap_content"> 75                 <Button 76                     android:id="@+id/Button_7" 77                     android:layout_width="200px" 78                     android:layout_height="200px" 79                     android:background="@android:color/holo_green_light"/> 80                 <Button 81                     android:id="@+id/Button_8" 82                     android:layout_width="200px" 83                     android:layout_height="200px" 84                     android:layout_marginLeft="35px" 85                     android:background="@android:color/holo_orange_light"/> 86                 <Button 87                     android:layout_marginLeft="35px" 88                     android:id="@+id/Button_9" 89                     android:layout_width="200px" 90                     android:layout_height="200px" 91                     android:background="@android:color/holo_blue_light"/> 92             </LinearLayout> 93         </LinearLayout> 94     </FrameLayout> 95  96     <Button 97         android:id="@+id/Reset" 98         android:layout_width="wrap_content" 99         android:layout_height="wrap_content"100         android:layout_alignParentRight="true"101         android:layout_alignParentBottom="true"102         android:layout_marginRight="40dp"103         android:layout_marginBottom="40dp"104         android:text="Reset"></Button>105 106 </RelativeLayout>

 AnimationDemoActivity.java

1 package com.example.andanimationdemo;  2   3 import android.app.Activity;  4 import android.os.Bundle;  5 import android.util.Log;  6 import android.view.View;  7 import android.view.View.OnClickListener;  8 import android.view.animation.Animation;  9 import android.view.animation.Animation.AnimationListener; 10 import android.view.animation.ScaleAnimation; 11 import android.widget.Button; 12 import android.widget.LinearLayout; 13  14 public class AnimationDemoActivity extends Activity implements OnClickListener{ 15  16     private static final String TAG = "AnimationDemo"; 17     LinearLayout rootLinearLayout; 18     Button resetButton; 19     int mCurrentClickButtonId = -1; 20      21     int[] ButtonID = new int[] { 22         R.id.Button_1,R.id.Button_2,R.id.Button_3, 23         R.id.Button_4,R.id.Button_5,R.id.Button_6, 24         R.id.Button_7,R.id.Button_8,R.id.Button_9 25     }; 26      27     @Override 28     protected void onCreate(Bundle savedInstanceState) { 29         super.onCreate(savedInstanceState); 30         setContentView(R.layout.activity_animation_demo); 31         rootLinearLayout = (LinearLayout) findViewById(R.id.rootLinearLayout); 32         resetButton = (Button) findViewById(R.id.Reset); 33         setButtonListener(); 34     } 35      36     private void setButtonListener() { 37         for (int i = 0; i < ButtonID.length; i++) { 38             rootLinearLayout.findViewById(ButtonID[i]).setOnClickListener(this); 39         } 40         resetButton.setOnClickListener(this); 41     } 42  43     /** 44      * 点击某个按钮后，开始放大动画 45      * 这里提供的是一个思路，并不局限于当前布局，放大倍数，通过哪个点放大，都可以计算出来。 46      */     47     boolean onAnimationRunning = false; 48      49     public void onAnimationButtonClick() { 50         Log.d(TAG, "onAnimationButtonClick"); 51         int[] position = new int[2]; 52         int[] ButtonPosition = new int[2]; 53         Button AnimaitonBtton = (Button) rootLinearLayout.findViewById(ButtonID[mCurrentClickButtonId - 1]); 54         rootLinearLayout.getLocationInWindow(position); 55         AnimaitonBtton.getLocationInWindow(ButtonPosition); 56         int rootWidth = rootLinearLayout.getWidth(); 57         int rootHeight = rootLinearLayout.getHeight(); 58         int ButtonWidth = AnimaitonBtton.getWidth(); 59         int ButtonHeight = AnimaitonBtton.getHeight(); 60          61         /** 62          * 计算 scale factor 63          */ 64         float widthRate = (float)rootWidth/ButtonWidth; 65         float heightRate = (float)rootHeight/ButtonHeight; 66          67         /** 68          * 计算放大的中心点 69          */ 70         float PointA = (ButtonPosition[0] - position[0]) * widthRate / (widthRate - 1); 71         float PointB = (ButtonPosition[1] - position[1]) * heightRate / (heightRate - 1); 72          73         onAnimationRunning = true; 74         ScaleAnimation mScaleAnimation = new ScaleAnimation(1.0f, widthRate, 1.0f, heightRate,PointA,PointB); 75         mScaleAnimation.setDuration(2000); 76         mScaleAnimation.setFillAfter(true); 77         mScaleAnimation.setAnimationListener(new AnimationListener() { 78              79             @Override 80             public void onAnimationStart(Animation animation) { 81             } 82              83             @Override 84             public void onAnimationRepeat(Animation animation) { 85             } 86              87             @Override 88             public void onAnimationEnd(Animation animation) { 89                 Log.d(TAG,"onAnimationEnd"); 90                 onAnimationRunning = false; 91                 for (int i = 0; i< ButtonID.length; i++) { 92                     rootLinearLayout.findViewById(ButtonID[i]).setEnabled(false); 93                 } 94             } 95         }); 96         rootLinearLayout.startAnimation(mScaleAnimation); 97          98     } 99     100     @Override101     public void onClick(View v) {102         // TODO Auto-generated method stub103         Log.d(TAG, "onClick :" + v.getId());104         if (onAnimationRunning) {105             Log.d(TAG, "onAnimationRunning = true");106             return;107         }108         109         switch (v.getId()) {110         case R.id.Button_1:111             mCurrentClickButtonId = 1;112             onAnimationButtonClick();113             break;114         case R.id.Button_2:115             mCurrentClickButtonId = 2;116             onAnimationButtonClick();117             break;118         case R.id.Button_3:119             mCurrentClickButtonId = 3;120             onAnimationButtonClick();121             break;122         case R.id.Button_4:123             mCurrentClickButtonId = 4;124             onAnimationButtonClick();125             break;126         case R.id.Button_5:127             mCurrentClickButtonId = 5;128             onAnimationButtonClick();129             break;130         case R.id.Button_6:131             mCurrentClickButtonId = 6;132             onAnimationButtonClick();133             break;134         case R.id.Button_7:135             mCurrentClickButtonId = 7;136             onAnimationButtonClick();137             break;138         case R.id.Button_8:139             mCurrentClickButtonId = 8;140             onAnimationButtonClick();141             break;142         case R.id.Button_9:143             mCurrentClickButtonId = 9;144             onAnimationButtonClick();145             break;146         case R.id.Reset:147             mCurrentClickButtonId = -1;148             rootLinearLayout.clearAnimation();149             rootLinearLayout.postInvalidate();150             for (int i = 0; i< ButtonID.length; i++) {151                 rootLinearLayout.findViewById(ButtonID[i]).setEnabled(true);152             }153             break;154         default:155             break;156         }157     }158 }

 点击某个Button后，可以通过它所在的位置坐标，以及父布局所在的位置坐标，计算出通过哪个点放大。

 实现的效果如下图：

 

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