简单实现Android图片翻转动画效果

移动开发 Android
下面给大家分享一个有趣的动画:这里比较适合一张图片的翻转,如果是多张图片,可以参考APIDemo里的例子,就是加个ArrayAdapter,还是简单的,也可以自己发挥修改,实现自己想要的。这里的代码基本上可以直接运行项目了。

什么都不说,先看效果

这是原始图片的样子

这是翻转后的效果图

如果是你想要的效果,那么继续往下看,如果不是,那可以跳过了。这是一个动画,而不是用matrix实现的直接翻转图片。

我这个是根据APIDemo简单修改写的
需要一个Rotate3d 类,继承Animation

  1. public class Rotate3d extends Animation{  
  2.  private final float mFromDegrees;  
  3.     private final float mToDegrees;  
  4.     private final float mCenterX;  
  5.     private final float mCenterY;  
  6.     private final float mDepthZ;  
  7.     private final boolean mReverse;  
  8.     private Camera mCamera;  
  9.     public Rotate3d(float fromDegrees, float toDegrees,  
  10.             float centerX, float centerY, float depthZ, boolean reverse) {  
  11.         mFromDegrees = fromDegrees;  
  12.         mToDegrees = toDegrees;  
  13.         mCenterX = centerX;  
  14.         mCenterY = centerY;  
  15.         mDepthZ = depthZ;  
  16.         mReverse = reverse;  
  17.     }  
  18.     @Override  
  19.     public void initialize(int width, int height, int parentWidth, int parentHeight) {  
  20.         super.initialize(width, height, parentWidth, parentHeight);  
  21.         mCamera = new Camera();  
  22.     }  
  23.     @Override  
  24.     protected void applyTransformation(float interpolatedTime, Transformation t) {  
  25.         final float fromDegrees = mFromDegrees;  
  26.         float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);  
  27.         final float centerX = mCenterX;  
  28.         final float centerY = mCenterY;  
  29.         final Camera camera = mCamera;  
  30.         final Matrix matrix = t.getMatrix();  
  31.         camera.save();  
  32.         if (mReverse) {  
  33.             camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);  
  34.         } else {  
  35.             camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));  
  36.         }  
  37.         camera.rotateY(degrees);  
  38.         camera.getMatrix(matrix);  
  39.         camera.restore();  
  40.  
  41.         matrix.preTranslate(-centerX, -centerY);  
  42.         matrix.postTranslate(centerX, centerY);  
  43.     }  

这个类可以直接拷过去,不用做任何的修改。其中的方法自己找相关资料研究。

#p#
main.xml里加个ImageView,如

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:id="@+id/container" 
  4.     android:layout_width="fill_parent" 
  5.     android:layout_height="fill_parent"> 
  6. <ImageView 
  7. android:id="@+id/image" 
  8. android:layout_width="wrap_content" 
  9. android:layout_height="wrap_content" 
  10. android:text="Rotate" 
  11. android:textSize="50px" 
  12. android:layout_x="150px"   
  13. android:layout_y="30px" 
  14. android:src="@drawable/ro"> 
  15. ></ImageView> 
  16. </FrameLayout> 

这个不需要解释吧,都可以看懂的

***,还需要一个activity类

