Obiekty na ekranie często trzeba zmienić ze względu na interakcje użytkownika lub za kulisy. Zamiast od razu aktualizować przez co miga z jednego obszaru na drugi, użyj animacji, aby przesuń go z pozycji początkowej do końcowej.
Android umożliwia zmianę pozycji obiektów wyświetlanych na ekranie przez
przy użyciu ObjectAnimator
. Reklamodawca podaje pozycję końcową
obiektu, a także czas trwania animacji. Dostępne opcje
możesz też używać interpolatorów czasowych do sterowania przyspieszaniem lub spowalnianiem
animację.
Zmiana pozycji widoku za pomocą narzędzia ObjectAnimator
ObjectAnimator
Interfejs API umożliwia zmianę właściwości widoku o określonym czasie trwania.
Zawiera metody statyczne do tworzenia instancji ObjectAnimator
w zależności od
typu atrybutu animujesz. Podczas zmiany pozycji widoków na
ekranu, użyj atrybutów translationX
i translationY
.
Oto przykład funkcji ObjectAnimator
, która przenosi widok do pozycji 100
pikseli od lewej krawędzi ekranu w 2 sekundy:
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 parametru
ObjectAnimator.ofFloat()
, bo wartości przesunięcia muszą być liczbami zmiennoprzecinkowymi. Pierwszy parametr to
widok, który chcesz animować. Drugi parametr to właściwość,
ani tworzyć animacji. Należy przesunąć widok w poziomie, dlatego translationX
. Ostatni parametr to wartość końcowa animacji. W tym
Na przykład wartość 100 oznacza pozycję, na której
na ekranie.
Następna metoda pozwala określić czas trwania animacji (w milisekundach). W tym Na przykład animacja będzie trwać 2 sekundy (2000 milisekund).
Ostatnia metoda powoduje uruchomienie animacji, co powoduje zaktualizowanie pozycji widoku na ekranie.
Więcej informacji o korzystaniu z narzędzia ObjectAnimator
znajdziesz w sekcji Tworzenie animacji za pomocą:
ObjectAnimator.
Dodaj ruch po krzywej
Chociaż użycie funkcji ObjectAnimator
jest wygodne, domyślnie zmienia położenie
na linii prostej między punktem początkowym i końcowym. Material
opiera się na krzywych służących do poruszania się przestrzennym obiektów na ekranie
w dowolnym momencie animacji. Ruch po zakrzywieniu nadaje aplikacji bardziej materiałowy wygląd
a jednocześnie uatrakcyjniać animacje.
Określ własną ścieżkę
Klasa ObjectAnimator
ma konstruktory umożliwiające animowanie współrzędnych
za pomocą co najmniej 2 właściwości naraz. Dla:
w tym animatorze używany jest element
Path
obiekt animowany X i Y.
właściwości 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 }
Tak wygląda animacja łuku:
Rysunek 1. Animacja zakrzywionej ścieżki.
Interpolator
to implementacja krzywej wygładzania. Zobacz
Dokumentacja interfejsu Material Design
. Interpolator
określa sposób obliczania konkretnych wartości w animacji jako funkcji
obecnie się znajdujesz. System udostępnia zasoby XML dla trzech podstawowych krzywych
Specyfikacja Material Design:
@interpolator/fast_out_linear_in.xml
@interpolator/fast_out_slow_in.xml
@interpolator/linear_out_slow_in.xml
Używanie PathInterpolator
PathInterpolator
jest interpolatorem wprowadzonym w Androidzie 5.0 (API 21). Bazuje na
krzywa Beziera lub
Path
obiekt. Przykłady na Androida w dokumentacji interfejsu Material Design
wygładzanie
użyj metody PathInterpolator
.
Funkcja PathInterpolator
zawiera konstruktory oparte na różnych typach krzywych Béziera.
Wszystkie krzywe Béziera mają punkty początkowy i końcowy ustalone na poziomie (0,0)
i (1,1)
.
. Inne argumenty konstruktora zależą od typu Béziera
dla tworzonej krzywej.
Na przykład w przypadku krzywej kwadratowej Béziera tylko współrzędne X i Y jeden punkt kontrolny:
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(); }
Powstała krzywa wygładzania, która zaczyna się szybko i spowalnia zbliża się do końca.
Podobnie sześcienny konstruktor Bézier ma stałe punkty początkowy i końcowy, ale wymaga dwóch 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(); }
Jest to implementacja wyróżnionego interfejsu Material Design spowolnić wygładzanie krzywej.
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(); }
W ten sposób można uzyskać tę samą krzywą wygładzania jak w przykładzie sześciennego Béziera, ale w przypadku użycia
Path
.
Możesz również zdefiniować interpolator ścieżek jako zasób XML:
<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
Animator.setInterpolator()
.
. Animator
używa interpolatora do określenia czasu lub ścieżki.
po jej rozpoczęciu.
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();