Czasami obrazy muszą być animowane. Jest to przydatne, gdy chcesz wyświetlać niestandardową animację wczytywania składającą się z kilku obrazów lub gdy chcesz, aby ikona zmieniała się po wykonaniu działania użytkownika. Android udostępnia 2 opcje animowania elementów rysowanych.
Pierwszą opcją jest użycie AnimationDrawable. Dzięki temu możesz określić kilka statycznych rysowalnych plików, które wyświetlają się pojedynczo w celu utworzenia animacji. Drugą opcją jest użycie obiektu AnimatedVectorDrawable, który umożliwia animowanie właściwości elementu rysowalnego w formacie wektorowym.
Używaj AnimationDrawable
Jednym ze sposobów tworzenia animacji jest wczytanie sekwencji zasobów, które można przeciągnąć, np. rolki kliszy.
Klasa AnimationDrawable jest podstawą tego rodzaju rysowalnych animacji.
Klatki animacji możesz zdefiniować w kodzie za pomocą interfejsu API klasy AnimationDrawable, ale łatwiej jest określić je w jednym pliku XML, który zawiera listę klatek tworzących animację. Plik XML animacji tego typu należy do katalogu res/drawable/ projektu Androida. W tym przypadku instrukcje podają kolejność i czas trwania każdej klatki animacji.
Plik XML składa się z elementu <animation-list>, który pełni rolę węzła głównego, oraz serii podrzędnych węzłów <item>, z których każdy definiuje ramkę – rysowalnego zasobu i jego czasu 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 wyświetla się w trzech klatkach. Ustawienie atrybutu android:oneshot listy na true powoduje cykl powtarzający się, a potem zatrzymuje się i przytrzymuje ostatnią klatkę. Jeśli ustawisz android:oneshot na false, animacja będzie zapętlona.
Jeśli zapiszesz ten plik XML jako rocket_thrust.xml w katalogu res/drawable/ projektu, możesz dodać go jako obraz tła do View, a następnie wywołać start(), aby odtworzyć plik. Oto przykład działania, w którym animacja jest dodawana do elementu 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 przez AnimationDrawable nie można wywołać podczas metody onCreate() w Activity, ponieważ AnimationDrawable nie jest jeszcze w pełni dołączony do okna. Aby od razu odtworzyć animację bez konieczności interakcji, możesz ją wywołać za pomocą metody onStart()Activity, która jest wywoływana, gdy Android udostępni widok na ekranie.
Więcej informacji o składni XML oraz dostępnych tagach i atrybutach znajdziesz w artykule Zasoby animacji.
Używaj AnimacjiWectorDrawable.
Element rysowalny w formacie wektorowym to taki, który jest skalowalny i nie powoduje rozpikselowania ani rozmycia. Klasa AnimatedVectorDrawable, a także
AnimatedVectorDrawableCompat (w celu zapewnienia zgodności wstecznej), pozwala animować właściwości elementu rysowalnego w formacie wektorowym, np. obracać go lub przekształcać dane ścieżki w celu przekształcenia ich w inny obraz.
Animowane elementy rysowalne wektorowe zwykle definiuje się w trzech plikach XML:
- Obiekt rysowalny wektorowo z elementem
<vector>w elemencieres/drawable/. - Animowany obiekt rysowalny wektorowy z elementem
<animated-vector>w elemencieres/drawable/. - Co najmniej 1 animator obiektów z elementem
<objectAnimator>w elemencieres/animator/.
Animowane elementy rysowalne w formacie wektorowym mogą animować atrybuty elementów <group> i <path>. Element <group> określa zbiór ścieżek lub podgrup, a element <path> – ścieżki do narysowania.
Gdy zdefiniujesz obiekt rysowalny wektorowy, który chcesz animować, użyj atrybutu android:name, by przypisać unikalną nazwę do grup i ścieżek. Dzięki temu 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>
Animowana definicja elementów rysowalnych wektorowo odnosi się do grup i ścieżek w elementach rysowalnych wektorowo rysowalnych 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 obróci 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ę elementu rysowalnego w formacie z jednego kształtu do drugiego. Ścieżki muszą być zgodne z przekształcaniem: muszą zawierać tę 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 wynikowy AnimatedVectorDrawable:
AnimatedVectorDrawable.Podgląd animowanych elementów rysowalnych wektorowo (AVD)
Narzędzie Animowane wektorowe elementy do rysowania w Android Studio pozwala wyświetlać podgląd animowanych zasobów, które można rysować. To narzędzie umożliwia podgląd zasobów <animation-list>, <animated-vector> i <animated-selector> w Android Studio oraz ułatwia dopracowywanie niestandardowych animacji.
Więcej informacji znajdziesz w dokumentacji interfejsu API AnimatedVectorDrawable.