如:

  1. public class TestRotate extends Activity implements OnClickListener{  
  2.  private mageView imageview;  
  3.  private ViewGroup mContainer;  
  4.  /**  
  5.   *这个变量设置的是图片,如果是多张图片,那么可以用数组,如  
  6.   *private static final int IMAGE = new int[]{  
  7.   * R.drawable.ro,  
  8.   * R.drawable.icon  
  9.   *};  
  10.   *有多少图片就放多少,我这里做的只是一张图片的翻转  
  11.   *  
  12.   */  
  13.  private static final int IMAGE = R.drawable.ro;  
  14.     /** Called when the activity is first created. */  
  15.     @Override  
  16.     public void onCreate(Bundle savedInstanceState) {  
  17.         super.onCreate(savedInstanceState);  
  18.         setContentView(R.layout.main);          
  19.         imageview = (ImageView) findViewById(R.id.image);  
  20.         mContainer = (ViewGroup) findViewById(R.id.container);          
  21.         /**  
  22.          * 设置***显示的图片  
  23.          * 如果是数组,那么可以写成IMAGE[int]  
  24.          *   
  25.          */  
  26.         imageview.setImageResource(IMAGE);          
  27.         /**  
  28.          *   
  29.          * 设置ImageView的OnClickListener  
  30.          *   
  31.          */          
  32.         imageview.setClickable(true);  
  33.         imageview.setFocusable(true);  
  34.         imageview.setOnClickListener(this);  
  35.     }  
  36.     private void applyRotation(int position, float start, float end) {  
  37.         // Find the center of the container  
  38.         final float centerX = mContainer.getWidth() / 2.0f;  
  39.         final float centerY = mContainer.getHeight() / 2.0f;  
  40.         final Rotate3d rotation =  
  41.                 new Rotate3d(start, end, centerX, centerY, 310.0f, true);  
  42.         rotation.setDuration(500);  
  43.         rotation.setFillAfter(true);  
  44.         rotation.setInterpolator(new AccelerateInterpolator());  
  45.         rotation.setAnimationListener(new DisplayNextView(position));  
  46.         mContainer.startAnimation(rotation);  
  47.     }      
  48.  @Override  
  49.  public void onClick(View v) {  
  50.   // TODO Auto-generated method stub  
  51.   /**  
  52.    *   
  53.    * 调用这个方法,就是翻转图片  
  54.    * 参数很简单,大家都应该看得懂  
  55.    * 简单说下,***个是位置,第二是开始的角度,第三个是结束的角度  
  56.    * 这里需要说明的是,如果是要回到上一张  
  57.    * 把***个参数设置成-1就行了  
  58.    *   
  59.    */  
  60.   applyRotation(0,0,90);  
  61.  }  
  62.  private final class DisplayNextView implements Animation.AnimationListener {  
  63.         private final int mPosition;  
  64.         private DisplayNextView(int position) {  
  65.             mPosition = position;  
  66.         }  
  67.         public void onAnimationStart(Animation animation) {  
  68.         }  
  69.         public void onAnimationEnd(Animation animation) {  
  70.             mContainer.post(new SwapViews(mPosition));  
  71.         }  
  72.         public void onAnimationRepeat(Animation animation) {  
  73.         }  
  74.     }  
  75.     /**  
  76.      * This class is responsible for swapping the views and start the second  
  77.      * half of the animation.  
  78.      */  
  79.     private final class SwapViews implements Runnable {  
  80.         private final int mPosition;  
  81.         public SwapViews(int position) {  
  82.             mPosition = position;  
  83.         }  
  84.         public void run() {  
  85.             final float centerX = mContainer.getWidth() / 2.0f;  
  86.             final float centerY = mContainer.getHeight() / 2.0f;  
  87.             Rotate3d rotation;             
  88.             if (mPosition > -1) {  
  89.              imageview.setVisibility(View.VISIBLE);  
  90.              imageview.requestFocus();  
  91.                 rotation = new Rotate3d(90, 180, centerX, centerY, 310.0f, false);  
  92.             } else {  
  93.              imageview.setVisibility(View.GONE);  
  94.                 rotation = new Rotate3d(90, 0, centerX, centerY, 310.0f, false);  
  95.             }  
  96.             rotation.setDuration(500);  
  97.             rotation.setFillAfter(true);  
  98.             rotation.setInterpolator(new DecelerateInterpolator());  
  99.             mContainer.startAnimation(rotation);  
  100.         }  
  101.     }  

【编辑推荐】

Android学习笔记:Activity跳转

Android开发中插入新的Activity

Android开发:Activity之间的传值

Android应用开发教程:两个运行的Activity之间的通信

责任编辑:zhaolei 来源: 互联网
相关推荐

2017-02-06 13:00:49

Android翻转卡片动画效果

2011-07-08 10:15:15

IPhone 动画

2017-05-03 16:36:32

Android图片动画

2016-03-29 10:18:48

Android图片代码

2012-06-04 14:47:42

HTML5

2011-07-22 18:20:04

IOS View 动画

2022-03-29 11:28:24

HarmonyOS动画css

2015-01-23 16:29:44

2024-03-20 09:40:27

动画技巧CSS逐帧动画

2011-08-12 14:04:53

iPhone动画

2011-07-08 15:08:16

iPhone 图片

2011-07-29 13:55:10

IPhone 动画

2009-09-22 12:59:58

ibmdwDojo

2011-08-16 18:13:42

IPhone开发UIView动画

2011-07-19 13:07:26

iOS4 HTML5 动画

2015-06-18 10:33:02

iOS粘性动画

2012-05-17 13:17:26

HTML5

2011-08-10 14:40:23

iPhone动画

2015-09-16 09:20:34

WWDC苹果动画效果

2013-07-05 10:26:40

Android
点赞
收藏

51CTO技术栈公众号