android之绕Y轴旋转

2022-04-02 10:14:59 浏览数 (1)

转自：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. }
python listview 图像处理 android

0 人点赞