Czasami obrazy muszą być animowane. Przydaje się to, gdy chcesz wyświetlić niestandardową animację wczytywania składającą się z kilku obrazów lub gdy chcesz, by ikona zmieniała się po wykonaniu czynności przez użytkownika. Android udostępnia 2 opcje animowania elementów, które można rysować.
Pierwszą opcją jest użycie AnimationDrawable. W ten sposób możesz wskazać kilka statycznych plików rysowalnych, które wyświetlają się pojedynczo, aby utworzyć animację. Druga opcja to użycie obiektu AnimatedVectorDrawable, który umożliwia animowanie właściwości obiektu rysowanego wektorowo.
Użyj obiektu AnimationDrawable
Jednym ze sposobów utworzenia animacji jest wczytanie sekwencji zasobów, które można narysować, takich jak rolka kliszy.
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 dla tego rodzaju animacji znajduje się w katalogu res/drawable/ Twojego projektu na Androida. W tym przypadku instrukcje określają kolejność i czas trwania każdej klatki w 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 wyświetla się w 3 klatkach. Ustawienie atrybutu android:oneshot listy na true powoduje, że jest on cykliczny, a następnie zatrzymuje i przytrzymuje ostatnią klatkę. Jeśli ustawisz android:oneshot na false, animacja zostanie 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ć funkcję start(), aby odtworzyć ten plik. 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ć metody onCreate() w Activity, bo metoda AnimationDrawable nie jest jeszcze w pełni dołączona 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żyj obiektu AnimatedVectorDrawable
Obiekt rysowalny wektorowo to typ obiektu rysowalnego, który można skalować bez rozpikselowania ani rozmycia. Klasa AnimatedVectorDrawableoraz
AnimatedVectorDrawableCompat zapewniająca zgodność wsteczną pozwala animować właściwości wektora rysowalnego, np. obracać go lub zmieniać dane ścieżki w taki sposób, aby przekształcić go w inny obraz.
Animowane obiekty rysunkowe wektorowe zwykle definiuje się w trzech plikach XML:
- Wektor rysowalny z elementem
<vector>w polures/drawable/. - Animowany wektor rysowalny za pomocą elementu
<animated-vector>w polures/drawable/. - Co najmniej jeden animator obiektów z elementem
<objectAnimator>wres/animator/.
Animowane obiekty rysunkowe wektorowe mogą animować atrybuty elementów <group> i <path>. Element <group> definiuje zbiór ścieżek lub podgrup, a element <path> – ścieżki do wykreślenia.
Gdy określisz obiekt rysowany wektorowo, który chcesz animować, użyj atrybutu android:name, aby przypisać grupom i ścieżkom unikalne nazwy, dzięki czemu możesz 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 tym 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 odpowiadają obiektom 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 przekształca ścieżkę obiektu rysunkowego wektora z jednego kształtu na drugi. Ścieżki muszą być zgodne z możliwością przekształcania: w każdym poleceniu muszą zawierać tę samą liczbę poleceń i tę samą liczbę parametrów.
res/animator/ścieżka_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 wynik AnimatedVectorDrawable:
AnimatedVectorDrawable.Podgląd animowanego wektora rysowalnego (AVD)
Narzędzie Animated Vector Drawable w Android Studio pozwala wyświetlić podgląd animowanych zasobów rysowalnych. 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.