Android 3D旋转动画效果

这篇文章主要介绍一下如何实现View的3D旋转效果，实现的主要原理就是围绕Y轴旋转，同时在Z轴方面上有一个深入的缩放。

演示的demo主要有以下几个重点：

1，自定义旋转动画

2，动画做完后，重置ImageView

先看一下程序的运行效果：

1，自定义动画类

这里实现了一个Rotate3dAnimation的类，它扩展了Animation类，重写applyTransformation()方法，提供指定时间的矩阵变换，我们在这个方法里，就可以利用Camera类得得到一个围绕Y轴旋转的matrix，把这个matrix设置到Transformation对象中。  具体的实现代码如下：

[java] view plain copy print ?

1. @Override 
2. protected void applyTransformation(float interpolatedTime, Transformation t) 
3. { 
4.         final float fromDegrees = mFromDegrees; 
5.         float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime); 
6.  
7.         final float centerX = mCenterX; 
8.         final float centerY = mCenterY; 
9.         final Camera camera = mCamera; 
10.  
11.         final Matrix matrix = t.getMatrix(); 
12.  
13.         camera.save(); 
14.         if (mReverse) { 
15.             camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime); 
16.         } else { 
17.             camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime)); 
18.         } 
19.         camera.rotateY(degrees); 
20.         camera.getMatrix(matrix); 
21.         camera.restore(); 
22.  
23.         matrix.preTranslate(-centerX, -centerY); 
24.         matrix.postTranslate(centerX, centerY); 
25. } 

@Override
protected void applyTransformation(float interpolatedTime, Transformation t)
{
        final float fromDegrees = mFromDegrees;
        float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);

        final float centerX = mCenterX;
        final float centerY = mCenterY;
        final Camera camera = mCamera;

        final Matrix matrix = t.getMatrix();

        camera.save();
        if (mReverse) {
            camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
        } else {
            camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
        }
        camera.rotateY(degrees);
        camera.getMatrix(matrix);
        camera.restore();

        matrix.preTranslate(-centerX, -centerY);
        matrix.postTranslate(centerX, centerY);
}

2，如何使用这个动画类

在Activity中，我们有两个大小一样的ImageView，它们都放在FrameLayout中，这样他们位置是重叠的，对最上面的ImageView做动画（旋转角度从0到90），当动画做完后，再对后面的ImageView做动画（旋转角度从90到180），在这里，要控制相应的ImageView隐藏或显示。

动画的listener实现如下：

[java] view plain copy print ?

1. private final class DisplayNextView implements Animation.AnimationListener { 
2.  
3.         public void onAnimationStart(Animation animation) { 
4.         } 
5.  
6.         public void onAnimationEnd(Animation animation) { 
7.  
8.             mContainer.post(new SwapViews()); 
9.         } 
10.  
11.         public void onAnimationRepeat(Animation animation) { 
12.         } 
13.     } 

private final class DisplayNextView implements Animation.AnimationListener {

        public void onAnimationStart(Animation animation) {
        }

        public void onAnimationEnd(Animation animation) {

            mContainer.post(new SwapViews());
        }

        public void onAnimationRepeat(Animation animation) {
        }
    }

动画做完后，执行的代码如下：

[java] view plain copy print ?

1. private final class SwapViews implements Runnable 
2.     { 
3.         @Override 
4.         public void run() 
5.         { 
6.             mImageView1.setVisibility(View.GONE); 
7.             mImageView2.setVisibility(View.GONE); 
8.  
9.             mIndex++; 
10.             if (0 == mIndex % 2) 
11.             { 
12.                 mStartAnimView = mImageView1; 
13.             } 
14.             else 
15.             { 
16.                 mStartAnimView = mImageView2; 
17.             } 
18.  
19.             mStartAnimView.setVisibility(View.VISIBLE); 
20.             mStartAnimView.requestFocus(); 
21.  
22.             Rotate3dAnimation rotation = new Rotate3dAnimation( 
23.                     -90, 
24.                     0, 
25.                     mCenterX, 
26.                     mCenterY, mDepthZ, false); 
27.  
28.             rotation.setDuration(mDuration); 
29.             rotation.setFillAfter(true); 
30.             rotation.setInterpolator(new DecelerateInterpolator()); 
31.             mStartAnimView.startAnimation(rotation); 
32.         } 
33.     } 

