你的位置:首页 > 操作系统

[操作系统]Android Animation学习 实现 IOS 滤镜退出动画


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

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

布局文件:activity_animation_demo.

 1 <RelativeLayout ="http://schemas.android.com/apk/res/android" 2   ="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>

View Code

 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 }

View Code

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

 实现的效果如下图:

 

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