안드로이드 스튜디오 카드 뒤집기 애니메이션 만들기 [Android Studio]

카드를 이용한 애플리케이션에서 카드를 누르면 카드가 넘어가는 애니메이션이 들어가면서 카드가 뒤집히는 것을 볼 수 있습니다.

​

이때 사용되는 카드 뒤집기 애니메이션은 사용자 경험을 향상하는데 큰 역할을 할 수 있습니다.

​그래서 오늘은 안드로이드 스튜디오에서 animate()를 이용한 카드 뒤집기 애니메이션을 만들어보도록 하도록 하겠습니다.

 

 

| 1. 카드 뒤집기 이미지 만들기

​

우선 카드 뒤집기 애니메이션을 만들기 전 카드의 앞면과 뒷면의 이미지가 필요하기 때문에 만들어주도록 합니다.

카드가 뒤집힐 때 이 앞면과 뒷면의 이미지의 크기가 같아야 하며 카드가 뒤집힐 때 서로 교체되어 보여야 합니다.

 

 

| 2. 카드 뒤집기 레이아웃 구성

​

이제 카드 뒤집기에 쓰일 imageView와 뒤집기를 실행시킬 버튼으로 이루어진 레이아웃을 구성해 줍니다.

 

 

//activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/card_back2" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

| 3. 카드 뒤집기 코드 작성

​

이제 본격적으로 버튼을 눌렀을 때 imageView에 animate()를 이용하여 카드 이미지가 회전하는 듯한 애니메이션 효과를 부여하도록 할 것입니다.

//MainActivity.java

public class MainActivity extends AppCompatActivity {
    Button button;
    ImageView imageView;

    int check = 0; // 뒷면
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button = findViewById(R.id.button);
        imageView = findViewById(R.id.imageView);

        float scale = getApplicationContext().getResources().getDisplayMetrics().density;
//xml에서 쓰이는 dp단위에 쓰이는 곱하기 인자를 불러와 디스플레이에 대한 일반 정보 설명을 담고 있습니다.
        float distance = imageView.getCameraDistance() * (scale + (scale / 2));
//이미지뷰가 회전할 때에 부분적으로 잘리는 것을 방지하기 위하여 카메라의 거리 값을 부여한 것입니다.



        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                imageView.setCameraDistance(distance);
                imageView.animate().withLayer()
                        .rotationY(90)
                        .setDuration(150)
                        .withEndAction(new Runnable() {
                            @Override
                            public void run() {
                                if(check == 0){
                                    //뒷면이였던 상태였으므로 카드 이미지 회전을 주고 card_front로 앞면 이미지를 띄움
                                    imageView.setImageResource(R.drawable.card_front);
                                    check = 1;
                                }else if(check == 1){
                                    //앞면이였던 상태였으므로 카드 이미지 회전을 주고 card_back로 뒷면 이미지를 띄움
                                    imageView.setImageResource(R.drawable.card_back);
                                    check = 0;
                                }
                                imageView.setRotationY(-90);
                                imageView.animate().withLayer()
                                        .rotationY(0)
                                        .setDuration(250)
                                        .start();

                            }
                        }).start();
            }
        });

    }
}

 

float scale = getApplicationContext().getResource().getDisplayMetrics().density;에서

xml에서 쓰이는 dp 단위에 쓰이는 곱하기 인자를 불러와 디스플레이에 대한 일반 정보 설명을 담고 있습니다.

 

float distance = imageView.getCameraDistance()*(scale+(scale/2));에서는

이미지 뷰가 회전할 때에 부분적으로 잘리는 것을 방지하기 위하여 카메라의 거리 값을 부여한 것입니다.

 

animate().withLayer().rotationY(값)을 이용하여 카드를 회전시키고 .withEndAction()을 이용해 카드 이미지가 회전을 마무리했을 때 실행할 코드를 작성하여 상황에 따른 카드 이미지를 띄워주시면 됩니다.

 

그리고 button.setOnClickListener(---)를 이용하여 애니메이션을 시작하기 때문에

뒤집기 버튼을 추가하고, 버튼을 클릭했을 때 애니메이션이 시작하도록 코드를 작성해 줍니다.