[Android] 애니메이션 사용법(1.종류)

- Android에는 원하는 애니메이션 유형에 따라 다양한 애니메이션 API가 있습니다.

- UI에 모션을 추가할 수 있는 다양한 방법.

 

1.비트맵 애니매이션

(드로어블 그래픽 애니메이션화)

 

2.UI 가시성 및 모션 애니메이션

 

3.물리학 기반 모션

 

4.레이아웃 변경 애니메이션

 

 

 

 

 

 

 

 

 

 

 

 

 

- 참고 -

- 애니메이션을 위한 XML파일은 [/res/anim]폴더의 밑에 두어야 한다.

 

- 확장자를 xml로 해야한다.

 

- 각각의 애니메이션 액션이 갖는 공통적인 속성들이 있는 데 그중에 

시작 시간(startOffset), 지속 시간(duration)이 있다.

크기 변경을 위한 X,Y축(privotX), (privotY) - 좌표의 중심점,

시작할 때의 확대,축소 비율(fromXScale), (fromYScale) - 시작할 때 X,Y축,

끝날 때의 확대,축소 비율(toXscale), (toYscale) - 끝나는 시점의 X,Y축,

반복 횟수(repeatCount) -    참고(-1이면 무한반복)

반복시 다시 생성될 때 방향(repeatMode) -    참고(repeatMode 값"reverse"주면 반대방향으로 실행됨)

 

- 위치 이동은 다른 거 사용하는거 같음

시작위치 -> (fromXDelta), (fromYDelta)

종료위치 -> (toXDelta), (toYDelta)

 

- 회전도 다른 거 사용하는거 같음

한 바퀴 회전 -> (fromDegrees 값"0") 주고 (toDegrees 값"360")주면 된다 

시계 반대 방향으로 회전하고 싶으면 (toDegrees 값"-360")주면 된다

 

- 투명도

알파 값 범위 -> 0.0~1.0까지

0.0이면 완전 투명한 상태(아애 보이지 않음)

1.0이면 완전 보이는 상태

(fromAlpha), (toAlpha)

 

 

구분	이름		설명
대상	뷰	View	View는 위젯이나 Layout을 모두 포함한다. 예를 들어, TextView나 LinearLayout에 애니메이션을 적용할 수 있다.
	그리기 객체	Drawable	다양한 Drawable에 애니메이션을 적용할 수 있다. ShapeDrawable은 캔버스에 그릴 도형을 지정할 수 있으며, BitmapDrawable은 비트맵 이미지를 지정할 수 있다.
효과	위치 이동	Translate	Translate로 정의되는 액션은 대상의 위치를 이동하기 위해 사용되는 효과
	확대/축소	Scale	Scale로 정의되는 액션은 대상의 크기를 크게 하거나 작게 하기위해 사용되는 효과
	회전	Rotate	Roate로 정의되는 액션은 대상의 회전하기 위해 사용되는 효과
	투명도	Alpha	Alpha로 정의되는 액션은 대상의 투명도를 조절하는데 사용되는 효과

 

- <set>태그

XML로 저장하는 애니메이션 액션은 여러 개의 효과를 하나로 묶어 동시에 수행되도록 만들 수 있으며 이때는 <set>태그를 사용하여 여러 애니메이션 액션을 포함시킨다.

애니메이션 집합(Animation Set)으로 표현되는 여러 애니메이션의 묶음은 동시에 수행될 수도 있고 시작 시간의 설정에 따라 연속적으로 수행될 수도 있다.

다음은 두개의 스케일 효과를 하나의 애니메이션 액션으로 정의한 것이다. 

(-사용법-  0번을 한번 보면됨)

 

 

 

 

 

- 사용법 -

0.크기가 두배로 커졌다가 다시 작아지는 애니메이션을 연속적으로 수행하도록 한다.