private final class SwapViews implements Runnable
    {
        @Override
        public void run()
        {
            mImageView1.setVisibility(View.GONE);
            mImageView2.setVisibility(View.GONE);

            mIndex++;
            if (0 == mIndex % 2)
            {
                mStartAnimView = mImageView1;
            }
            else
            {
                mStartAnimView = mImageView2;
            }

            mStartAnimView.setVisibility(View.VISIBLE);
            mStartAnimView.requestFocus();

            Rotate3dAnimation rotation = new Rotate3dAnimation(
                    -90,
                    0,
                    mCenterX,
                    mCenterY, mDepthZ, false);

            rotation.setDuration(mDuration);
            rotation.setFillAfter(true);
            rotation.setInterpolator(new DecelerateInterpolator());
            mStartAnimView.startAnimation(rotation);
        }
    }

点击Button的事件处理实现:

[java] view plain copy print ?

1. @Override 
2. public void onClick(View v) 
3. { 
4.     mCenterX = mContainer.getWidth() / 2; 
5.     mCenterY = mContainer.getHeight() / 2; 
6.  
7.     getDepthZ(); 
8.  
9.     applyRotation(mStartAnimView, 0, 90); 
10. } 

            @Override
            public void onClick(View v)
            {
                mCenterX = mContainer.getWidth() / 2;
                mCenterY = mContainer.getHeight() / 2;

                getDepthZ();

                applyRotation(mStartAnimView, 0, 90);
            }

applyRotation的实现如下：

[java] view plain copy print ?

1. private void applyRotation(View animView, float startAngle, float toAngle) 
2.     { 
3.         float centerX = mCenterX; 
4.         float centerY = mCenterY; 
5.         Rotate3dAnimation rotation = new Rotate3dAnimation( 
6.                 startAngle, toAngle, centerX, centerY, mDepthZ, true); 
7.         rotation.setDuration(mDuration); 
8.         rotation.setFillAfter(true); 
9.         rotation.setInterpolator(new AccelerateInterpolator()); 
10.         rotation.setAnimationListener(new DisplayNextView()); 
11.  
12.         animView.startAnimation(rotation); 
13.     } 

private void applyRotation(View animView, float startAngle, float toAngle)
    {
        float centerX = mCenterX;
        float centerY = mCenterY;
        Rotate3dAnimation rotation = new Rotate3dAnimation(
                startAngle, toAngle, centerX, centerY, mDepthZ, true);
        rotation.setDuration(mDuration);
        rotation.setFillAfter(true);
        rotation.setInterpolator(new AccelerateInterpolator());
        rotation.setAnimationListener(new DisplayNextView());

        animView.startAnimation(rotation);
    }

3，完整代码如下

Rotate3dAnimActivity.java

[java] view plain copy print ?

