이 페이지는 Cloud Translation API를 통해 번역되었습니다.

애니메이션 리소스

애니메이션 리소스는 다음 두 가지 유형의 애니메이션 중 하나를 정의할 수 있습니다.

속성 애니메이션

설정된 기간 동안 객체의 속성 값을 Animator로 수정하여 애니메이션을 만듭니다.

뷰 애니메이션

뷰 애니메이션 프레임워크로 만들 수 있는 애니메이션에는 두 가지 유형이 있습니다.

트윈 애니메이션: Animation을 사용해 단일 이미지에 일련의 변환을 진행하여 애니메이션을 만듭니다.
프레임 애니메이션: AnimationDrawable을 사용해 연속된 이미지를 순서대로 표시하여 애니메이션을 만듭니다.

속성 애니메이션

XML로 정의된 애니메이션으로, 설정된 시간 경과에 따른 타겟 객체의 속성(예: 배경 색상이나 알파 값)을 수정합니다.

파일 위치:

res/animator/filename.xml
파일 이름은 리소스 ID로 사용됩니다.

컴파일된 리소스 데이터 유형:

ValueAnimator, ObjectAnimator 또는 AnimatorSet의 리소스 포인터

리소스 참조:

Java 기반 코드 또는 Kotlin 코드의 경우: R.animator.filename
XML의 경우: @[package:]animator/filename

문법:

