Android通过动画实现翻牌效果

实现效果如下：

 

实现原理：准备好两张图片，一张作为正面，一张作为背面，当点击图片的正面后，正面的图片的横坐标x进行收缩，直到缩为0%，当正面图片的横坐标x收缩为0之后图片切换为作为背面图片，背面图片的横坐标x由x放大到100%。通过两个动画的交替使用实现翻牌效果

步骤一：定义两个动画文件

收缩动画：back.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000">


    <scale
        android:fromXScale="100%"
        android:fromYScale="100%"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0%"
        android:toYScale="100%"></scale>


</set>

放大动画：font.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000">

    <scale
        android:fromXScale="0%"
        android:fromYScale="100%"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="100%"
        android:toYScale="100%"></scale>


</set>

布局文件：activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">


    <ImageView
        android:id="@+id/ima"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/meinv" />


</LinearLayout>

java实现代码：

package com.contentprovide.liuliu.dabian_gridview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    ImageView ima;

    Animation animation;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ima = (ImageView) findViewById(R.id.ima);


        animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.back);


        ima.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                
//                调用setAnimationListener方法对动画的实现过程进行监听
                animation.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {//当动画结束时需要执行的行为

                        animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.font);
                        ima.setBackgroundResource(R.drawable.ruhua);
                        ima.startAnimation(animation);

                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });
                ima.startAnimation(animation);
            }
        });


    }
}