드로어블 그래픽 애니메이션 처리

Compose 방식 사용해 보기
Jetpack Compose는 Android에 권장되는 UI 도구 키트입니다. Compose에서 애니메이션을 사용하는 방법을 알아보세요.
<ph type="x-smartling-placeholder"></ph> 벡터 드로어블 애니메이션 처리 → 를 통해 개인정보처리방침을 정의할 수 있습니다.
그림 1. 애니메이션된 드로어블.

이미지에 애니메이션을 적용해야 하는 경우도 있습니다. 이는 포드가 아니라 여러 이미지로 구성된 맞춤 로딩 애니메이션 또는 사용자의 이미지가 표시된 후 아이콘이 변신하도록 하려는 경우 있습니다. Android에서는 드로어블 애니메이션을 위한 두 가지 옵션을 제공합니다.

첫 번째 옵션은 AnimationDrawable를 사용하는 것입니다. 이 여러 static 한 번에 하나씩 표시하는 드로어블 파일이 만들 수 있습니다. 두 번째 옵션은 AnimatedVectorDrawable: 속성에 애니메이션을 적용할 수 있습니다. 벡터 드로어블입니다.

AnimationDrawable 사용

애니메이션을 만드는 한 가지 방법은 필름 롤과 같이 일련의 드로어블 리소스를 로드하는 것입니다. AnimationDrawable 클래스 가 이러한 종류의 드로어블 애니메이션의 기초입니다.

AnimationDrawable를 사용하여 코드에서 애니메이션의 프레임을 정의할 수 있습니다. 클래스 API를 지원하지만, 실행되는 프레임을 나열하는 단일 XML 파일로 이를 정의하는 것이 애니메이션을 구성할 수 있습니다. 이 애니메이션 유형의 XML 파일은 res/drawable/에 속합니다. Android 프로젝트의 디렉터리에 있습니다. 이 경우 지침은 확인할 수 있습니다

XML 파일은 루트 노드인 <animation-list> 요소와 각각 프레임을 정의하는 일련의 하위 <item> 노드: 드로어블 리소스 지정할 수 있습니다. 다음은 Drawable 애니메이션의 XML 파일 예입니다.

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <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>

이 애니메이션은 3프레임 동안 실행됩니다. android:oneshot 설정 목록의 속성을 true로 설정하면 한 번 순환된 다음 정지하고 유지됨 지정할 수 있습니다. android:oneshot를 false로 설정하면 애니메이션이 반복됩니다.

이 XML을 res/drawable/에 rocket_thrust.xml로 저장하는 경우 View에 배경 이미지로 추가한 다음 start()를 호출하여 재생합니다. 다음은 애니메이션이 ImageView 후 애니메이션 처리 다음과 같습니다.

Kotlin

private lateinit var rocketAnimation: AnimationDrawable

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)

    val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
        setBackgroundResource(R.drawable.rocket_thrust)
        rocketAnimation = background as AnimationDrawable
    }

    rocketImage.setOnClickListener({ rocketAnimation.start() })
}

자바

AnimationDrawable rocketAnimation;

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

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

  rocketImage.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        rocketAnimation.start();
      }
  });
}

start() 메서드는 AnimationDrawable는 onCreate() 메서드 실행 중에 호출할 수 없습니다. Activity: AnimationDrawable가 아직 창 상호작용할 필요 없이 애니메이션을 즉시 재생하려면 onStart() Activity의 메서드이며 Android에서 화면에 뷰를 표시할 때 호출됩니다.

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

AnimatedVectorDrawable 사용

벡터 드로어블 은 픽셀화되거나 흐릿해지지 않고 확장 가능한 드로어블 유형입니다. 이 AnimatedVectorDrawable 클래스 및 이전 버전과의 호환성을 위한 AnimatedVectorDrawableCompat: 벡터 드로어블의 속성을 회전하거나 경로 데이터를 변경하여 있습니다.

일반적으로 애니메이트된 벡터 드로어블은 다음 3개의 XML 파일에서 정의합니다.

  • <vector> 요소가 있는 벡터 드로어블 res/drawable/입니다.
  • <animated-vector> 요소가 있는 애니메이션 벡터 드로어블 res/drawable/입니다.
  • <objectAnimator> 요소가 있는 하나 이상의 객체 애니메이터 res/animator/입니다.

애니메이션 벡터 드로어블을 사용하면 <group> 및 <path> 요소 <group> 요소는 경로 또는 하위 그룹을 정의하며 <path> 요소는 그릴 경로를 정의합니다.

애니메이션화할 벡터 드로어블을 정의할 때는 android:name를 사용합니다. 속성을 사용하여 그룹과 경로에 고유한 이름을 할당하여 애니메이터에서 참조할 수 있습니다. 정의할 수 있습니다 예를 들면 다음과 같습니다.

res/drawable/vectordrawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

애니메이트된 벡터 드로어블 정의가 벡터 드로어블의 그룹과 경로를 참조함 다음과 같이 이름을 지정합니다.

res/drawable/animatorvectordrawable.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@animator/rotation" />
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>

애니메이션 정의는 ObjectAnimator 또는 AnimatorSet 객체. 이 이 예의 첫 번째 애니메이터는 대상 그룹을 360도 회전합니다.

res/animator/rotation.xml

<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

이 예의 두 번째 애니메이터는 벡터 드로어블의 경로를 한 도형에서 있습니다. 경로는 모핑과 호환되어야 하며 명령어 수가 동일해야 합니다. 각 명령어에 대해 동일한 수의 매개변수가 필요합니다

res/animator/path_morph.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

결과 AnimatedVectorDrawable는 다음과 같습니다.

<ph type="x-smartling-placeholder">
그림 2. AnimatedVectorDrawable.

애니메이션 벡터 드로어블(AVD) 미리보기

Android 스튜디오의 애니메이션 벡터 드로어블 도구를 사용하면 애니메이션 효과를 미리 볼 수 있습니다. 드로어블 리소스에 액세스할 수 있습니다. 이 도구를 사용하면 <animation-list>, <animated-vector>, <animated-selector>개의 리소스 Android 스튜디오를 통해 맞춤 애니메이션을 더 쉽게 미세 조정할 수 있습니다.

Android 스튜디오 내에서 사용자의 애니메이션 미리보기 및 재생
그림 3. Android 스튜디오의 애니메이션 벡터 드로어블 도구

자세한 내용은 AnimatedVectorDrawable