Animation

똘이주인·2021년 8월 9일
0

Animation

연산을 통해서 Animation효과를 만드는 방법을 말한다.

쉽게 풀어서 얘기하면 view의 위치를 이동, 회전, 확대/축소, 투명도 조절을 할 수 있다.

  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>

    uration : 실행 시간

    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)

     태그를 사용하여 여러 애니메이션을 셋뚜셋뚜로 구현할 수도 있다.

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

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

    // 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 를 사용하면, 애니메이션 진행에 가속이 붙어서 처음에는 느리다가 빠르게 진행된다.

0개의 댓글