Android学习第九篇——2D动画翻转

今天我们来讲讲图片的2D旋转，由于我不知道怎么在CSDN这个博客中上传视频，所以具体的效果只能靠大家自己去实现了，在这里我就语言上描述一下了。我把代码上传到这里了，大家可以下载看看，这只是我自己的学习代码，希望可以帮到有需要的和我一样在慢慢学习的朋友 http://download.csdn.net/detail/f_felix/9510945

具体效果：首先我们看到的是一张图片，当我们点击一下以后图片会开始旋转然后消失，而同时另一张图片旋转着出现。

可能上面的描述有点抽象，索性我们直接来看代码

首先是布局代码

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.card2d.MainActivity">
    
    <ImageView
        android:id="@+id/ivA"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/image_a"
        ></ImageView>
    <ImageView
        android:id="@+id/ivB"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/image_b"
        >
        
    </ImageView>
</FrameLayout>

可以看到，这里的根标签使用的是FrameLayout这个布局，为什么呢？？使用了这个布局以后我们可以使得上面的两张图片叠在一起，可能这里又会疑惑为什么我们需要让它们叠在一起，我们不是要让图片旋转吗？这里我先不解释，在后面的代码中我会一起解释。

看了上面的布局以后我们再来看看MainActivity

先看一下定义的参数以及变量

	private ImageView imageA;
	private ImageView imageB;

	private ScaleAnimation sato0 = new ScaleAnimation(1, 0, 1, 1,
			Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT,
			0.5f);
	private ScaleAnimation sato1 = new ScaleAnimation(0, 1, 1, 1,
			Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT,
			0.5f);

前两个是为了获取布局上的两个图片的，而后两个是我们创建的动画

注：这里可能就会有疑问了，我们明明是要旋转怎么这里用的是缩放动画呢，这里我们就来把之前的问题给做出解释，我们这里的旋转其实只是视觉上的旋转，而其实是一个缩放动画，第一张图片以水平中心进行缩放，由1缩到0，然后第二张图片开始由0放大到1，因此我们会在此处使用的是这个定义

ScaleAnimation(float fromX, float toX, float fromY, float toY,int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

之前讲到的1和0就是这个构造函数的前四个参数，再来讲讲后面的参数，pivotType是我们以什么为旋转点，这里我们的旋转点是父容器的中心，也就是1/2的父容器，这样就可以明白后面的参数的意思了吧！

我们继续来看看后面的代码，我直接把代码全贴了

@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initView();
		findViewById(R.id.root).setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				if (imageA.getVisibility() == View.VISIBLE) {
					imageA.startAnimation(sato0);					
				}else{
					imageB.startAnimation(sato0);
				}
			}
		});
	}
	private void showImageA(){
		imageA.setVisibility(View.VISIBLE);
		imageB.setVisibility(View.INVISIBLE);
	}
	private void showImageB(){
		imageB.setVisibility(View.VISIBLE);
		imageA.setVisibility(View.INVISIBLE);
	}
	private void initView(){
		imageA = (ImageView) findViewById(R.id.ivA);
		imageB = (ImageView) findViewById(R.id.ivB);
		showImageA();
		sato0.setDuration(500);
		sato1.setDuration(500);
		
		sato0.setAnimationListener(new AnimationListener() {
			
			@Override
			public void onAnimationStart(Animation animation) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onAnimationRepeat(Animation animation) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onAnimationEnd(Animation animation) {
				if (imageA.getVisibility() == View.VISIBLE) {
					imageA.setAnimation(null);
					showImageB();
					imageB.startAnimation(sato1);
				}else{
					imageB.setAnimation(null);
					showImageA();
					imageA.startAnimation(sato1);
				}
			}
		});
	}

我们这里从initView()开始讲起，在这个初始化函数中我们完成的任务是获取布局上的ImageView，同时我们要让第一张图片显示，第二张图片隐藏，所以调用了showImageA()，然后是设置动画的时间，最后的是监听“缩”这个动画的结束时间，当这个动画结束后我们才开始“放”这个动画，但是我们还需要判断当前显示的是第几张图片。同理在上面的点击中也要判断当前为第几张图片。

到此为止，这个动画我们就讲解完了，我在学习了这个动画后，自己模仿着也弄了一个按钮的翻转，与上述的区别就是，我们的按钮不可能是铺面整个界面的，使用在进行缩放动画的时候旋转的中心就不在是容器的中心，而是这个按钮本身的中心了。因此要修改成这样

private ScaleAnimation sato0 = new ScaleAnimation(1, 0, 1, 1,
			Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
			0.5f);
	private ScaleAnimation sato1 = new ScaleAnimation(0, 1, 1, 1,
			Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
			0.5f);

同样要修改就是点击事件那里，因为我们只有点击到按钮的时候按钮才会翻转，使用我们这里是对按钮设置点击事件，而不是容器设置点击事件，而且还需要给两个按钮都设置才可以，因此修改为这样

bt1.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				bt1.startAnimation(sato0);
			}
		});
		
		bt2.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				bt2.startAnimation(sato0);
			}
		});

这样我们的按钮也可以进行翻转了。

Android学习第九篇——2D动画翻转

猜你喜欢