뷰 애니메이션

Compose 사용해 보기
Jetpack Compose는 Android를 위한 권장 UI 도구 키트입니다. Compose에서 애니메이션을 사용하는 방법을 알아보세요.
속성 애니메이션 →

보기 애니메이션 시스템을 사용하여 보기에서 트윈 애니메이션을 실행할 수 있습니다. 트윈 애니메이션에서는 시작 지점, 종료 지점, 크기, 회전 및 기타 애니메이션의 일반적인 측면과 같은 정보를 사용하여 애니메이션을 계산합니다.

트윈 애니메이션은 뷰 객체의 콘텐츠를 대상으로 일련의 간단한 변환(위치, 크기, 회전, 투명도)을 실행할 수 있습니다. 따라서 TextView 객체가 있으면 텍스트를 이동, 회전, 증가 또는 축소시킬 수 있습니다. 배경 이미지가 있으면 텍스트와 함께 배경 이미지가 변환됩니다. animation package에서는 트윈 애니메이션에서 사용되는 모든 클래스를 제공합니다.

일련의 애니메이션 명령어를 통해 XML 또는 Android 코드로 정의되는 트윈 애니메이션을 정의합니다. 레이아웃을 정의할 때, 애니메이션을 하드 코딩하는 것보다 읽기 쉽고 재사용 가능하며 스왑 가능하므로 XML 파일을 사용하는 것이 좋습니다. 아래 예에서는 XML을 사용합니다. XML 대신 애플리케이션 코드에서 애니메이션을 정의하는 방법에 관한 자세한 내용은 AnimationSet 클래스 및 기타 Animation 서브클래스를 참조하세요.

애니메이션 안내는 발생할 변환, 발생 시기, 적용하는 데 걸리는 시간을 정의합니다. 변환은 순차 또는 동시에 실행할 수 있습니다. 예를 들어 TextView의 콘텐츠를 왼쪽에서 오른쪽으로 이동한 다음 180도로 회전하거나 텍스트를 동시에 이동 및 회전할 수 있습니다. 각 변환에서는 변환과 관련된 매개변수 조합(크기 변경을 위한 시작 크기 및 종료 크기, 회전을 위한 시작 각도와 종료 각도 등) 및 일반적인 매개변수 조합(예: 시작 시간 및 지속 기간)을 사용합니다. 여러 변환을 동시에 실행하려면 시작 시간을 동일하게 지정하고, 변환을 순차적으로 지정하고, 시작 시간과 이전 변환의 지속 기간을 더한 값을 계산합니다.

애니메이션 XML 파일은 Android 프로젝트의 res/anim/ 디렉터리에 있습니다. 파일에는 단일 루트 요소가 있어야 합니다. 이 요소는 단일 <alpha>, <scale>, <translate>, <rotate>, 보간기 요소 또는 이러한 요소의 그룹 (다른 <set>를 포함할 수 있음)을 보유하는 <set> 요소일 수 있습니다. 기본적으로 모든 애니메이션 명령이 동시에 적용됩니다. 순차적으로 실행하려면 아래 예와 같이 startOffset 속성을 지정해야 합니다.

ApiDemos 중 하나에서 다음 XML을 사용하여 View 객체를 늘린 후 동시에 회전 및 회전합니다.

<set android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set android:interpolator="@android:anim/decelerate_interpolator">
        <scale
           android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400"
           android:fillBefore="false" />
        <rotate
           android:fromDegrees="0"
           android:toDegrees="-45"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400" />
    </set>
</set>

화면 좌표 (이 예에서는 사용되지 않음)는 왼쪽 상단 모서리에 있는 (0,0)이며 오른쪽 아래로 갈수록 증가합니다.

pivotX와 같은 일부 값은 객체 자체를 기준으로 또는 상위 요소를 기준으로 지정할 수 있습니다. 원하는 상황에 맞는 형식을 사용하세요(상위 요소를 기준으로 50%인 경우 '50', 자체를 기준으로 50%인 경우 '50%').

Interpolator를 할당하여 시간에 따른 변환 적용 방법을 판별할 수 있습니다. Android에는 다양한 속도 곡선을 지정하는 여러 Interpolator 서브클래스가 있습니다. 예를 들어 AccelerateInterpolator는 변환에 느리게 시작하여 속도를 높이도록 지시합니다. 각각에는 XML에 적용할 수 있는 속성 값이 있습니다.

이 XML이 프로젝트의 res/anim/ 디렉터리에 hyperspace_jump.xml로 저장되면 다음 코드에서 이 XML을 참조하고 레이아웃의 ImageView 객체에 적용합니다.

Kotlin

AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation ->
    findViewById<ImageView>(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)
}

자바

ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);

startAnimation() 대신 Animation.setStartTime()로 애니메이션의 시작 시간을 정의한 다음 View.setAnimation()로 View에 애니메이션을 할당할 수 있습니다.

XML 구문, 사용 가능한 태그 및 속성에 관한 자세한 내용은 애니메이션 리소스를 참조하세요.

참고: 애니메이션이 이동하거나 크기가 조절되는 방식과 관계없이 애니메이션이 포함된 뷰의 경계가 이에 맞게 자동으로 조정되지 않습니다. 그래도 애니메이션은 여전히 보기의 경계를 벗어나 그려지며 잘리지 않습니다/ 그러나 애니메이션이 상위 View의 경계를 초과하면 자르기가 발생합니다.