회전(rotate) 애니메이션 무한반복 시키기

회전(rotate) 애니메이션

무한반복 시키기

ㆍ 이번글에서는 Tween Animation 중 하나인

    회전효과(rotate)를 사용하는데 무한반복

    하는 방법에 대해 알아보도록 하겠습니다.

ㆍ 무한반복이란 말은 애니메이션이 끊기지

    않고 효과가 계속해서 반복된다는 말입니다.

기본적으로

한바퀴 회전하는

방법을 한번 코딩해보겠습니다

예전글에서도 한번

적긴 했었는데

똑같이 해보자면

일단 XML 작성

가운데에 버튼 하나를

놓고 그 버튼을 회전시켜

보도록 하겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tistory.itpangpang.buttonaniamtion.MainActivity">

    <Button
        android:id="@+id/btn"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

이렇게 하면

위와 같은 화면이 나옵니다.

[res]-[anim]-[rotate.xml]

그 다음 회전효과를

주기 위한 animaion을

적어봅니다

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        />
</set>

차례대로 간단히 보자면

<rotate : 회전효과를 주고

duration : 회전을 2초동안 진행합니다

fromDegrees : 0도에서 회전을 시작합니다

toDegrees = 360도 까지 회전을 시킵니다

pivot X,Y = X, Y축 50% 중심에서 시작합니다.

0도부터 360도까지란 말은

풀로 한바퀴 돌리란 말이겠죠

= X, Y 중심축을 기준으로 2초동안 한바퀴 회전시켜라

정도가 될 것 같네요

Java 코드 작성

public class MainActivity extends AppCompatActivity
{
    Button btn;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn = (Button)findViewById(R.id.btn);
        Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate);
        btn.setAnimation(animation);
    }
}

아래 2줄만 보면 될 것 같습니다.

R.anim.rotate에 정의된

애니메이션 효과를 불러온 후에

btn = Button에

그 효과를 set 하겠다는 코드입니다.

효과는 위에서 말한 2초동안 한바퀴 회전시킨다

이겠죠

결과를 보면

2초동안 한바퀴가 슉

돌아가는 것을 확인 할 수 있습니다.

그럼 무한으로 회전시키려면?

몇가지만

추가시켜주면 됩니다

[anim]-[rotate.xml]을

수정해줍니다

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        />
</set>

밑에 2가지가 추가되었습니다.

repeatCount = "infinite"

눈에 보이는 그대로 반복하는

횟수를 무한으로 하겠다는 의미입니다

repeatMode = "restart"

반복 모드를 restart로 하겠다는

의미입니다.

restart 말고도 "reverse"

회전 방향을 바꾸는 모드도

있습니다

먼저 restart 위 코드대로

돌려보면

이번에는 reverse로 수정한 후에

결과를 보겠습니다

두 모드의 차이가

느껴지실 겁니다.

우리가 원하는 무한반복의 효과는

아무래도 1번째가 더 가까운것 같습니다.

근데 첫번째고 두번째고

둘다 뭔가 무한반복이라고 하기에는

살짝 Delay가 있는것 같지 않나요

360도 다 돌고 난 후에

0.5초정도라고 해야되나?

뭔가 맘에 들지 않습니다.

그럼 어떻게 해야되?

위에서 살짝 멈추는 느낌을

제거하기 위해서는

interpolator를 추가시켜야 합니다.

interpolator는 간단하게

애니메이션 시작과 끝에

점점 빠르게, 점점 느리게

아니면 통통튄다던가

이런 효과들을 넣어주는 것입니다

이 중에서 우리는 

Linear Interpolation 효과를

적용시키면 됩니다.

이를 위해서 anim폴더에

xml 하나를 더 추가해줍니다

linear.xml

이라고 하겠습니다

<?xml version="1.0" encoding="utf-8"?>
<linearInterpolator
    xmlns:android="http://schemas.android.com/apk/res/android" />

자 이런식으로

하나 넣어주고

rotate.xml 파일에

마지막으로 추가시켜주면

최종마무리가 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@anim/linear"
    >
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        />
</set>

결과를 보면서 마무리 하겠습니다

끝!