[Android Animation] 안드로이드 애니메이션 기본 예제 (투명, 확장, 이동, 회전)

안드로이드 개발 공부

 

Android Animation

 

안드로이드 트윈 애니메이션 기본 예제

 

 

- 목차 -

 

1. 투명 (alpha)

2. 확장 (scale)

3. 이동 (tranlsate)

4. 회전 (rotate)

 

5. 복합 세트 (set)

 

6. interpolator

 

 

 

 

*이전 포스팅 - 애니메이션 만들고 실행하기

2020/05/22 - [Android 개발/android :: 공부] - [Android Animation] 안드로이드 애니메이션 기본 사용법 (트윈 애니메이션)

 

 

 

 

1. 투명 애니메이션 (alpha)

 

alpha값을 설정하여,

대상의 투명도의 변화를 애니메이션으로 구현할 수 있다.

 

투명 상태에서 1초 동안 서서히 모습이 드러나는 애니메이션

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:duration="1000"
    android:fromAlpha="0.0"
    android:toAlpha="1.0">
</alpha>

 

duration : 실행 시간

 

fromAlpha : 시작 투명도 (0 = 완전히 투명)

toAlpha : 끝 투명도 (1.0 = 완전히 보임)

 

물론 Alpha 값은 0 ~ 1.0 사이에서 조절 가능하다.

 

 

 

 

 

2. 확장 애니메이션 (scale)

 

scale값을 설정하여

대상의 크기를 확대하거나 축소하는 애니메이션을 구현할 수 있다.

 

1초 동안 크기 0에서 2배 크기로 확대되는 애니메이션

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:duration="1000"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromXScale="0.0"
    android:toXScale="2.0"
    android:fromYScale="0.0"
    android:toYScale="2.0">
</scale>

 

duration : 실행 시간

 

pivotX : X축 값 (50% = X축 중앙)

pivotY : Y축 값 (50% = Y축 중앙)

 

fromXScale : 시작 X축 크기 (0.0 = 0)

toXScale : 끝 X축 크기 (2.0 = 두 배 크기)

 

fromYScale : 시작 Y축 크기 (0.0 = 0)

toYScale : 끝 Y축 크기 (2.0 = 두 배 크기)

 

 

 

 

3. 이동 애니메이션 (translate)

 

X, Y Delta값을 설정하여

대상을 상하좌우로 이동하는 애니메이션을 구현할 수 있다.

 

1초 동안 동남쪽으로 이동하는 애니메이션

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:duration="1000"
    android:fromXDelta="0"
    android:toXDelta="100%"
    android:fromYDelta="0"
    android:toYDelta="200%">
</translate>

 

duration : 실행 시간

 

fromXDelta : 시작 X축 값 (0 = 처음 자리)

toXDelta : 끝 X축 값 (100% = 오른쪽으로 100만큼 이동)

 

fromYDelta : 시작 Y축 값 (0 = 처음 자리)

toYDelta : 끝 Y축 값 (200% = 아래쪽으로 200만큼 이동)

 

 

 

 

4. 회전 애니메이션 (rotate)

회전~ 회오리~ 슛~ 이 아니라

 

X, Y pivot 값과, Degree값을 설정하여

대상을 회전하는 애니메이션을 구현할 수 있다.

 

1초 동안 360도 회전하는 애니메이션

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:duration="1000"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromDegrees="0"
    android:toDegrees="360">
</rotate>

 

duration : 실행 시간

 

pivotX : X축 중심값 (50% = X축 중앙)

pivotY : Y축 중심값 (50% = Y축 중앙)

 

fromDegrees : 시작 각도 (0 : 회전 0도)

toDegrees : 끝 각도 (360 : 회전 360도)

 

 

 

 

 

 

5. 복합 세트 애니메이션 (set)

 

<set> 태그를 사용하여

여러 애니메이션을 셋뚜셋뚜로 구현할 수도 있다.

 

애니메이션이 동시에 실행된다.

예상하던 결과와 다를 수 있기 때문에 세심한 작업이 필요하다.

 

1초 동안 투명에서 불투명으로 되면서, 크기가 2배로 커지고,

동남쪽으로 이동하면서, 360도 도는 애니메이션

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
    <scale
        android:duration="1000"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale="0.0"
        android:toXScale="2.0"
        android:fromYScale="0.0"
        android:toYScale="2.0" />
    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:toXDelta="100%"
        android:fromYDelta="0"
        android:toYDelta="200%"/>
    <rotate
        android:duration="1000"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromDegrees="0"
        android:toDegrees="360">
    </rotate>
</set>

 

 

 

 

6. interpolator

 

각 애니메이션은 interpolator 값을 설졍할 수 있다.

interpolator는 한글로 번역하면 더 어려워진다.

간단히 부속 속성이라고 보면 편하다.

 

예를 들어 가장 기본인

linear_interpolator 를 사용하면

애니메이션 등속으로 진행되고

 

accelerate_interpolator 를 사용하면

애니메이션 진행에 가속이 붙어서 처음에는 느리다가 빠르게 진행된다.

 

 

android:interpolator="@android:anim/ 

까지 입력하고

 

inter 까지만 쳐도

다음 순서대로 자동완성이 뜬다.

 

linear_interpolator : 등속 (일정한 속도로 진행)

accelerate_interpolator : 가속 (느리다가 빨라짐)

anticipate_interpolator : 기대? (시작시 조금 당겼다가 시작)

bounce_interpolator : 바운스 (마지막에 약간 통통 튐)

cycle_interpolator : 순환 (진행이 끝나면 다시 역재생)

decelerate_interpolator : 감속 (빠르다가 느려짐)

overshoot_interpolator : 초과 (약간 더 진행되었다가 돌아옴)

 

accelerate_decelerate_interpolator : 가속+감속

anticipate_overshoot_interpolator : 기대?+초과