W niektórych przypadkach obrazy muszą być animowane. Jest to przydatne, jeśli chcesz wyświetlić niestandardową animację wczytywania składającą się z kilku obrazów lub jeśli chcesz, aby ikona zmieniała się po działaniu użytkownika. Android udostępnia 2 opcje animowania obiektów rysowanych.
Pierwszą opcją jest użycie AnimationDrawable. Dzięki temu możesz podać kilka statycznych plików drawable, które będą wyświetlane pojedynczo, aby utworzyć animację. Drugą opcją jest użycie AnimatedVectorDrawable, która umożliwia animowanie właściwości obiektu rysowanego wektorowo.
Używanie AnimationDrawable
Jedną z metod tworzenia animacji jest wczytywanie sekwencji zasobów do rysowania, takich jak rolka filmu.
Klasa AnimationDrawable jest podstawą tego rodzaju animacji, które można rysować.
Klatki animacji można zdefiniować w kodzie za pomocą interfejsu API klasy AnimationDrawable, ale łatwiej jest zdefiniować je w pojedynczym pliku XML z listą klatek tworzących animację. Plik XML służący do tego rodzaju animacji znajduje się w katalogu res/drawable/ projektu na Androida. W tym przypadku instrukcje podają kolejność i czas trwania poszczególnych klatek animacji.
Plik XML składa się z elementu <animation-list> jako węzła głównego i serii podrzędnych węzłów <item>, z których każdy definiuje ramkę – rysowalny zasób i jego czas trwania. Oto przykładowy plik XML animacji Drawable:
<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>
Ta animacja trwa przez 3 klatki. Ustawienie atrybutu android:oneshot listy na true powoduje, że lista odtwarza się raz, a potem zatrzymuje się na ostatniej klatce. Jeśli ustawisz wartość android:oneshot na false, animacja będzie się zapętlać.
Jeśli zapiszesz ten plik XML jako rocket_thrust.xml w katalogu res/drawable/ projektu, możesz go dodać jako obraz tła do View, a potem wywołać funkcję start(), aby go odtworzyć. Oto przykład działania, w którym animacja jest dodawana do obiektu ImageView, a potem animowana po dotknięciu ekranu:
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();
}
});
}
Pamiętaj, że metody start() wywoływanej w AnimationDrawable nie można wywołać w metodzie onCreate() obiektu Activity, ponieważ obiekt AnimationDrawable nie jest jeszcze w pełni dołączony do okna. Aby odtworzyć animację natychmiast, bez konieczności interakcji, możesz wywołać ją w metodie onStart()Activity, który jest wywoływany, gdy Android wyświetla widok na ekranie.
Więcej informacji o składni XML oraz dostępnych tagach i atrybutach znajdziesz w artykule Zasoby dotyczące animacji.
Używanie AnimatedVectorDrawable
Obiekt rysowalny wektorowo to typ elementu rysowalnego, który można skalować bez rozpikselowania ani rozmycia. Klasa AnimatedVectorDrawable (i AnimatedVectorDrawableCompat w celu zachowania zgodności wstecznej) umożliwia animowanie właściwości obiektu wektorowego, np. jego obracanie lub zmianę danych ścieżki, aby przekształcić go w inny obraz.
Animowane obiekty wektorowe definiuje się zwykle w 3 plikach XML:
- Obiekt rysowalny wektorowo z elementem
<vector>w elementachres/drawable/. - Animowany wektor rysowalny za pomocą elementu
<animated-vector>w polures/drawable/. - Co najmniej 1 animacja obiektu z elementem
<objectAnimator>w ramachres/animator/.
Animowane wektory rysowane mogą animować atrybuty elementów <group> i <path>. Element <group> definiuje zbiór ścieżek lub podzbiorów, a element <path> – ścieżki do narysowania.
Podczas definiowania wektorowego obiektu rysowanego, który chcesz animować, użyj atrybutu android:name, aby przypisać unikalną nazwę grupom i ścieżkom, dzięki czemu będzie można się do nich odwoływać w definicjach animatora. Na przykład:
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>
Definicja animacji wektorów rysowalnych odnosi się do grup i ścieżek w wektorze, które można rysować za pomocą ich nazw:
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>
Definicje animacji reprezentują obiekty ObjectAnimator lub AnimatorSet. Pierwszy animator w tym przykładzie obraca grupę docelową o 360 stopni:
res/animator/rotation.xml
<objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
Drugi animator w tym przykładzie zmienia ścieżkę obiektu rysowanego wektorowo z jednego kształtu na inny. Ścieżki muszą być zgodne z przekształcaniem: muszą mieć taką samą liczbę poleceń i tę samą liczbę parametrów dla każdego polecenia.
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>
Oto wynikowa AnimatedVectorDrawable:
AnimatedVectorDrawable.Podgląd obiektu rysowanego wektorowo (AVD)
Narzędzie animowanych wektorów w Android Studio umożliwia wyświetlanie podglądu animowanych zasobów rysunkowych. To narzędzie umożliwia wyświetlenie podglądu zasobów <animation-list>, <animated-vector> i <animated-selector> w Android Studio oraz ułatwia ulepszanie animacji niestandardowych.
Więcej informacji znajdziesz w dokumentacji interfejsu API AnimatedVectorDrawable.