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

 实现的效果如下图：

 

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