MyException - 我的异常网
当前位置:我的异常网» Android » android scale兑现翻牌动画效果

android scale兑现翻牌动画效果

www.MyException.Cn  网友分享于:2013-06-27  浏览:207次
android scale实现翻牌动画效果

http://livehappy.iteye.com/blog/1004399

转自:

昨天同事说他想弄个玩扑克的游戏,发牌,计算分数等。问我会不会做翻牌的动画,我说我也没做过,直接告诉他:你查查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等等都一样,只要是最小的它就先执行,然后往最大的执行。所以大家在做此类动画的时候一定要注意。 
同样代码奉上,提供下载。 
我的环境都是windows xp eclipse3.5 sdk2.2 jdk1.6

文章评论

程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序员都该阅读的书
程序员都该阅读的书
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
编程语言是女人
编程语言是女人
程序员的鄙视链
程序员的鄙视链
中美印日四国程序员比较
中美印日四国程序员比较
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
程序员应该关注的一些事儿
程序员应该关注的一些事儿
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
每天工作4小时的程序员
每天工作4小时的程序员
10个调试和排错的小建议
10个调试和排错的小建议
代码女神横空出世
代码女神横空出世
程序员必看的十大电影
程序员必看的十大电影
旅行,写作,编程
旅行,写作,编程
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
那些争议最大的编程观点
那些争议最大的编程观点
一个程序员的时间管理
一个程序员的时间管理
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
如何成为一名黑客
如何成为一名黑客
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
总结2014中国互联网十大段子
总结2014中国互联网十大段子
我是如何打败拖延症的
我是如何打败拖延症的
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
老程序员的下场
老程序员的下场
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序员和编码员之间的区别
程序员和编码员之间的区别
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
Java程序员必看电影
Java程序员必看电影
鲜为人知的编程真相
鲜为人知的编程真相
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
漫画:程序员的工作
漫画:程序员的工作
我的丈夫是个程序员
我的丈夫是个程序员
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有