Android에서 부드러운 이미지 회전 애니메이션을 구현하는 방법

이 예제에서는 Android 앱에서 이미지를 부드럽게 회전시키는 방법을 단계별로 알아봅니다.

1단계: 새 프로젝트 생성

Android Studio에서 File → New Project로 이동하여 새 프로젝트를 생성하고, 필요한 모든 세부 정보를 입력해 프로젝트 설정을 완료합니다.

2단계: 레이아웃 파일 작성

다음 코드를 res/layout/activity_main.xml에 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android"
    android:id = "@+id/parent"
    xmlns:tools = "https://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity"
    android:gravity = "center"
    android:orientation = "vertical">
    <TextView
        android:id = "@+id/text"
        android:textSize = "18sp"
        android:textAlignment = "center"
        android:text = "rorate image"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content" />
    <ImageView
        android:id = "@+id/rotateImage"
        android:layout_width = "match_parent"
        android:layout_marginTop = "10dp"
        android:layout_height = "wrap_content"
        android:src = "@mipmap/ic_launcher"
        android:layerType = "software" />
</LinearLayout>

위 코드에서는 TextView와 ImageView를 배치했습니다. TextView를 클릭하면 이미지가 반시계 방향으로 회전합니다.

3단계: MainActivity 코드 작성

다음 코드를 src/MainActivity.java에 추가합니다.

package com.example.andy.myapplication;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
    int view = R.layout.activity_main;
    TextView text;
    ImageView image;
    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(view);
        text = findViewById(R.id.text);
        image = findViewById(R.id.rotateImage);
        text.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                RotateAnimation rotate = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                rotate.setDuration(5000);
                rotate.setInterpolator(new LinearInterpolator());
                image.startAnimation(rotate);
            }
        });
}
}

핵심 코드 설명

위 코드에서는 Android에서 기본으로 제공되는 RotateAnimation 클래스를 사용했습니다. 이미지를 회전시키는 핵심 코드는 다음과 같습니다.

RotateAnimation rotate = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotate.setDuration(5000);
rotate.setInterpolator(new LinearInterpolator());
image.startAnimation(rotate);

• RotateAnimation(0, 180, ...): 0도에서 180도까지 회전하며, 회전 중심점을 이미지 자신의 중앙(0.5f)으로 지정합니다.
• setDuration(5000): 회전 애니메이션이 완료되기까지 걸리는 시간을 5000밀리초(5초)로 설정합니다.
• LinearInterpolator(): 일정한 속도로 부드럽게 회전하도록 보간기를 설정합니다.
• startAnimation(rotate): ImageView에 회전 애니메이션을 시작합니다.

실행 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 Android 모바일 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 아이콘을 클릭하세요. 실행 옵션에서 모바일 기기를 선택하면 기기 화면에 초기 화면이 표시됩니다.

초기 화면에서 TextView를 클릭하면 아래와 같이 이미지가 부드럽게 회전하는 것을 확인할 수 있습니다.