1. public class Rotate3dAnimActivity extends Activity 
2. { 
3.     ImageView mImageView1 = null; 
4.     ImageView mImageView2 = null; 
5.     ImageView mStartAnimView = null; 
6.     View mContainer = null; 
7.     int mDuration = 500; 
8.     float mCenterX = 0.0f; 
9.     float mCenterY = 0.0f; 
10.     float mDepthZ  = 0.0f; 
11.     int mIndex = 0; 
12.      
13.     @Override 
14.     public void onCreate(Bundle savedInstanceState) 
15.     { 
16.         super.onCreate(savedInstanceState); 
17.          
18.         setContentView(R.layout.rotate_anim); 
19.          
20.         mImageView1 = (ImageView) findViewById(R.id.imageView1); 
21.         mImageView2 = (ImageView) findViewById(R.id.imageView2); 
22.         mContainer  = findViewById(R.id.container); 
23.         mStartAnimView = mImageView1; 
24.          
25.         findViewById(R.id.button1).setOnClickListener(new View.OnClickListener() 
26.         { 
27.             @Override 
28.             public void onClick(View v) 
29.             { 
30.                 mCenterX = mContainer.getWidth() / 2; 
31.                 mCenterY = mContainer.getHeight() / 2; 
32.                  
33.                 getDepthZ(); 
34.                  
35.                 applyRotation(mStartAnimView, 0, 90); 
36.             } 
37.         }); 
38.          
39.         InputMethodManager imm = (InputMethodManager)getSystemService(INPUT_METHOD_SERVICE); 
40.         imm.hideSoftInputFromWindow(getWindow().getDecorView().getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS); 
41.     } 
42.      
43.     private void getDepthZ() 
44.     { 
45.         EditText editText = (EditText) findViewById(R.id.edit_depthz); 
46.         String string = editText.getText().toString(); 
47.          
48.         try 
49.         { 
50.             mDepthZ = (float)Integer.parseInt(string); 
51.             //mDepthZ = Math.min(mDepthZ, 300.0f); 
52.         } 
53.         catch (Exception e) 
54.         { 
55.             e.printStackTrace(); 
56.         } 
57.     } 
58.      
59.     private void applyRotation(View animView, float startAngle, float toAngle) 
60.     { 
61.         float centerX = mCenterX; 
62.         float centerY = mCenterY; 
63.         Rotate3dAnimation rotation = new Rotate3dAnimation( 
64.                 startAngle, toAngle, centerX, centerY, mDepthZ, true); 
65.         rotation.setDuration(mDuration); 
66.         rotation.setFillAfter(true); 
67.         rotation.setInterpolator(new AccelerateInterpolator()); 
68.         rotation.setAnimationListener(new DisplayNextView()); 
69.          
70.         animView.startAnimation(rotation); 
71.     } 
72.      
73.     /**
74.      * This class listens for the end of the first half of the animation.
75.      * It then posts a new action that effectively swaps the views when the container
76.      * is rotated 90 degrees and thus invisible.
77.      */ 
78.     private final class DisplayNextView implements Animation.AnimationListener { 
79.  
80.         public void onAnimationStart(Animation animation) { 
81.         } 
82.  
83.         public void onAnimationEnd(Animation animation) { 
84.              
85.             mContainer.post(new SwapViews()); 
86.         } 
87.  
88.         public void onAnimationRepeat(Animation animation) { 
89.         } 
90.     } 
91.      
92.     private final class SwapViews implements Runnable 
93.     { 
94.         @Override 
95.         public void run() 
96.         { 
97.             mImageView1.setVisibility(View.GONE); 
98.             mImageView2.setVisibility(View.GONE); 
99.              
100.             mIndex++; 
101.             if (0 == mIndex % 2) 
102.             { 
103.                 mStartAnimView = mImageView1; 
104.             } 
105.             else 
106.             { 
107.                 mStartAnimView = mImageView2; 
108.             } 
109.              
110.             mStartAnimView.setVisibility(View.VISIBLE); 
111.             mStartAnimView.requestFocus(); 
112.              
113.             Rotate3dAnimation rotation = new Rotate3dAnimation( 
114.                     -90,  
115.                     0,  
116.                     mCenterX, 
117.                     mCenterY, mDepthZ, false); 
118.              
119.             rotation.setDuration(mDuration); 
120.             rotation.setFillAfter(true); 
121.             rotation.setInterpolator(new DecelerateInterpolator()); 
122.             mStartAnimView.startAnimation(rotation); 
123.         } 
124.     } 
125. } 

public class Rotate3dAnimActivity extends Activity
{
    ImageView mImageView1 = null;
    ImageView mImageView2 = null;
    ImageView mStartAnimView = null;
    View mContainer = null;
    int mDuration = 500;
    float mCenterX = 0.0f;
    float mCenterY = 0.0f;
    float mDepthZ  = 0.0f;
    int mIndex = 0;
    
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        
        setContentView(R.layout.rotate_anim);
        
        mImageView1 = (ImageView) findViewById(R.id.imageView1);
        mImageView2 = (ImageView) findViewById(R.id.imageView2);
        mContainer  = findViewById(R.id.container);
        mStartAnimView = mImageView1;
        
        findViewById(R.id.button1).setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                mCenterX = mContainer.getWidth() / 2;
                mCenterY = mContainer.getHeight() / 2;
                
                getDepthZ();
                
