이미지를 화면에 애니메이션으로 표시해야 하는 경우도 있습니다. 여러 이미지로 구성된 맞춤 로드 애니메이션을 표시하거나 사용자 작업 후에 한 아이콘이 다른 아이콘으로 변형되게 하려는 경우 유용합니다. Android에서는 드로어블 애니메이션을위한 몇 가지 옵션을 제공합니다.
첫 번째 옵션은 애니메이션 드로어블을 사용하는 것입니다. 그러면 애니메이션을 만들기 위해 한 번에 하나씩 표시되는 여러 개의 정적 드로어블 파일을 지정할 수 있습니다. 두 번째 옵션은 벡터 드로어블의 속성을 애니메이션화할 수 있는 애니메이션화된 벡터 드로어블을 사용하는 것입니다.
AnimationDrawable 사용
Drawables을 애니메이션화하는 한 가지 방법은 일련의 드로어블 리소스를 차례로 로드하여 애니메이션을 만드는 것입니다. 이는 한 통의 필름처럼 일련의 여러 다른 이미지를 순서대로 재생하여 만드는 기본 애니메이션입니다.
AnimationDrawable 클래스는 드로어블 애니메이션의 기초입니다.
코드에서 애니메이션의 프레임을 정의 할 수 있지만 AnimationDrawable 클래스 API를 사용하면 애니메이션을 구성하는 프레임을 나열하는 단일 XML 파일로 더 간단하게 정의할 수 있습니다. 이 애니메이션 유형의 XML 파일은 Android 프로젝트의 res/drawable/ 디렉터리에 있습니다. 이 경우 명령어는 각 애니메이션 프레임의 순서와 지속 기간입니다.
XML 파일은 루트 노드인 <animation-list> 요소와 각각 프레임을 정의하는 일련의 하위 <item> 노드(프레임의 드로어블 리소스 및 프레임 지속 기간)로 구성됩니다. 다음은 드로어블 애니메이션의 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로 설정하면 한 번만 순환한 다음 마지막 프레임에서 정지된 상태로 있습니다. false로 설정하면 애니메이션이 연속 재생됩니다. 이 XML을 프로젝트의 res/drawable/ 디렉터리에 rocket_thrust.xml로 저장하면 보기에 배경 이미지로 추가한 다음 재생하기 위해 호출할 수 있습니다. 다음은 예제 활동입니다. 여기에서는 애니메이션이 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() })
}
Java
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();
}
});
}
AnimationDrawable이 아직 창에 완전히 연결되지 않았기 때문에 활동의 onCreate() 메서드를 실행하는 중에는 AnimationDrawable에서 호출된 start() 메서드를 호출할 수 없다는 점에 유의해야 합니다. 상호작용이 필요 없이 애니메이션을 즉시 재생하려면 활동의 onStart() 메서드를 통해 호출할 수 있습니다. 이 메서드는 Android에서 화면에 보기를 표시할 때 호출됩니다.
XML 구문, 사용 가능한 태그 및 속성에 관한 자세한 내용은 애니메이션 리소스를 참조하세요.
AnimatedVectorDrawable 사용
벡터 드로어블은 픽셀화되거나 흐릿해지지 않고 확장 가능한 드로어블 유형입니다. AnimatedVectorDrawable 클래스(및 이전 버전과의 호환성을 위한 AnimatedVectorDrawableCompat)를 사용하면 벡터 드로어블을 회전하거나 경로 데이터를 변경하여 다른 이미지로 변형하는 등으로 벡터 드로어블 속성을 애니메이션화할 수 있습니다.
애니메이션화된 벡터 드로어블은 일반적으로 다음 세 가지 XML 파일로 정의합니다.
res/drawable/에<vector>요소가 있는 벡터 드로어블res/drawable/에<animated-vector>요소가 있는 애니메이션화된 벡터 드로어블res/animator/에<objectAnimator>요소가 있는 하나 이상의 객체 애니메이터
애니메이션화된 벡터 드로어블을 통해 <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은 다음과 같습니다.
자세한 내용은 AnimatedVectorDrawable의 API 참조를 확인하세요.