Android应用中的卡片翻转效果

Question

现在，我正在设计一款用户应该在限定时间内翻转卡片的游戏。但是，我正在努力的主要是确保所有卡都可以翻转。现在，只能翻转最左上角的牌。因为我刚刚开始，我相当缺乏经验。如果你能告诉我如何翻转每张卡而不是只有一张卡，我将不胜感激。

Java文件：

import android.animation.AnimatorInflater;
import android.animation.AnimatorSet;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

ImageView imgFront;
ImageView imgBack;



boolean isBackVisible = false; // Boolean variable to check if the back image is visible currently

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

    imgFront = (ImageView)findViewById(R.id.imgFront);
    imgBack = (ImageView)findViewById(R.id.imgBack);


    final AnimatorSet setRightOut = (AnimatorSet) AnimatorInflater.loadAnimator(getApplicationContext(),
            R.animator.flight_right_out);

    final AnimatorSet setLeftIn = (AnimatorSet) AnimatorInflater.loadAnimator(getApplicationContext(),
            R.animator.flight_left_in);

    imgFront.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if(!isBackVisible){
                setRightOut.setTarget(imgFront);
                setLeftIn.setTarget(imgBack);
                setRightOut.start();
                setLeftIn.start();
                isBackVisible = true;
            }
            else{
                setRightOut.setTarget(imgBack);
                setLeftIn.setTarget(imgFront);
                setRightOut.start();
                setLeftIn.start();
                isBackVisible = false;
            }
        }
    });


}






@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}
}

MainActivity.xml：

 <RelativeLayout
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_marginTop="80dp">

    <ImageView
    android:id="@+id/imgFront"
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:src="@drawable/front"
    android:layout_alignTop="@+id/imgBack"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

    <ImageView
    android:id="@+id/imgBack"
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:alpha="0"
    android:src="@drawable/back"
        android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

</RelativeLayout>

<RelativeLayout
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_marginTop="80dp"
    android:layout_marginLeft="130dp">

    <ImageView
        android:id="@+id/imgFront"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:src="@drawable/front"
        android:layout_alignTop="@+id/imgBack"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:clickable="false" />

    <ImageView
        android:id="@+id/imgBack"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:alpha="0"
        android:src="@drawable/back"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:clickable="false" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_marginTop="80dp"
    android:layout_marginLeft="260dp" >

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:src="@drawable/front"
        android:layout_alignTop="@+id/imageView4"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:alpha="0"
        android:src="@drawable/back"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_marginTop="180dp" >

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:src="@drawable/front"
        android:layout_alignTop="@+id/imageView6"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:alpha="0"
        android:src="@drawable/back"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_marginTop="180dp"
    android:layout_marginLeft="130dp" >

    <ImageView
        android:id="@+id/imageView7"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:src="@drawable/front"
        android:layout_alignTop="@+id/imageView8"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:id="@+id/imageView8"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:alpha="0"
        android:src="@drawable/back"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_marginTop="180dp"
    android:layout_marginLeft="260dp" >

    <ImageView
        android:id="@+id/imageView9"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:src="@drawable/front"
        android:layout_alignTop="@+id/imageView10"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:id="@+id/imageView10"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:alpha="0"
        android:src="@drawable/back"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_marginTop="280dp" >

    <ImageView
        android:id="@+id/imageView11"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:src="@drawable/front"
        android:layout_alignTop="@+id/imageView12"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:id="@+id/imageView12"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:alpha="0"
        android:src="@drawable/back"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_marginTop="280dp"
    android:layout_marginLeft="130dp" >

    <ImageView
        android:id="@+id/imageView13"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:src="@drawable/front"
        android:layout_alignTop="@+id/imageView14"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:id="@+id/imageView14"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:alpha="0"
        android:src="@drawable/back"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_marginTop="280dp"
    android:layout_marginLeft="260dp" >

    <ImageView
        android:id="@+id/imageView15"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:src="@drawable/front"
        android:layout_alignTop="@+id/imageView16"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:id="@+id/imageView16"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:alpha="0"
        android:src="@drawable/back"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_marginTop="380dp" >

    <ImageView
        android:id="@+id/imageView17"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:src="@drawable/front"
        android:layout_alignTop="@+id/imageView18"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:id="@+id/imageView18"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:alpha="0"
        android:src="@drawable/back"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_marginTop="380dp"
    android:layout_marginLeft="130dp" >

    <ImageView
        android:id="@+id/imageView19"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:src="@drawable/front"
        android:layout_alignTop="@+id/imageView20"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:id="@+id/imageView20"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:alpha="0"
        android:src="@drawable/back"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_marginTop="380dp"
    android:layout_marginLeft="260dp" >

    <ImageView
        android:id="@+id/imageView21"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:src="@drawable/front"
        android:layout_alignTop="@+id/imageView22"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:id="@+id/imageView22"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:alpha="0"
        android:src="@drawable/back"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>