<set
  android:ordering=["together" | "sequentially"]>

    <objectAnimator
        android:propertyName="string"
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["restart" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <animator
        android:duration="int"
        android:valueFrom="float | int | color"
        android:valueTo="float | int | color"
        android:startOffset="int"
        android:repeatCount="int"
        android:repeatMode=["restart" | "reverse"]
        android:valueType=["intType" | "floatType"]/>

    <set>
        ...
    </set>
</set>

파일에는 단일 루트 요소로 <set>, <objectAnimator> 또는 <valueAnimator>가 있어야 합니다. 애니메이션 요소를 <set> 요소 내에서 다른 <set> 요소와 함께 그룹화할 수 있습니다.

요소:

<set>

다른 애니메이션 요소(<objectAnimator>, <valueAnimator> 또는 기타 <set> 요소)를 갖고 있는 컨테이너. AnimatorSet를 나타냅니다.

중첩된 <set> 태그를 지정하여 애니메이션을 세부적으로 그룹화할 수 있습니다. 각 <set>에서 자체 ordering 속성을 정의할 수 있습니다.

속성:

android:ordering

키워드. 집합에 포함된 애니메이션 재생 순서를 지정합니다.

값	설명
`sequentially`	집합에 포함된 애니메이션을 순차적으로 재생
`together`(기본값)	집합에 포함된 애니메이션을 동시에 재생

<objectAnimator>

특정 시간 동안 객체의 특정 속성을 애니메이션합니다. ObjectAnimator를 나타냅니다.

속성:

android:propertyName

문자열. 필수사항. 애니메이션할 객체 속성으로, 이름별로 참조됩니다. 예를 들어 View 객체에 "alpha" 또는 "backgroundColor"를 지정할 수 있습니다. 그러나 objectAnimator 요소는 target 속성을 노출하지 않으므로 XML 선언에서 애니메이션할 객체를 설정할 수 없습니다. loadAnimator()를 호출하여 애니메이션 XML 리소스를 확장한 다음 setTarget()을 호출하여 이 속성이 포함된 타겟 객체를 설정해야 합니다.

android:valueTo

부동 소수점 수, 정수 또는 색상. 필수사항. 애니메이션된 속성이 끝나는 값입니다. 색은 6자리 16진수 숫자로 표현됩니다(예: #333333).

android:valueFrom

부동 소수점 수, 정수 또는 색상. 애니메이션된 속성이 시작되는 값입니다. 지정되지 않으면 애니메이션은 속성의 get 메서드로 얻은 값에서 시작합니다. 색은 6자리 16진수 숫자로 표현됩니다(예: #333333).

android:duration

정수. 애니메이션의 재생 시간(단위: 밀리초)입니다. 기본값은 300밀리초입니다.

android:startOffset

정수. start()가 호출된 다음 애니메이션이 지연되는 시간(단위: 밀리초)입니다.

android:repeatCount

정수. 애니메이션의 반복 횟수입니다. "-1"로 설정하여 무한 반복하거나 양의 정수로 설정합니다. 예를 들어 값 "1"은 애니메이션이 처음 실행되고 나서 한 번 더 반복된다는 의미이므로 애니메이션은 총 두 번 재생됩니다. 기본값은 "0"으로, 반복이 없음을 의미합니다.

android:repeatMode

정수. 애니메이션이 애니메이션의 끝부분에 도달했을 때의 동작입니다. 이 속성을 적용하려면 android:repeatCount를 양의 정수 또는 "-1"로 설정해야 합니다. 반복 시 애니메이션을 역방향으로 재생하려면 "reverse"로 설정하고, 매번 처음부터 애니메이션을 반복하려면 "restart"로 설정합니다.

android:valueType

키워드. 값이 색상인 경우 이 속성을 지정하지 마세요. 애니메이션 프레임워크가 색상 값을 자동으로 처리합니다.

값	설명
`intType`	애니메이션된 값이 정수임을 명시합니다.
`floatType`(기본값)	애니메이션된 값이 부동 소수점 수임을 명시합니다.

<animator>

지정된 시간 동안 애니메이션을 진행합니다. ValueAnimator를 나타냅니다.

속성:

android:valueTo

부동 소수점 수, 정수 또는 색상. 필수사항. 애니메이션이 끝나는 값입니다. 색은 6자리 16진수 숫자로 표현됩니다(예: #333333).

android:valueFrom

부동 소수점 수, 정수 또는 색상. 필수사항. 애니메이션이 시작되는 값입니다. 색은 6자리 16진수 숫자로 표현됩니다(예: #333333).

android:duration

정수. 애니메이션의 재생 시간(단위: 밀리초)입니다. 기본값은 300밀리초입니다.

android:startOffset

정수. start()가 호출된 다음 애니메이션이 지연되는 시간(단위: 밀리초)입니다.

android:repeatCount

android:repeatMode

android:valueType

키워드. 값이 색상인 경우 이 속성을 지정하지 마세요. 애니메이션 프레임워크가 색상 값을 자동으로 처리합니다.

값	설명
`intType`	애니메이션된 값이 정수임을 명시합니다.
`floatType`(기본값)	애니메이션된 값이 부동 소수점 수임을 명시합니다.

예:

res/animator/property_animator.xml에 저장된 XML 파일:

<set android:ordering="sequentially">
    <set>
        <objectAnimator
            android:propertyName="x"
            android:duration="500"
            android:valueTo="400"
            android:valueType="intType"/>
        <objectAnimator
            android:propertyName="y"
            android:duration="500"
            android:valueTo="300"
            android:valueType="intType"/>
    </set>
    <objectAnimator
        android:propertyName="alpha"
        android:duration="500"
        android:valueTo="1f"/>
</set>

이 애니메이션을 실행하려면 코드의 XML 리소스를 AnimatorSet 객체로 확장한 다음 애니메이션 집합을 시작하기 전에 모든 애니메이션의 타겟 객체를 설정해야 합니다. setTarget()을 호출하면 편의상 AnimatorSet의 모든 하위 요소의 단일 타겟 객체가 설정됩니다. 다음 코드는 이 작업의 진행 방법을 보여줍니다.

Kotlin

val set: AnimatorSet = AnimatorInflater.loadAnimator(myContext, R.animator.property_animator)
    .apply {
        setTarget(myObject)
        start()
    }

Java

AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext,
    R.animator.property_animator);
set.setTarget(myObject);
set.start();

참고 항목:

속성 애니메이션 개요
속성 애니메이션 시스템을 사용하는 방법에 관한 예는 API 데모를 참고하세요.

뷰 애니메이션

뷰 애니메이션 프레임워크는 XML에서 모두 선언할 수 있는 트윈 애니메이션과 프레임별 애니메이션을 둘 다 지원합니다. 다음 섹션에서는 이 두 애니메이션을 사용하는 방법을 설명합니다.

트윈 애니메이션

XML로 정의되는 애니메이션으로, 그래픽에서 회전, 페이딩, 이동, 확장과 같은 변환을 진행합니다.

파일 위치:

res/anim/filename.xml
파일 이름은 리소스 ID로 사용됩니다.

컴파일된 리소스 데이터 유형:

Animation의 리소스 포인터

리소스 참조:

Java의 경우: R.anim.filename
XML의 경우: @[package:]anim/filename

문법:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@[package:]anim/interpolator_resource"
    android:shareInterpolator=["true" | "false"] >
    <alpha
        android:fromAlpha="float"
        android:toAlpha="float" />
    <scale
        android:fromXScale="float"
        android:toXScale="float"
        android:fromYScale="float"
        android:toYScale="float"
        android:pivotX="float"
        android:pivotY="float" />
    <translate
        android:fromXDelta="float"
        android:toXDelta="float"
        android:fromYDelta="float"
        android:toYDelta="float" />
    <rotate
        android:fromDegrees="float"
        android:toDegrees="float"
        android:pivotX="float"
        android:pivotY="float" />
    <set>
        ...
    </set>
</set>

파일에는 단일 루트 요소로 <alpha>, <scale>, <translate>, <rotate> 또는 다른 애니메이션 요소(중첩된 <set> 요소 포함)의 그룹을 갖는 <set> 요소가 있어야 합니다.

요소:

<set>

다른 애니메이션 요소(<alpha>, <scale>, <translate>, <rotate>) 또는 기타 <set> 요소를 갖고 있는 컨테이너. AnimationSet를 나타냅니다.

속성:

android:interpolator: 보간기 리소스. 애니메이션에서 적용할 Interpolator입니다. 값은 보간기 클래스 이름이 아닌 보간기를 지정하는 리소스 참조여야 합니다. 플랫폼에서 제공되는 기본 보간기 리소스를 사용하거나 고유한 자체 보간기 리소스를 만들 수 있습니다. 보간기에 관한 자세한 내용은 아래 설명을 참고하세요.
android:shareInterpolator: 불리언. 모든 하위 요소 간에 동일한 보간기를 공유하려면 "true"를 설정합니다.

<alpha>

페이드 인 또는 페이드 아웃 애니메이션. AlphaAnimation을 나타냅니다.

속성:

android:fromAlpha: 부동 소수점 수. 시작 불투명도 오프셋으로, 여기서 0.0은 투명이고 1.0은 불투명입니다.
android:toAlpha: 부동 소수점 수. 끝 불투명도 오프셋으로, 여기서 0.0은 투명이고 1.0은 불투명입니다.

<alpha>에서 지원하는 추가 속성은 Animation 클래스 참조(이 클래스 참조의 XML 속성은 이 요소에 의해 상속됨)를 참고하세요.

<scale>

크기 조절 애니메이션. pivotX 및 pivotY를 지정하여 이미지가 바깥쪽 또는 안쪽으로 커지기 시작하는 이미지의 중심점을 지정할 수 있습니다. 예를 들어 값이 0, 0(왼쪽 상단)이면 일제히 오른쪽 아래로 커집니다. ScaleAnimation을 나타냅니다.

속성:

android:fromXScale: 부동 소수점 수. 시작 X 크기 오프셋으로, 여기서 1.0은 변경이 없다는 뜻입니다.
android:toXScale: 부동 소수점 수. 끝 X 크기 오프셋으로, 여기서 1.0은 변경이 없다는 뜻입니다.
android:fromYScale: 부동 소수점 수. 시작 Y 크기 오프셋으로, 여기서 1.0은 변경이 없다는 뜻입니다.
android:toYScale: 부동 소수점 수. 끝 Y 크기 오프셋으로, 여기서 1.0은 변경이 없다는 뜻입니다.
android:pivotX: 부동 소수점 수. 객체가 확장될 때 고정된 상태로 유지되는 X 좌표입니다.
android:pivotY: 부동 소수점 수. 객체가 확장될 때 고정된 상태로 유지되는 Y 좌표입니다.

<scale>에서 지원하는 추가 속성은 Animation 클래스 참조(이 클래스 참조의 XML 속성은 이 요소에 의해 상속됨)를 참고하세요.

<translate>

수직 또는 수평 모션. TranslateAnimation을 나타냅니다. 다음 세 가지 형식의 속성을 지원합니다.

'%'로 끝나는 -100~100의 값(자신을 기준으로 한 백분율을 나타냄)
'%p'로 끝나는 -100~100의 값(상위 요소를 기준으로 한 백분율을 나타냄)
접미사 없는 부동 소수점 값(절댓값을 나타냄)

속성:

android:fromXDelta: 부동 소수점 수 또는 백분율. 시작 X 오프셋입니다. 법선 위치를 기준으로 한 픽셀(예: "5")로 표현되거나 요소 너비를 기준으로 한 백분율(예: "5%") 또는 상위 요소 너비를 기준으로 한 백분율(예: "5%p")로 표현됩니다.
android:toXDelta: 부동 소수점 수 또는 백분율. 끝 X 오프셋입니다. 법선 위치를 기준으로 한 픽셀(예: "5")로 표현되거나 요소 너비를 기준으로 한 백분율(예: "5%") 또는 상위 요소 너비를 기준으로 한 백분율(예: "5%p")로 표현됩니다.
android:fromYDelta: 부동 소수점 수 또는 백분율. 시작 Y 오프셋입니다. 법선 위치를 기준으로 한 픽셀(예: "5")로 표현되거나 요소 높이를 기준으로 한 백분율(예: "5%") 또는 상위 요소 높이를 기준으로 한 백분율(예: "5%p")로 표현됩니다.
android:toYDelta: 부동 소수점 수 또는 백분율. 끝 Y 오프셋입니다. 법선 위치를 기준으로 한 픽셀(예: "5")로 표현되거나 요소 높이를 기준으로 한 백분율(예: "5%") 또는 상위 요소 높이를 기준으로 한 백분율(예: "5%p")로 표현됩니다.

<translate>에서 지원하는 추가 속성은 Animation 클래스 참조(이 클래스 참조의 XML 속성은 이 요소에 의해 상속됨)를 참고하세요.

<rotate>

회전 애니메이션. RotateAnimation을 나타냅니다.

속성:

android:fromDegrees: 부동 소수점 수. 시작 각도 위치(단위: 도)입니다.
android:toDegrees: 부동 소수점 수. 끝 각도 위치(단위: 도)입니다.
android:pivotX: 부동 소수점 수 또는 백분율. 회전 중심의 X 좌표입니다. 객체의 왼쪽 가장자리를 기준으로 한 픽셀(예: "5")로 표현되거나 객체의 왼쪽 가장자리를 기준으로 한 백분율(예: "5%") 또는 상위 컨테이너의 왼쪽 가장자리를 기준으로 한 백분율(예: "5%p")로 표현됩니다.
android:pivotY: 부동 소수점 수 또는 백분율. 회전 중심의 Y 좌표입니다. 객체의 상단 가장자리를 기준으로 한 픽셀(예: "5")로 표현되거나 객체의 상단 가장자리를 기준으로 한 백분율(예: "5%") 또는 상위 컨테이너의 상단 가장자리를 기준으로 한 백분율(예: "5%p")로 표현됩니다.

<rotate>에서 지원하는 추가 속성은 Animation 클래스 참조(이 클래스 참조의 XML 속성은 이 요소에 의해 상속됨)를 참고하세요.

예:

res/anim/hyperspace_jump.xml에 저장된 XML 파일:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    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/accelerate_interpolator"
        android:startOffset="700">
        <scale
            android:fromXScale="1.4"
            android:toXScale="0.0"
            android:fromYScale="0.6"
            android:toYScale="0.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:duration="400" />
        <rotate
            android:fromDegrees="0"
            android:toDegrees="-45"
            android:toYScale="0.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:duration="400" />
    </set>
</set>

다음 애플리케이션 코드는 애니메이션을 ImageView에 적용하고 애니메이션을 시작합니다.

Kotlin

val image: ImageView = findViewById(R.id.image)
val hyperspaceJump: Animation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump)
image.startAnimation(hyperspaceJump)

Java

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

참고 항목:

뷰 애니메이션

보간기

보간기는 XML로 정의된 애니메이션 수정자로, 애니메이션의 변경 속도에 영향을 줍니다. 보간기를 사용하면 기존 애니메이션 효과를 가속하거나 감속 또는 반복하고 앞뒤로 왔다갔다 하게 하는 등 다양하게 만들 수 있습니다.

보간기는 android:interpolator 속성이 있는 애니메이션 요소에 적용되고, 그 값은 보간기 리소스 참조입니다.

Android에서 사용할 수 있는 모든 보간기는 Interpolator 클래스의 서브클래스입니다. Android에는 보간기 클래스마다 참조할 수 있는 공개 리소스가 들어 있기 때문에 android:interpolator 속성을 사용하여 보간기를 애니메이션에 적용할 수 있습니다. 다음 표에는 각 보간기에 사용할 리소스가 명시되어 있습니다.

보간기 클래스	리소스 ID
`AccelerateDecelerateInterpolator`	`@android:anim/accelerate_decelerate_interpolator`
`AccelerateInterpolator`	`@android:anim/accelerate_interpolator`
`AnticipateInterpolator`	`@android:anim/anticipate_interpolator`
`AnticipateOvershootInterpolator`	`@android:anim/anticipate_overshoot_interpolator`
`BounceInterpolator`	`@android:anim/bounce_interpolator`
`CycleInterpolator`	`@android:anim/cycle_interpolator`
`DecelerateInterpolator`	`@android:anim/decelerate_interpolator`
`LinearInterpolator`	`@android:anim/linear_interpolator`
`OvershootInterpolator`	`@android:anim/overshoot_interpolator`

다음은 이러한 리소스 중 android:interpolator 속성을 갖는 리소스를 적용하는 방법입니다.

<set android:interpolator="@android:anim/accelerate_interpolator">
    ...
</set>

맞춤 보간기

플랫폼에서 제공되는 보간기가 만족스럽지 않다면 속성을 수정하여 맞춤 보간기 리소스를 만들 수 있습니다. 예를 들어 AnticipateInterpolator의 가속 속도를 조정하거나 CycleInterpolator의 주기 수를 조정할 수 있습니다. 이를 진행하려면 XML 파일에서 고유한 보간기 리소스를 만들어야 합니다.

파일 위치:

res/anim/filename.xml
파일 이름은 리소스 ID로 사용됩니다.

컴파일된 리소스 데이터 유형:

상응하는 보간기 객체의 리소스 포인터

리소스 참조:

XML의 경우: @[package:]anim/filename

문법:

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

어떠한 속성도 적용하지 않으면 보간기는 플랫폼에서 제공된 보간기(위 표에 나열된 보간기)와 정확히 동일하게 작동합니다.

요소:

XML로 정의될 경우 각 Interpolator 구현은 이름 첫 글자를 소문자로 합니다.

예:

res/anim/my_overshoot_interpolator.xml에 저장된 XML 파일:

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

다음 애니메이션 XML은 보간기를 적용합니다.

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@anim/my_overshoot_interpolator"
    android:fromXScale="1.0"
    android:toXScale="3.0"
    android:fromYScale="1.0"
    android:toYScale="3.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="700" />

프레임 애니메이션

XML로 정의된 애니메이션으로, 영화처럼 일련의 이미지를 순서대로 표시합니다.

파일 위치:

res/drawable/filename.xml
파일 이름은 리소스 ID로 사용됩니다.

컴파일된 리소스 데이터 유형:

AnimationDrawable의 리소스 포인터

리소스 참조:

Java의 경우: R.drawable.filename
XML의 경우: @[package:]drawable.filename

문법:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource_name"
        android:duration="integer" />
</animation-list>

요소:

예:

res/drawable/rocket_thrust.xml에 저장된 XML 파일:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

다음 애플리케이션 코드는 애니메이션을 View의 배경으로 설정한 다음 애니메이션을 재생합니다.

Kotlin

val rocketImage: ImageView = findViewById(R.id.rocket_image)
rocketImage.setBackgroundResource(R.drawable.rocket_thrust)

val rocketAnimation = rocketImage.background
if (rocketAnimation is Animatable) {
    rocketAnimation.start()
}

Java

ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);

rocketAnimation = rocketImage.getBackground();
if (rocketAnimation instanceof Animatable) {
    ((Animatable)rocketAnimation).start();
}

참고 항목:

뷰 애니메이션

리소스 유형 정보

색상 상태 목록