Android 滑动效果进阶篇（五）—— 3D旋转

前面介绍了利用Android自带的控件，进行滑动翻页制作效果，现在我们通过代码实现一些滑动翻页的动画效果。

Animation实现动画有两个方式：帧动画（frame-by-frame animation）和补间动画（tweened animation）

本示例通过继承Animation自定义Rotate3D，实现3D翻页效果。效果图如下：

1、Rotate3D（Animation）

首先，自定义Animation的3D动画类Rotate3D

1. public class Rotate3D extends Animation {
2. private float fromDegree;   // 旋转起始角度
3. private float toDegree;     // 旋转终止角度
4. private float mCenterX;     // 旋转中心x
5. private float mCenterY;     // 旋转中心y
6. private Camera mCamera;
7. public Rotate3D(float fromDegree, float toDegree, float centerX, float centerY) {
8. this.fromDegree = fromDegree;
9. this.toDegree = toDegree;
10. this.mCenterX = centerX;
11. this.mCenterY = centerY;
12. }
13. @Override
14. public void initialize(int width, int height, int parentWidth, int parentHeight) {
15. super.initialize(width, height, parentWidth, parentHeight);
16. mCamera = new Camera();
17. }
18. @Override
19. protected void applyTransformation(float interpolatedTime, Transformation t) {
20. final float FromDegree = fromDegree;
21. float degrees = FromDegree + (toDegree - fromDegree) * interpolatedTime;    // 旋转角度（angle）
22. final float centerX = mCenterX;
23. final float centerY = mCenterY;
24. final Matrix matrix = t.getMatrix();
25. if (degrees <= -76.0f) {
26. degrees = -90.0f;
27. mCamera.save();
28. mCamera.rotateY(degrees);       // 旋转
29. mCamera.getMatrix(matrix);
30. mCamera.restore();
31. } else if (degrees >= 76.0f) {
32. degrees = 90.0f;
33. mCamera.save();
34. mCamera.rotateY(degrees);
35. mCamera.getMatrix(matrix);
36. mCamera.restore();
37. } else {
38. mCamera.save();
39. mCamera.translate(0, 0, centerX);       // 位移x
40. mCamera.rotateY(degrees);
41. mCamera.translate(0, 0, -centerX);
42. mCamera.getMatrix(matrix);
43. mCamera.restore();
44. }
45. matrix.preTranslate(-centerX, -centerY);
46. matrix.postTranslate(centerX, centerY);
47. }
48. }

然后，实例化Rotate3D的旋转方向

1. public void initAnimation() {
2. // 获取旋转中心
3. DisplayMetrics dm = new DisplayMetrics();
4. dm = getResources().getDisplayMetrics();
5. mCenterX = dm.widthPixels / 2;
6. mCenterY = dm.heightPixels / 2;
7. // 定义旋转方向
8. int duration = 1000;
9. lQuest1Animation = new Rotate3D(0, -90, mCenterX, mCenterY);    // 下一页的【question1】旋转方向（从0度转到-90，参考系为水平方向为0度）
10. lQuest1Animation.setFillAfter(true);
11. lQuest1Animation.setDuration(duration);
12. lQuest2Animation = new Rotate3D(90, 0, mCenterX, mCenterY);     // 下一页的【question2】旋转方向（从90度转到0，参考系为水平方向为0度）（起始第一题）
13. lQuest2Animation.setFillAfter(true);
14. lQuest2Animation.setDuration(duration);
15. rQuest1Animation = new Rotate3D(0, 90, mCenterX, mCenterY);     // 上一页的【question1】旋转方向（从0度转到90，参考系为水平方向为0度）
16. rQuest1Animation.setFillAfter(true);
17. rQuest1Animation.setDuration(duration);
18. rQuest2Animation = new Rotate3D(-90, 0, mCenterX, mCenterY);    // 上一页的【question2】旋转方向（从-90度转到0，参考系为水平方向为0度）
19. rQuest2Animation.setFillAfter(true);
20. rQuest2Animation.setDuration(duration);
21. }

2、Activity

首先，定义两个布局文件，用于旋转的画面切换

main.xml

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. android:id="@+id/layout_main"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:orientation="vertical">
6. ...
7. </LinearLayout>

next.xml

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. android:id="@+id/layout_next"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:orientation="vertical">
6. ...
7. </LinearLayout>

限于篇幅，完整布局文件请详见源码 ^_^

然后，初始化两个旋转的布局文件资源

1. private void initMain(){
2. setContentView(R.layout.main);
3. layoutmain = (LinearLayout)findViewById(R.id.layout_main);
4. btn_MainLast = (Button)findViewById(R.id.main_last);
5. btn_MainNext = (Button)findViewById(R.id.main_next);
6. btn_MainLast.setOnClickListener(listener);
7. btn_MainNext.setOnClickListener(listener);
8. }
9. private void initNext(){
10. setContentView(R.layout.next);
11. layoutnext = (LinearLayout)findViewById(R.id.layout_next);
12. btn_NextLast = (Button)findViewById(R.id.next_last);
13. btn_NextNext = (Button)findViewById(R.id.next_next);
14. btn_NextLast.setOnClickListener(listener);
15. btn_NextNext.setOnClickListener(listener);
16. }

最后，设置布局文件中的按钮监听事件，响应3D旋转动画和方向

1. private View.OnClickListener listener = new View.OnClickListener() {
2. @Override
3. public void onClick(View v) {
4. switch (v.getId()) {
5. case R.id.main_last:    // 上一页
6. layoutmain.startAnimation(lQuest1Animation);    // 当前页向左旋转（0，-90）
7. initNext();
8. layoutnext.startAnimation(lQuest2Animation);    // 下一页向左旋转（90, 0）
9. break;
10. case R.id.main_next:    // 下一页
11. layoutmain.startAnimation(rQuest1Animation);    // 当前页向右旋转（0，90）
12. initNext();
13. layoutnext.startAnimation(rQuest2Animation);    // 下一页向右旋转（-90, 0）
14. break;
15. case R.id.next_last:
16. layoutnext.startAnimation(lQuest1Animation);
17. initMain();
18. layoutmain.startAnimation(lQuest2Animation);
19. break;
20. case R.id.next_next:
21. layoutnext.startAnimation(rQuest1Animation);
22. initMain();
23. layoutmain.startAnimation(rQuest2Animation);
24. break;
25. }
26. }
27. };