android之绕Y轴旋转

转自：http://lzyfn123.iteye.com/blog/1426844

Android中并没有提供直接做3D翻转的动画，所以关于3D翻转的动画效果需要我们自己实现，那么我们首先来分析一下Animation 和 Transformation。

Animation动画的主要接口，其中主要定义了动画的一些属性比如开始时间，持续时间，是否重复播放等等。而 Transformation中则包含一个矩阵和alpha值，矩阵是用来做平移，旋转和缩放动画的，而alpha值是用来做alpha动画的，要实现 3D旋转动画我们需要继承自Animation类来实现，我们需要重载getTransformation和applyTransformation，在 getTransformation中Animation会根据动画的属性来产生一系列的差值点，然后将这些差值点传给 applyTransformation，这个函数将根据这些点来生成不同的Transformation。下面是具体实现：

1. public class Rotate3dAnimation extends Animation {
2. //开始角度
3. private final float mFromDegrees;
4. //结束角度
5. private final float mToDegrees;
6. //中心点
7. private final float mCenterX;
8. private final float mCenterY;
9. private final float mDepthZ;
10. //是否需要扭曲
11. private final boolean mReverse;
12. //摄像头
13. private Camera mCamera;
14. public Rotate3dAnimation( float fromDegrees, float toDegrees,
15. float centerX, float centerY, float depthZ, boolean reverse) {
16. mFromDegrees = fromDegrees;
17. mToDegrees = toDegrees;
18. mCenterX = centerX;
19. mCenterY = centerY;
20. mDepthZ = depthZ;
21. mReverse = reverse;
22. }
24. @Override
25. public void initialize( int width, int height, int parentWidth, int parentHeight) {
26. super .initialize(width, height, parentWidth, parentHeight);
27. mCamera = new Camera();
28. }
29. //生成Transformation
30. @Override
31. protected void applyTransformation( float interpolatedTime, Transformation t) {
32. final float fromDegrees = mFromDegrees;
33. //生成中间角度
34. float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);
36. final float centerX = mCenterX;
37. final float centerY = mCenterY;
38. final Camera camera = mCamera;
40. final Matrix matrix = t.getMatrix();
42. camera.save();
43. if (mReverse) {
44. camera.translate( 0 .0f, 0 .0f, mDepthZ * interpolatedTime);
45. } else {
46. camera.translate( 0 .0f, 0 .0f, mDepthZ * ( 1 .0f - interpolatedTime));
47. }
48. camera.rotateY(degrees);
49. //取得变换后的矩阵
50. camera.getMatrix(matrix);
51. camera.restore();
53. matrix.preTranslate(-centerX, -centerY);
54. matrix.postTranslate(centerX, centerY);
55. }
56. }

其中包括了旋转的开始和结束角度，中心点、是否扭曲、和一个Camera，这里我们主要分析applyTransformation函 数，其中第一个参数就是通过getTransformation函数传递的差指点，然后我们根据这个差值通过线性差值算法计算出一个中间角度 degrees，Camera类是用来实现绕Y轴旋转后透视投影的，因此我们首先通过t.getMatrix()取得当前的矩阵，然后通过 camera.translate来对矩阵进行平移变换操作，camera.rotateY进行旋转。这样我们就可以很轻松的实现3D旋转效果了，该例子 的原意是通过一个列表来供用户选择要实现翻转的图像，所以我们分析至少需要定义两个控件：ListView和ImageView（要翻转的图像），主界面 的xml布局定义如下所示。

1. < FrameLayout xmlns:android = "http://schemas.android.com/apk/res/android"
2. android:id = "@+id/container"
3. android:layout_width = "match_parent"
4. android:layout_height = "match_parent" >
6. < ListView
7. android:id = "@android:id/list"
8. android:persistentDrawingCache = "animation|scrolling"
9. android:layout_width = "match_parent"
10. android:layout_height = "match_parent"
11. android:layoutAnimation = "@anim/layout_bottom_to_top_slide" />
13. < ImageView
14. android:id = "@+id/picture"
15. android:scaleType = "fitCenter"
16. android:layout_width = "match_parent"
17. android:layout_height = "match_parent"
18. android:visibility = "gone" />
20. </ FrameLayout >

然后准备好需要的资源，在onCreate函数中准备好ListView和ImageView，因为要旋转所以我们需要保存视图的缓存 信息，通过setPersistentDrawingCache(ViewGroup.PERSISTENT_ANIMATION_CACHE);可以设 置该功能，当我们选择列表中的图像资源后在onItemClick中将选择的资源Id对应的图像设置到ImageView中，然后通过 applyRotation来启动一个动画，前面有了Rotate3dAnimation的实现，我们要完成3D翻转动画就很简单，直接构建一个 Rotate3dAnimation对象，设置其属性（包括动画监听），这里将动画的监听设置为DisplayNextView，可以用来显示下一个视 图，在其中的动画结束监听（onAnimationEnd）中，通过一个县城SwapViews来交换两个画面，交换过程则是设置ImageView和 ListView的显示相关属性，并构建一个Rotate3dAnimation对象，对另一个界面进行旋转即可，然后启动动画，整个转换过程实际上就是 将第一个界面从0度转好90度，然后就爱你过第二个界面从90度转到0度，这样就形成了一个翻转动画，完整代码如下，我们也加入了一些必要的注解，大家也 可以参考APIDemo中的Transition3d例子。

