Obiekty na ekranie często muszą zostać przemieszczone ze względu na interakcję użytkownika lub przetwarzanie w tle. Zamiast natychmiast aktualizować położenie obiektu, które powoduje miganie między obszarami, użyj animacji, która przeniesie go z pozycji początkowej do końcowej.
Jednym ze sposobów na zmiany położenia obiektów widoku na ekranie w Androidzie jest użycie narzędzia ObjectAnimator. Podajesz pozycję końcową, w której ma się znaleźć obiekt, oraz czas trwania animacji. Do sterowania przyspieszeniem i zwolnieniem animacji można też używać interpolatorów czasowych.
Zmiana pozycji widoku za pomocą narzędzia ObjectAnimator
Interfejs API ObjectAnimator umożliwia zmianę właściwości widoku o określonym czasie trwania.
Zawiera statyczne metody tworzenia instancji ObjectAnimator w zależności od typu animowanego atrybutu. Zmieniając położenie widoków na ekranie, używaj atrybutów translationX i translationY.
Oto przykład elementu ObjectAnimator, który w 2 sekundy przesuwa widok do pozycji o 100 pikseli od lewej strony ekranu:
Kotlin
ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
duration = 2000
start()
}
Java
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f); animation.setDuration(2000); animation.start();
W tym przykładzie użyto metody ObjectAnimator.ofFloat(), ponieważ wartości translacji muszą być liczbami zmiennoprzecinkowa. Pierwszy parametr to widok, który chcesz animować. Drugi parametr to animowana właściwość. Widok musi zostać przesunięty w poziomie, więc używana jest właściwość translationX. Ostatni parametr to wartość końcowa animacji. W tym przykładzie wartość 100 wskazuje pozycję o wiele pikseli od lewej strony ekranu.
Następna metoda określa czas trwania animacji w milisekundach. W tym przykładzie animacja trwa 2 sekundy (2000 milisekund).
Ostatnia metoda powoduje uruchomienie animacji i zmianę pozycji widoku na ekranie.
Więcej informacji o używaniu ObjectAnimator znajdziesz w artykule Tworzenie animacji za pomocą ObjectAnimator.
Dodaj ruch zakrzywiony
ObjectAnimator jest wygodne, ale domyślnie zmienia położenie widoku wzdłuż linii prostej między punktem początkowym a końcowym. Material Design opiera się na krzywych przestrzennych przemieszczaniu się obiektów na ekranie oraz do określania momentu animacji. Dzięki korzystaniu z ruchu zakrzywionego aplikacja wydaje się bardziej realistyczna,
a animacje staje się bardziej interesujące.
Zdefiniuj własną ścieżkę
Klasa ObjectAnimator ma konstruktory, które umożliwiają animowanie współrzędnych z wykorzystaniem co najmniej 2 właściwości jednocześnie ze ścieżką. Na przykład ten animator używa obiektu Path do animowania właściwości X i Y widoku:
Kotlin
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
val path = Path().apply {
arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
}
val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply {
duration = 2000
start()
}
} else {
// Create animator without using curved path
}
Java
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Path path = new Path();
path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
animator.setDuration(2000);
animator.start();
} else {
// Create animator without using curved path
}
Oto jak wygląda animacja łuku:
Rysunek 1. Animacja zakrzywionej ścieżki.
Interpolator to implementacja krzywej wygładzania. Więcej informacji o wygładzeniu krzywych znajdziesz w dokumentacji Material Design. Interpolator określa sposób obliczania konkretnych wartości w animacji jako funkcji czasu. System udostępnia zasoby XML dotyczące 3 podstawowych krzywych w specyfikacji Material Design:
@interpolator/fast_out_linear_in.xml@interpolator/fast_out_slow_in.xml@interpolator/linear_out_slow_in.xml
Użyj metody PathInterpolator
Klasa PathInterpolator to interpolator wprowadzony w Androidzie 5.0 (API 21). Opiera się na krzywej Beziera lub obiektu Path. W przykładach dotyczących Androida opisanych w dokumentacji Material Design dotyczącej wygładzania używamy PathInterpolator.
PathInterpolator zawiera konstruktory oparte na różnych typach krzywych Béziera.
Wszystkie krzywe Béziera mają punkty początkowe i końcowe ustawione odpowiednio w (0,0) i (1,1). Inne argumenty konstruktora zależą od typu tworzonej krzywej Béziera.
Na przykład w przypadku kwadratowej krzywej Beziera potrzebne są tylko współrzędne X i Y jednego punktu kontrolnego:
Kotlin
val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
PathInterpolator(0.67f, 0.33f)
} else {
LinearInterpolator()
}
Java
Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
myInterpolator = new PathInterpolator(0.67f, 0.33f);
} else {
myInterpolator = new LinearInterpolator();
}
W ten sposób powstanie krzywa wygładzania, która zaczyna się szybko i spowalnia w miarę zbliżania się do końca.
Sześcienny konstruktor Béziera podobnie ma stałe punkty początkowe i końcowe, ale wymaga 2 punktów kontrolnych:
Kotlin
val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f)
} else {
LinearInterpolator()
}
Java
Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
myInterpolator = new PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f);
} else {
myInterpolator = new LinearInterpolator();
}
To jest implementacja krzywej wygładzania interfejsu Material Design ze zaznaczonym zwolnieniem.
Aby uzyskać większą kontrolę, do zdefiniowania krzywej można użyć dowolnego parametru Path:
Kotlin
val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
val path = Path().apply {
moveTo(0.0f, 0.0f)
cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f)
}
PathInterpolator(path)
} else {
LinearInterpolator()
}
Java
Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Path path = new Path();
path.moveTo(0.0f, 0.0f);
path.cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f);
myInterpolator = new PathInterpolator(path);
} else {
myInterpolator = new LinearInterpolator();
}
Powoduje to utworzenie tej samej krzywej wygładzania co w przykładzie sześciennej funkcji Béziera, ale zamiast niej użyto funkcji Path.
Jako zasób XML możesz też zdefiniować interpolator ścieżki:
<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:controlX1="0.5"
android:controlY1="0.7"
android:controlX2="0.1f"
android:controlY2="1.0f"/>
Po utworzeniu obiektu PathInterpolator możesz go przekazać do metody Animator.setInterpolator(). Po uruchomieniu Animator używa interpolatora do określenia czasu lub krzywej ścieżki.
Kotlin
val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
interpolator = myInterpolator
start()
}
Java
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f); animation.setInterpolator(myInterpolator); animation.start();