                applyRotation(mStartAnimView, 0, 90);
            }
        });
        
        InputMethodManager imm = (InputMethodManager)getSystemService(INPUT_METHOD_SERVICE);
        imm.hideSoftInputFromWindow(getWindow().getDecorView().getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
    }
    
    private void getDepthZ()
    {
        EditText editText = (EditText) findViewById(R.id.edit_depthz);
        String string = editText.getText().toString();
        
        try
        {
            mDepthZ = (float)Integer.parseInt(string);
            //mDepthZ = Math.min(mDepthZ, 300.0f);
        }
        catch (Exception e)
        {
            e.printStackTrace();
        }
    }
    
    private void applyRotation(View animView, float startAngle, float toAngle)
    {
        float centerX = mCenterX;
        float centerY = mCenterY;
        Rotate3dAnimation rotation = new Rotate3dAnimation(
                startAngle, toAngle, centerX, centerY, mDepthZ, true);
        rotation.setDuration(mDuration);
        rotation.setFillAfter(true);
        rotation.setInterpolator(new AccelerateInterpolator());
        rotation.setAnimationListener(new DisplayNextView());
        
        animView.startAnimation(rotation);
    }
    
    /**
     * This class listens for the end of the first half of the animation.
     * It then posts a new action that effectively swaps the views when the container
     * is rotated 90 degrees and thus invisible.
     */
    private final class DisplayNextView implements Animation.AnimationListener {

        public void onAnimationStart(Animation animation) {
        }

        public void onAnimationEnd(Animation animation) {
            
            mContainer.post(new SwapViews());
        }

        public void onAnimationRepeat(Animation animation) {
        }
    }
    
    private final class SwapViews implements Runnable
    {
        @Override
        public void run()
        {
            mImageView1.setVisibility(View.GONE);
            mImageView2.setVisibility(View.GONE);
            
            mIndex++;
            if (0 == mIndex % 2)
            {
                mStartAnimView = mImageView1;
            }
            else
            {
                mStartAnimView = mImageView2;
            }
            
            mStartAnimView.setVisibility(View.VISIBLE);
            mStartAnimView.requestFocus();
            
            Rotate3dAnimation rotation = new Rotate3dAnimation(
                    -90, 
                    0, 
                    mCenterX,
                    mCenterY, mDepthZ, false);
            
            rotation.setDuration(mDuration);
            rotation.setFillAfter(true);
            rotation.setInterpolator(new DecelerateInterpolator());
            mStartAnimView.startAnimation(rotation);
        }
    }
}

rotate_anim.xml

[html] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?> 
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:layout_width="fill_parent" 
4.     android:layout_height="fill_parent" 
5.     android:orientation="vertical" > 
6.  
7.     <Button 
8.         android:id="@+id/button1" 
9.         android:layout_width="wrap_content" 
10.         android:layout_height="wrap_content" 
11.         android:layout_margin="20dp" 
12.         android:text="Do 3d animation" /> 
13.      
14.     <TextView  
15.         android:layout_width="wrap_content" 
16.         android:layout_height="wrap_content" 
17.         android:layout_marginLeft="20px" 
18.         android:text="Input Depth on Z axis. [0, 300]" 
19.         /> 
20.     <EditText  
21.         android:id="@+id/edit_depthz" 
22.         android:layout_width="200dp" 
23.         android:layout_height="wrap_content" 
24.         android:layout_margin="20dp" 
25.         android:text="0"/> 
26.  
27.     <FrameLayout  
28.         android:id="@+id/container" 
29.         android:layout_width="wrap_content" 
30.         android:layout_height="wrap_content"> 
31.        <ImageView 
32.         android:id="@+id/imageView1" 
33.         android:layout_width="200dp" 
34.         android:layout_height="200dp" 
35.         android:layout_margin="20dp" 
36.         android:src="@drawable/f" /> 
37.         
38.        <ImageView 
39.         android:id="@+id/imageView2" 
40.         android:layout_width="200dp" 
41.         android:layout_height="200dp" 
42.         android:layout_margin="20dp" 
43.         android:src="@drawable/s"  
44.         android:visibility="gone"/> 
45.          
46.     </FrameLayout> 
47.  
48. </LinearLayout> 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:text="Do 3d animation" />
    
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20px"
        android:text="Input Depth on Z axis. [0, 300]"
        />
    <EditText 
        android:id="@+id/edit_depthz"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:text="0"/>

    <FrameLayout 
        android:id="@+id/container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
       <ImageView
        android:id="@+id/imageView1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_margin="20dp"
        android:src="@drawable/f" />
       
       <ImageView
        android:id="@+id/imageView2"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_margin="20dp"
        android:src="@drawable/s" 
        android:visibility="gone"/>
        
    </FrameLayout>

</LinearLayout>

Rotate3dAnimation.java

[java] view plain copy print ?