1. public class Transition3d extends Activity implements
2. AdapterView.OnItemClickListener, View.OnClickListener {
3. //照片列表
4. private ListView mPhotosList;
5. private ViewGroup mContainer;
6. private ImageView mImageView;
8. // 照片的名字，用于显示在list中
9. private static final String[] PHOTOS_NAMES = new String[] {
10. "Lyon" ,
11. "Livermore" ,
12. "Tahoe Pier" ,
13. "Lake Tahoe" ,
14. "Grand Canyon" ,
15. "Bodie"
16. };
18. // 资源id
19. private static final int [] PHOTOS_RESOURCES = new int [] {
20. R.drawable.photo1,
21. R.drawable.photo2,
22. R.drawable.photo3,
23. R.drawable.photo4,
24. R.drawable.photo5,
25. R.drawable.photo6
26. };
28. @Override
29. protected void onCreate(Bundle savedInstanceState) {
30. super .onCreate(savedInstanceState);
32. setContentView(R.layout.animations_main_screen);
34. mPhotosList = (ListView) findViewById(android.R.id.list);
35. mImageView = (ImageView) findViewById(R.id.picture);
36. mContainer = (ViewGroup) findViewById(R.id.container);
38. // 准备ListView
39. final ArrayAdapter adapter = new ArrayAdapter( this ,
40. android.R.layout.simple_list_item_1, PHOTOS_NAMES);
42. mPhotosList.setAdapter(adapter);
43. mPhotosList.setOnItemClickListener( this );
45. // 准备ImageView
46. mImageView.setClickable( true );
47. mImageView.setFocusable( true );
48. mImageView.setOnClickListener( this );
50. //设置需要保存缓存
51. mContainer.setPersistentDrawingCache(ViewGroup.PERSISTENT_ANIMATION_CACHE);
52. }
54. /**
55. * Setup a new 3D rotation on the container view.
56. *
57. * @param position the item that was clicked to show a picture, or -1 to show the list
58. * @param start the start angle at which the rotation must begin
59. * @param end the end angle of the rotation
60. */
61. private void applyRotation( int position, float start, float end) {
62. // 计算中心点
63. final float centerX = mContainer.getWidth() / 2 .0f;
64. final float centerY = mContainer.getHeight() / 2 .0f;
66. // Create a new 3D rotation with the supplied parameter
67. // The animation listener is used to trigger the next animation
68. final Rotate3dAnimation rotation =
69. new Rotate3dAnimation(start, end, centerX, centerY, 310 .0f, true );
70. rotation.setDuration( 500 );
71. rotation.setFillAfter( true );
72. rotation.setInterpolator( new AccelerateInterpolator());
73. //设置监听
74. rotation.setAnimationListener( new DisplayNextView(position));
76. mContainer.startAnimation(rotation);
77. }
79. public void onItemClick(AdapterView parent, View v, int position, long id) {
80. // 设置ImageView
81. mImageView.setImageResource(PHOTOS_RESOURCES[position]);
82. applyRotation(position, 0 , 90 );
83. }
84. //点击图像时，返回listview
85. public void onClick(View v) {
86. applyRotation(- 1 , 180 , 90 );
87. }
89. /**
90. * This class listens for the end of the first half of the animation.
91. * It then posts a new action that effectively swaps the views when the container
92. * is rotated 90 degrees and thus invisible.
93. */
94. private final class DisplayNextView implements Animation.AnimationListener {
95. private final int mPosition;
97. private DisplayNextView( int position) {
98. mPosition = position;
99. }
101. public void onAnimationStart(Animation animation) {
102. }
103. //动画结束
104. public void onAnimationEnd(Animation animation) {
105. mContainer.post( new SwapViews(mPosition));
106. }
108. public void onAnimationRepeat(Animation animation) {
109. }
110. }
112. /**
113. * This class is responsible for swapping the views and start the second
114. * half of the animation.
115. */
116. private final class SwapViews implements Runnable {
117. private final int mPosition;
119. public SwapViews( int position) {
120. mPosition = position;
121. }
123. public void run() {
124. final float centerX = mContainer.getWidth() / 2 .0f;
125. final float centerY = mContainer.getHeight() / 2 .0f;
126. Rotate3dAnimation rotation;
128. if (mPosition > - 1 ) {
129. //显示ImageView
130. mPhotosList.setVisibility(View.GONE);
131. mImageView.setVisibility(View.VISIBLE);
132. mImageView.requestFocus();
134. rotation = new Rotate3dAnimation( 90 , 180 , centerX, centerY, 310 .0f, false );
135. } else {
136. //返回listview
137. mImageView.setVisibility(View.GONE);
138. mPhotosList.setVisibility(View.VISIBLE);
139. mPhotosList.requestFocus();
141. rotation = new Rotate3dAnimation( 90 , 0 , centerX, centerY, 310 .0f, false );
142. }
144. rotation.setDuration( 500 );
145. rotation.setFillAfter( true );
146. rotation.setInterpolator( new DecelerateInterpolator());
147. //开始动画
148. mContainer.startAnimation(rotation);
149. }
150. }
152. }