<set>태그로 묶어진 두 개의 스케일 애니메이션은 첫 번째 것이 2.5초 동안 버튼을 두배로 확대하고 그 후에 2.5초 동안 반으로 축소하는 효과를 보여준다.

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/linear_interpolator">
     <scale   1번째-확대/축소 애니메이션 정의
          android:duration="2500"     지속 시간
          android:pivotX="50%"        좌표의 중심점
          android:pivotY="50%"
          android:fromXScale="1.0"     시작할때 위치
          android:fromYScale="1.0"
          android:toXScale="2.0"       끝날때 취
          android:toYScale="2.0" />
     <scale  2번째-2.5초 후에 시작할 확대/축소 애니메이션 액션 정의
          android:startOffset="2500"    시작 시간
          android:duration="2500"       지속 시간
          android:pivotX="50%"
          android:pivotY="50%"
          android:fromXScale="1.0"
          android:fromYScale="1.0"
          android:toXScale="0.5"
          android:toYScale="0.5" />    
 </set>

 

1.이미지 키웠다 줄이는 동작

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/linear_interpolator">
     <scale
         android:fromXScale="1.0"
         android:toXScale="3.0"
         android:fromYScale="1.0"
         android:toYScale="3.0"
         android:pivotX="50%"
         android:pivotY="50%"
         android:duration="500"
         android:repeatCount="1"
         android:repeatMode="reverse" />
 </set>

 

2.서서히 작아지면서 사라지게 하는 효과

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:zAdjustment="top" >
    <scale
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%p"
        android:pivotY="50%p"
        android:toXScale=".5"
        android:toYScale=".5" />
     
    <alpha
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromAlpha="1.0"
        android:toAlpha="0" />
</set>

 

3.아래는 scale 요소를 두 개 사용해봤음,(XML 은 순서대로 적용이 된다)

첫번째 scale 은 가로 부분을 줄입니다. 

그렇게 줄어든 이미지를 다음 scale 요소 값으로 세로로 줄여서 사라지게 한다. 

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="false"
    android:shareInterpolator="false" >
 
    <scale
        android:duration="500"
        android:fillAfter="true"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.05"
        android:toYScale="1.0" />
     
    <scale
        android:duration="500"
        android:fillAfter="true"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="500"
        android:toXScale="1.0"
        android:toYScale="0.05" />
 
</set>

 

4.이미지를 회전시키면서 작아질 때 흐려진다. 사라지게 하는 애니메이션을 좀더 그럴싸 하게 만든 XML 입니다.

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="false"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:shareInterpolator="true" >
 
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
 
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />
 
    <scale
        android:fillAfter="true"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.0"
        android:toYScale="0.0" />
 
</set>

 

5.대상의 크기만큼 왼쪽으로 이동시키는 액션을 XML로 정의

fromXDelta 속성이 0%이므로 시작 위치의 X좌표는 원래의 위치의 X 좌표가 된다.

toXDelta 속성이 -100%이므로 대상의 크기만큼 왼쪽으로 이동하게 된다.

지속시간(duration)->20000(20초)

repeatCount -> -1 이니깐 무한반복

fillAfter -> true 이면 애니메이션이 끝난 후에 대상이 원래의 위치로 돌아오는 것을 막기 위해서

<translate xmlns:android="http://schemas.android.com/apk/res/android"
         android:fromXDelta="0%p"
         android:toXDelta="-100%p"
         android:duration="2000"
         android:repeatCount="-1"
         android:fillAfter="true" />

 

6.대상의 중심을 회전축으로 하여 10초 동안 시계방향으로 한바퀴 회전시키는 액션을 XML로 정의

    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="0"
        android:pivotX="50%"   회전의 중심을 하고 싶으면
        android:pivotY="50%"  회전의 중심을 하고 싶으면
        android:duration="10000"
        android:toDegrees="360" />

 

7.10초 동안 대상을 천천히 보이게 만드는 액션을 XML로 정의

    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="10000" />

 

 

 

 

 

위에 애니메이션들을 위한 XML파일은 [/res/anim]폴더의 밑 만들었으면!!

 

로딩하고 셋팅하고

실행하고 버튼 누르면 

애니메이션 정의 된 대로 잘 작동한다. (java코드)

~.lodaAnimation(~);                    -> 애니메이션 액션 참조

이미지뷰.startAnimation(애니메션); -> 이미지뷰에다가 애니메이션 설정