昨天同事说他想弄个玩扑克的游戏,发牌,计算分数等。问我会不会做翻牌的动画,我说我也没做过,直接告诉他:你查查API文档之类的自己参考一下。
之后我就想,我自己做一个看看,如果能做出来更好了。通过我的努力还真让我给弄出来了一个简单的翻牌动画。
简单流程:
这个翻牌其实并不是立体那种翻转,而是通过收缩和伸展来完成的。
有两张图片,一张为背面:
[img]http://dl.iteye.com/upload/attachment/464183/6518f2a2-5ff5-39aa-af99-8a3d9249e8c4.gif[/img]
一张为正面:
[img]http://dl.iteye.com/upload/attachment/464185/f56c45b2-b8f1-344b-b467-374a8a22b6e8.gif[/img]
以扑克牌本身的中心点为轴,两边像中心收缩;
当背面收缩到完全没有后,通过对动画的监听器(AnimationListener)把牌换成正面,在通过伸展动画效果到完全展开。所有动画完成后就形成了一个完整的翻牌动画效果。
[img]http://dl.iteye.com/upload/attachment/464193/31e66516-28e1-3f39-a188-32e32d621b44.jpg[/img][img]http://dl.iteye.com/upload/attachment/464199/47f5edf0-00fa-3a41-b680-7a975fd76b6b.jpg[/img][img]http://dl.iteye.com/upload/attachment/464207/0a815ef3-4e63-3221-8d2a-fab6c85dfba7.jpg[/img][img]http://dl.iteye.com/upload/attachment/464209/a16adad4-5f06-39a6-be6e-199b339d9aaf.jpg[/img][img]http://dl.iteye.com/upload/attachment/464211/af0b2ab4-4bbd-3b23-aed0-be152fc569ab.jpg[/img][img]http://dl.iteye.com/upload/attachment/464215/f2f6fedc-a4ea-3bdd-b03f-77dd1027583c.jpg[/img]
我在做这个的时候,在网上也找过多个动画在一起的例子,但是我发现他们都是互相copy的,没有真正自己仔细研究过的,如果我不是自己研究了一下,也不知道其中的种种。
我先把我完成的放上来,在这个过程中遇到的问题和经验在最后写。
布局文件中,我只放入了一个ImageView控件,用来显示图片的。
[b]main.xml[/b]:
这个xml我想不用我过多解释了。
[b]Activit01.java[/b]:
那么还需要两个实现动画的配置文件
[b]back_scale.xml[/b]:
[color=blue][b]fromXScale[/b][/color] 起始时x坐标的尺寸,设置为1.0说明是整个图片x轴的长度
[color=blue][b]toXScale[/b][/color] 结束时x坐标的尺寸,设置为0.0说明整个图片x轴完全收缩到无
[b]fromYScal[/b]e 起始时y坐标的尺寸,设置为1.0说明是整个图片y轴的长度
[color=blue][b]toYScale[/b][/color] 结束时y坐标的尺寸,设置为1.0说明是在收缩时y轴的长度保持不变
那么他们的变化都是先对于某一点来变化的,因此pivotX和pivotY就是确定这个点的位置。
[b]在一个数轴上(原点为图片的左上角,x轴和y轴的射线分别是向右和向下,我测试过)[/b]:
[color=blue][b]pivotX="50%"[/b][/color] 说明是以图片本身的一半作为x轴的坐标;
[color=blue][b]pivotY="50%"[/b][/color] 说明是以图片本身的一半作为y轴的坐标;
所以圆心点的坐标就是(0.5x,0.5y)。(x y是原图片的长和高)
此效果就是以这个点的y轴为轴,x轴不断减小到0。
[color=blue][b]duration[/b][/color] 是设置的动画执行时间 因为要体现出翻牌的效果 所以不能太慢 也不能一下就翻开
同样也有一个伸展的效果配置文件
[b]front.xml[/b]:
属性都和上面的同理,只不过是以圆心点为轴像两边伸展到完全展开。
到此,这个效果就算完成了。然后来说说我做的过程中的问题吧。
做之前也到网上查了,也有人做了一些多个动画的例子,不过不是我这样的。不说copy的问题,单说代码。举个例子:
alpha 淡入淡出,一个图片我想实现淡入淡出,是完全可以的。无论是用配置文件把两个配置好的alpha放在一个set中还是用代码都放在AnimationSet中都能实现。而反过来要实现淡出淡入用这样的方式就不可以。正常我们都会想,谁放在第一个就先执行,但我测试的时候发现淡出(alpha_out)和淡入(alpaha_in)无论谁先放在AnimationSet中都是先执行淡入动画。只有用Animation的AnimationListener监听器来监听它的执行,然后当淡出动画结束后在执行淡入才可以实现要求的效果。所以我上面的Activit01中为什么要用到AnimationListener来做这个动画。我不知道其他的人发现没发现这个问题。
最后我又以xml的形式又去验证了一下,把两个alpha都放入一个xml中,同样是这个问题,无论谁在上面还是先执行淡入的动画。其他的动画也一样,我都依次做了测试。
那么也就是说:在执行动画的时候,它会先去找fromX的最小值的那个动画无论是alpha的fromAlpha还是scale的fromXScale等等都一样,只要是最小的它就先执行,然后往最大的执行。[b]所以大家在做此类动画的时候一定要注意。[/b]
同样代码奉上,提供下载。
我的环境都是windows xp eclipse3.5 sdk2.2 jdk1.6
之后我就想,我自己做一个看看,如果能做出来更好了。通过我的努力还真让我给弄出来了一个简单的翻牌动画。
简单流程:
这个翻牌其实并不是立体那种翻转,而是通过收缩和伸展来完成的。
有两张图片,一张为背面:
[img]http://dl.iteye.com/upload/attachment/464183/6518f2a2-5ff5-39aa-af99-8a3d9249e8c4.gif[/img]
一张为正面:
[img]http://dl.iteye.com/upload/attachment/464185/f56c45b2-b8f1-344b-b467-374a8a22b6e8.gif[/img]
以扑克牌本身的中心点为轴,两边像中心收缩;
当背面收缩到完全没有后,通过对动画的监听器(AnimationListener)把牌换成正面,在通过伸展动画效果到完全展开。所有动画完成后就形成了一个完整的翻牌动画效果。
[img]http://dl.iteye.com/upload/attachment/464193/31e66516-28e1-3f39-a188-32e32d621b44.jpg[/img][img]http://dl.iteye.com/upload/attachment/464199/47f5edf0-00fa-3a41-b680-7a975fd76b6b.jpg[/img][img]http://dl.iteye.com/upload/attachment/464207/0a815ef3-4e63-3221-8d2a-fab6c85dfba7.jpg[/img][img]http://dl.iteye.com/upload/attachment/464209/a16adad4-5f06-39a6-be6e-199b339d9aaf.jpg[/img][img]http://dl.iteye.com/upload/attachment/464211/af0b2ab4-4bbd-3b23-aed0-be152fc569ab.jpg[/img][img]http://dl.iteye.com/upload/attachment/464215/f2f6fedc-a4ea-3bdd-b03f-77dd1027583c.jpg[/img]
我在做这个的时候,在网上也找过多个动画在一起的例子,但是我发现他们都是互相copy的,没有真正自己仔细研究过的,如果我不是自己研究了一下,也不知道其中的种种。
我先把我完成的放上来,在这个过程中遇到的问题和经验在最后写。
布局文件中,我只放入了一个ImageView控件,用来显示图片的。
[b]main.xml[/b]:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="@+id/imgView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="200px"
android:src="@drawable/back"
/>
</LinearLayout>
这个xml我想不用我过多解释了。
[b]Activit01.java[/b]:
public class Activity01 extends Activity {
/** Called when the activity is first created. */
private ImageView imgView;
//声明一个boolean用来切换背面和正面
private boolean bool = false;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
imgView = (ImageView) findViewById(R.id.imgView);
//给ImageView添加点击事件
imgView.setOnClickListener(new ImgViewListener());
}
class ImgViewListener implements OnClickListener {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
/*也可通过代码来实现 这个是收缩效果
AnimationSet animation = new AnimationSet(true);
ScaleAnimation scale = new ScaleAnimation(1, 0f, 1, 1f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
animation.addAnimation(scale);
animation.setDuration(150);
*/
//通过AnimationUtils得到动画配置文件(/res/anim/back_scale.xml)
Animation animation = AnimationUtils.loadAnimation(Activity01.this, R.anim.back_scale);
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
if(bool){
imgView.setImageResource(R.drawable.back);
bool = false;
}else {
imgView.setImageResource(R.drawable.front);
bool = true;
}
//通过AnimationUtils得到动画配置文件(/res/anim/front_scale.xml),然后在把动画交给ImageView
imgView.startAnimation(AnimationUtils.loadAnimation(Activity01.this, R.anim.front_scale));
}
});
imgView.startAnimation(animation);
}
}
}
那么还需要两个实现动画的配置文件
[b]back_scale.xml[/b]:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<scale
android:fromXScale="1.0"
android:toXScale="0.0"
android:fromYScale="1.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="150"/>
</set>
[color=blue][b]fromXScale[/b][/color] 起始时x坐标的尺寸,设置为1.0说明是整个图片x轴的长度
[color=blue][b]toXScale[/b][/color] 结束时x坐标的尺寸,设置为0.0说明整个图片x轴完全收缩到无
[b]fromYScal[/b]e 起始时y坐标的尺寸,设置为1.0说明是整个图片y轴的长度
[color=blue][b]toYScale[/b][/color] 结束时y坐标的尺寸,设置为1.0说明是在收缩时y轴的长度保持不变
那么他们的变化都是先对于某一点来变化的,因此pivotX和pivotY就是确定这个点的位置。
[b]在一个数轴上(原点为图片的左上角,x轴和y轴的射线分别是向右和向下,我测试过)[/b]:
[color=blue][b]pivotX="50%"[/b][/color] 说明是以图片本身的一半作为x轴的坐标;
[color=blue][b]pivotY="50%"[/b][/color] 说明是以图片本身的一半作为y轴的坐标;
所以圆心点的坐标就是(0.5x,0.5y)。(x y是原图片的长和高)
此效果就是以这个点的y轴为轴,x轴不断减小到0。
[color=blue][b]duration[/b][/color] 是设置的动画执行时间 因为要体现出翻牌的效果 所以不能太慢 也不能一下就翻开
同样也有一个伸展的效果配置文件
[b]front.xml[/b]:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<scale
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="1.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="150"/>
</set>
属性都和上面的同理,只不过是以圆心点为轴像两边伸展到完全展开。
到此,这个效果就算完成了。然后来说说我做的过程中的问题吧。
做之前也到网上查了,也有人做了一些多个动画的例子,不过不是我这样的。不说copy的问题,单说代码。举个例子:
alpha 淡入淡出,一个图片我想实现淡入淡出,是完全可以的。无论是用配置文件把两个配置好的alpha放在一个set中还是用代码都放在AnimationSet中都能实现。而反过来要实现淡出淡入用这样的方式就不可以。正常我们都会想,谁放在第一个就先执行,但我测试的时候发现淡出(alpha_out)和淡入(alpaha_in)无论谁先放在AnimationSet中都是先执行淡入动画。只有用Animation的AnimationListener监听器来监听它的执行,然后当淡出动画结束后在执行淡入才可以实现要求的效果。所以我上面的Activit01中为什么要用到AnimationListener来做这个动画。我不知道其他的人发现没发现这个问题。
最后我又以xml的形式又去验证了一下,把两个alpha都放入一个xml中,同样是这个问题,无论谁在上面还是先执行淡入的动画。其他的动画也一样,我都依次做了测试。
那么也就是说:在执行动画的时候,它会先去找fromX的最小值的那个动画无论是alpha的fromAlpha还是scale的fromXScale等等都一样,只要是最小的它就先执行,然后往最大的执行。[b]所以大家在做此类动画的时候一定要注意。[/b]
同样代码奉上,提供下载。
我的环境都是windows xp eclipse3.5 sdk2.2 jdk1.6