[Android] 안드로이드 RotateAnimation 함수 이용 이미지 회전

이미지를 회전시키기 위한 RotateAnimation() 함수 입니다.  parameter를 2개, 4개 또는 6개를 포함한 함수를 제공 하는데 회전 중심을 어디로 어떻게 설정 하는가에 따라 선택해서 사용 합니다.  

1. RotateAnimation() 함수

 

여기서는 중앙을 중심으로 회전을 시키는 parameter 6개의 함수를 사용 합니다.

 

public RotateAnimation (float fromDegrees,

                float toDegrees,

                int pivotXType,

                float pivotXValue,

                int pivotYType,

                float pivotYValue)

Type	Parameter	설명
float	fromDegrees	회전을 시작하는 각도
float	toDegrees	회전을 종료하는 각도
int	pivotXType	x축 설정 Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_PARENT
float	pivotXValue	x축 위치. 0은 좌측 끝, 1.0은 우측 끝, 0.5는 중앙
int	pivotYType	y축 설정. Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_PARENT.
float	pivotYValue	y축 위치. 0은 상단 끝, 1.0은 하단 끝, 0.5는 중앙

2. layout

 

회전에 사용할 이미지를 대충 잘라서 res/drawable에 추가해 줍니다.

왼쪽 회전, 오른쪽 회전을 위한 버튼 2개를 추가하고 회전시킬 이미지를 하단에 추가 합니다.

<Button
    android:id="@+id/btn_left"
    android:text="left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="10dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/btn_right"
    android:text="right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="250dp"
    android:layout_marginTop="10dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/rotImage"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/rotateimage"
    android:layout_marginTop="100dp"
    app:layout_constraintTop_toTopOf="parent"/>

이런 모양이 되겠죠?

3. 구현

 

3.1 버튼 기능 구현

이미지 정의와 버튼 클릭 이벤트를 이용하여 기능을 구현 합니다. 버튼을 클릭 하면 10도씩 시계방향, 반시계 방향으로 회전 하도록 testRotation() 함수를 호출하여 줍니다.

Button btnLeft = (Button)findViewById(R.id.btn_left);
Button btnRight = (Button)findViewById(R.id.btn_right);

mImageView =  (ImageView)findViewById(R.id.rotImage);

btnLeft.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        testRotation(nBefore - 10);
        Toast.makeText(MainActivity.this, "Left", Toast.LENGTH_SHORT).show();
    }
});

btnRight.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        testRotation(nBefore + 10);
        Toast.makeText(MainActivity.this, "Right", Toast.LENGTH_SHORT).show();
    }
});

3.2 이미지 회전

 

받아온 값을 RotateAnimation()에 대입하여 이미지를 회전 시켜 줍니다.

public void testRotation(int i) {
    RotateAnimation ra = new RotateAnimation(
            nBefore,
            i,
            Animation.RELATIVE_TO_SELF, 0.5f,
            Animation.RELATIVE_TO_SELF, 0.5f
    );
    ra.setDuration(250);
    ra.setFillAfter(true);
    mImageView.startAnimation(ra);
    nBefore = i;
}

4. 프로젝트 생성

4.1 프로젝트 만들기

 

RotateAnimation 으로 프로젝트를 생성합니다.

Activity는 empty를 선택해 줍니다.

 

나머지는 그냥 Next를 눌러줍니다.

 

 

4.2 전체 소스코드

 

- activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <Button
        android:id="@+id/btn_left"
        android:text="left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_right"
        android:text="right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="250dp"
        android:layout_marginTop="10dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/rotImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/rotateimage"
        android:layout_marginTop="100dp"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

- MainActivity.java

package copycoding.tistory.com.rotateanimation;

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

public class MainActivity extends AppCompatActivity {

    private ImageView mImageView;
    private int nBefore = 0;

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

        Button btnLeft = (Button)findViewById(R.id.btn_left);
        Button btnRight = (Button)findViewById(R.id.btn_right);

        mImageView =  (ImageView)findViewById(R.id.rotImage);

        btnLeft.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                testRotation(nBefore - 10);
                Toast.makeText(MainActivity.this, "Left", Toast.LENGTH_SHORT).show();
            }
        });

        btnRight.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                testRotation(nBefore + 10);
                Toast.makeText(MainActivity.this, "Right", Toast.LENGTH_SHORT).show();
            }
        });

    }

    public void testRotation(int i) {
        RotateAnimation ra = new RotateAnimation(
                nBefore,
                i,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f
        );
        ra.setDuration(250);
        ra.setFillAfter(true);
        mImageView.startAnimation(ra);
        nBefore = i;
    }
}

5. 결과

 

상단에 있는 Left, Right 버튼을 누르면 이미지가 10도씩 회전합니다.