1. package com.nj1s.lib.anim; 
2.  
3. import android.graphics.Camera; 
4. import android.graphics.Matrix; 
5. import android.view.animation.Animation; 
6. import android.view.animation.Transformation; 
7.  
8. /**
9. * An animation that rotates the view on the Y axis between two specified angles.
10. * This animation also adds a translation on the Z axis (depth) to improve the effect.
11. */ 
12. public class Rotate3dAnimation extends Animation { 
13.     private final float mFromDegrees; 
14.     private final float mToDegrees; 
15.     private final float mCenterX; 
16.     private final float mCenterY; 
17.     private final float mDepthZ; 
18.     private final boolean mReverse; 
19.     private Camera mCamera; 
20.  
21.     /**
22.      * Creates a new 3D rotation on the Y axis. The rotation is defined by its
23.      * start angle and its end angle. Both angles are in degrees. The rotation
24.      * is performed around a center point on the 2D space, definied by a pair
25.      * of X and Y coordinates, called centerX and centerY. When the animation
26.      * starts, a translation on the Z axis (depth) is performed. The length
27.      * of the translation can be specified, as well as whether the translation
28.      * should be reversed in time.
29.      *
30.      * @param fromDegrees the start angle of the 3D rotation
31.      * @param toDegrees the end angle of the 3D rotation
32.      * @param centerX the X center of the 3D rotation
33.      * @param centerY the Y center of the 3D rotation
34.      * @param reverse true if the translation should be reversed, false otherwise
35.      */ 
36.     public Rotate3dAnimation(float fromDegrees, float toDegrees, 
37.             float centerX, float centerY, float depthZ, boolean reverse) { 
38.         mFromDegrees = fromDegrees; 
39.         mToDegrees = toDegrees; 
40.         mCenterX = centerX; 
41.         mCenterY = centerY; 
42.         mDepthZ = depthZ; 
43.         mReverse = reverse; 
44.     } 
45.  
46.     @Override 
47.     public void initialize(int width, int height, int parentWidth, int parentHeight) { 
48.         super.initialize(width, height, parentWidth, parentHeight); 
49.         mCamera = new Camera(); 
50.     } 
51.  
52.     @Override 
53.     protected void applyTransformation(float interpolatedTime, Transformation t) { 
54.         final float fromDegrees = mFromDegrees; 
55.         float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime); 
56.  
57.         final float centerX = mCenterX; 
58.         final float centerY = mCenterY; 
59.         final Camera camera = mCamera; 
60.  
61.         final Matrix matrix = t.getMatrix(); 
62.  
63.         camera.save(); 
64.         if (mReverse) { 
65.             camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime); 
66.         } else { 
67.             camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime)); 
68.         } 
69.         camera.rotateY(degrees); 
70.         camera.getMatrix(matrix); 
71.         camera.restore(); 
72.  
73.         matrix.preTranslate(-centerX, -centerY); 
74.         matrix.postTranslate(centerX, centerY); 
75.     } 
76. } 

package com.nj1s.lib.anim;

import android.graphics.Camera;
import android.graphics.Matrix;
import android.view.animation.Animation;
import android.view.animation.Transformation;

/**
 * An animation that rotates the view on the Y axis between two specified angles.
 * This animation also adds a translation on the Z axis (depth) to improve the effect.
 */
public class Rotate3dAnimation extends Animation {
    private final float mFromDegrees;
    private final float mToDegrees;
    private final float mCenterX;
    private final float mCenterY;
    private final float mDepthZ;
    private final boolean mReverse;
    private Camera mCamera;

    /**
     * Creates a new 3D rotation on the Y axis. The rotation is defined by its
     * start angle and its end angle. Both angles are in degrees. The rotation
     * is performed around a center point on the 2D space, definied by a pair
     * of X and Y coordinates, called centerX and centerY. When the animation
     * starts, a translation on the Z axis (depth) is performed. The length
     * of the translation can be specified, as well as whether the translation
     * should be reversed in time.
     *
     * @param fromDegrees the start angle of the 3D rotation
     * @param toDegrees the end angle of the 3D rotation
     * @param centerX the X center of the 3D rotation
     * @param centerY the Y center of the 3D rotation
     * @param reverse true if the translation should be reversed, false otherwise
     */
    public Rotate3dAnimation(float fromDegrees, float toDegrees,
            float centerX, float centerY, float depthZ, boolean reverse) {
        mFromDegrees = fromDegrees;
        mToDegrees = toDegrees;
        mCenterX = centerX;
        mCenterY = centerY;
        mDepthZ = depthZ;
        mReverse = reverse;
    }

    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        mCamera = new Camera();
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        final float fromDegrees = mFromDegrees;
        float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);

        final float centerX = mCenterX;
        final float centerY = mCenterY;
        final Camera camera = mCamera;

        final Matrix matrix = t.getMatrix();

        camera.save();
        if (mReverse) {
            camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
        } else {
            camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
        }
        camera.rotateY(degrees);
        camera.getMatrix(matrix);
        camera.restore();

        matrix.preTranslate(-centerX, -centerY);
        matrix.postTranslate(centerX, centerY);
    }
}

各位，请想一想，为实现applyTransformation方法时，最后的为什么要有这两句话：

        matrix.preTranslate(-centerX, -centerY);
        matrix.postTranslate(centerX, centerY);