学步园

昨天同事说他想弄个玩扑克的游戏，发牌，计算分数等。问我会不会做翻牌的动画，我说我也没做过，直接告诉他：你查查API文档之类的自己参考一下。 
之后我就想，我自己做一个看看，如果能做出来更好了。通过我的努力还真让我给弄出来了一个简单的翻牌动画。 
简单流程： 
  这个翻牌其实并不是立体那种翻转，而是通过收缩和伸展来完成的。 
   有两张图片，一张为背面： 
 
   一张为正面： 

 

  以扑克牌本身的中心点为轴，两边像中心收缩； 
  当背面收缩到完全没有后，通过对动画的监听器(AnimationListener)把牌换成正面，在通过伸展动画效果到完全展开。所有动画完成后就形成了一个完整的翻牌动画效果。 

 
我在做这个的时候，在网上也找过多个动画在一起的例子，但是我发现他们都是互相copy的，没有真正自己仔细研究过的，如果我不是自己研究了一下，也不知道其中的种种。 
我先把我完成的放上来，在这个过程中遇到的问题和经验在最后写。 
布局文件中，我只放入了一个ImageView控件，用来显示图片的。 
main.xml： 

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     >  
7. <ImageView  
8.     android:id="@+id/imgView"  
9.     android:layout_width="wrap_content"  
10.     android:layout_height="wrap_content"  
11.     android:layout_marginTop="200px"  
12.     android:src="@drawable/back"  
13.     />  
14. </LinearLayout>  

这个xml我想不用我过多解释了。 
Activit01.java: 

Java代码  

1. public class Activity01 extends Activity {  
2.     /** Called when the activity is first created. */  
3.     private ImageView imgView;  
4.     //声明一个boolean用来切换背面和正面  
5.     private boolean bool = false;  
6.       
7.     @Override  
8.     public void onCreate(Bundle savedInstanceState) {  
9.         super.onCreate(savedInstanceState);  
10.         setContentView(R.layout.main);  
11.         imgView = (ImageView) findViewById(R.id.imgView);  
12.         //给ImageView添加点击事件  
13.         imgView.setOnClickListener(new ImgViewListener());  
14.     }  
15.     class ImgViewListener implements OnClickListener {  
16.         @Override  
17.         public void onClick(View v) {  
18.             // TODO Auto-generated method stub  
19.             /*也可通过代码来实现   这个是收缩效果 
20.             AnimationSet animation = new AnimationSet(true); 
21.             ScaleAnimation scale = new ScaleAnimation(1, 0f, 1, 1f,  
22.                 Animation.RELATIVE_TO_SELF, 0.5f,  
23.                 Animation.RELATIVE_TO_SELF, 0.5f); 
24.             animation.addAnimation(scale); 
25.             animation.setDuration(150); 
26.             */  
27.             //通过AnimationUtils得到动画配置文件(/res/anim/back_scale.xml)  
28.             Animation animation = AnimationUtils.loadAnimation(Activity01.this, R.anim.back_scale);  
29.            animation.setAnimationListener(new Animation.AnimationListener() {  
30.                 @Override  
31.                 public void onAnimationStart(Animation animation) {  
32.                 }  
33.                 @Override  
34.                 public void onAnimationRepeat(Animation animation) {  
35.                 }  
36.                 @Override  
37.                 public void onAnimationEnd(Animation animation) {  
38.                     if(bool){  
39.                         imgView.setImageResource(R.drawable.back);  
40.                         bool = false;  
41.                     }else {  
42.                         imgView.setImageResource(R.drawable.front);  
43.                         bool = true;  
44.                     }  
45.                     //通过AnimationUtils得到动画配置文件(/res/anim/front_scale.xml),然后在把动画交给ImageView  
46.                     imgView.startAnimation(AnimationUtils.loadAnimation(Activity01.this, R.anim.front_scale));  
47.                 }  
48.             });  
49.             imgView.startAnimation(animation);  
50.         }  
51.     }  
52. }  

那么还需要两个实现动画的配置文件 
back_scale.xml： 

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
3.      android:interpolator="@android:anim/accelerate_interpolator">  
4.      <scale  
5.         android:fromXScale="1.0"  
6.         android:toXScale="0.0"  
7.         android:fromYScale="1.0"  
8.         android:toYScale="1.0"  
9.         android:pivotX="50%"  
10.         android:pivotY="50%"  
11.         android:duration="150"/>  
12. </set>  

fromXScale 起始时x坐标的尺寸，设置为1.0说明是整个图片x轴的长度 
toXScale  
结束时x坐标的尺寸，设置为0.0说明整个图片x轴完全收缩到无 
fromYScale
起始时y坐标的尺寸，设置为1.0说明是整个图片y轴的长度 
toYScale  
结束时y坐标的尺寸，设置为1.0说明是在收缩时y轴的长度保持不变 
那么他们的变化都是先对于某一点来变化的，因此pivotX和pivotY就是确定这个点的位置。 
在一个数轴上（原点为图片的左上角，x轴和y轴的射线分别是向右和向下，我测试过）： 
pivotX="50%" 说明是以图片本身的一半作为x轴的坐标； 
pivotY="50%" 说明是以图片本身的一半作为y轴的坐标； 
所以圆心点的坐标就是(0.5x,0.5y)。(x y是原图片的长和高) 
此效果就是以这个点的y轴为轴，x轴不断减小到0。 
duration 是设置的动画执行时间
因为要体现出翻牌的效果 所以不能太慢 也不能一下就翻开 
同样也有一个伸展的效果配置文件 
front.xml： 

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
3.      android:interpolator="@android:anim/accelerate_interpolator">  
4.      <scale  
5.         android:fromXScale="0.0"  
6.         android:toXScale="1.0"  
7.         android:fromYScale="1.0"  
8.         android:toYScale="1.0"  
9.         android:pivotX="50%"  
10.         android:pivotY="50%"  
11.         android:duration="150"/>  
12. </set>  

属性都和上面的同理，只不过是以圆心点为轴像两边伸展到完全展开。 
到此，这个效果就算完成了。然后来说说我做的过程中的问题吧。 
做之前也到网上查了，也有人做了一些多个动画的例子，不过不是我这样的。不说copy的问题，单说代码。举个例子： 
alpha 淡入淡出，一个图片我想实现淡入淡出，是完全可以的。无论是用配置文件把两个配置好的alpha放在一个set中还是用代码都放在AnimationSet中都能实现。而反过来要实现淡出淡入用这样的方式就不可以。正常我们都会想，谁放在第一个就先执行，但我测试的时候发现淡出(alpha_out)和淡入(alpaha_in)无论谁先放在AnimationSet中都是先执行淡入动画。只有用Animation的AnimationListener监听器来监听它的执行，然后当淡出动画结束后在执行淡入才可以实现要求的效果。所以我上面的Activit01中为什么要用到AnimationListener来做这个动画。我不知道其他的人发现没发现这个问题。 
最后我又以xml的形式又去验证了一下，把两个alpha都放入一个xml中，同样是这个问题，无论谁在上面还是先执行淡入的动画。其他的动画也一样，我都依次做了测试。 

那么也就是说：在执行动画的时候，它会先去找fromX的最小值的那个动画无论是alpha的fromAlpha还是scale的fromXScale等等都一样，只要是最小的它就先执行，然后往最大的执行。所以大家在做此类动画的时候一定要注意。 

转载：http://wjlgryx.iteye.com/blog/1124029