Przenoszenie widoku za pomocą animacji

Wypróbuj tworzenie wiadomości

Jetpack Compose to zalecany zestaw narzędzi interfejsu na Androida. Dowiedz się, jak korzystać z animacji w edytorze.

Animowanie pozycji →

Obiekty na ekranie często trzeba przemieszczać ze względu na interakcje użytkownika lub przetwarzanie w tle. Zamiast natychmiast aktualizować położenie obiektu, przez co mruga z jednego obszaru na drugi, użyj animacji, aby przenieść go z pozycji początkowej do końcowej.

Android umożliwia zmianę położenia obiektów na ekranie za pomocą ObjectAnimator. Musisz podać pozycję końcową, w której ma się zatrzymać obiekt, oraz czas trwania animacji. Aby kontrolować przyspieszanie lub zwalnianie animacji, możesz też użyć interpolacji czasowych.

Zmiana pozycji widoku za pomocą obiektu ObjectAnimator

Interfejs API ObjectAnimator umożliwia zmianę właściwości widoku o określonym czasie trwania. Zawiera ona metody statyczne do tworzenia wystąpień ObjectAnimator w zależności od tego, jaki typ atrybutu chcesz animować. Aby zmienić pozycję widoku na ekranie, użyj atrybutów translationX i translationY.

Oto przykład elementu ObjectAnimator, który w 2 sekundy przesuwa widok o 100 pikseli od lewej krawędzi 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 tłumaczenia muszą być typu float. Pierwszy parametr to widok, który chcesz animować. Drugi parametr to właściwość, którą animujesz. Ponieważ widok musi się przesuwać w poziomie, używana jest właściwość translationX. Ostatni parametr to wartość końcowa animacji. W tym przykładzie wartość 100 wskazuje pozycję o tyle pikseli od lewej strony ekranu.

Następna metoda pozwala określić czas trwania animacji (w milisekundach). W tym przykładzie animacja trwa 2 sekundy (2000 ms).

Ostatnia metoda powoduje uruchomienie animacji, która aktualizuje pozycję widoku na ekranie.

Więcej informacji o korzystaniu z ObjectAnimator znajdziesz w artykule Tworzenie animacji za pomocą ObjectAnimator.

Dodaj ruch po krzywej

Chociaż użycie ObjectAnimator jest wygodne, domyślnie zmienia położenie widoku wzdłuż prostej linii między punktem początkowym i końcowym. Projektowanie w stylu Material opiera się na krzywych, które służą do tworzenia ruchu obiektów na ekranie i określania czasu animacji. Zastosowanie krzywych ruchów nadaje aplikacji bardziej materialowy charakter, a animacji większą atrakcyjność.

Określ własną ścieżkę

Klasa ObjectAnimator zawiera konstruktory umożliwiające animowanie współrzędnych przy użyciu co najmniej 2 właściwości naraz wraz 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
}

Animacja łuku wygląda tak:

Rysunek 1. Animacja zakrzywionej ścieżki.

Interpolator to implementacja łagodzącej krzywej. Więcej informacji o krzywych wykładniczych znajdziesz w dokumentacji Material Design. Element Interpolatorokreśla, jak są obliczane poszczególne wartości w animacji w zależności od czasu. System udostępnia zasoby XML dla 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żywanie PathInterpolator

Klasa PathInterpolator to interpolator wprowadzony w Androidzie 5.0 (API 21). Opiera się na krzywej Beziera lub obiekcie Path. Przykłady dotyczące Androida w dokumentacji Material Design używają PathInterpolator.

PathInterpolator ma konstruktory oparte na różnych typach krzywych Béziera. Wszystkie krzywe Béziera mają punkty początkowe i końcowe ustalone odpowiednio na (0,0) i (1,1). Pozostałe argumenty konstruktora zależą od typu tworzonej krzywej Béziera.

Na przykład w przypadku kwadratowej krzywej Béziera 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();
}

Powoduje to powstanie wygładzonej krzywej, która zaczyna się szybko i zwalnia, gdy zbliża się do końca.

Konstruktor krzywej Béziera stopnia 3 ma podobnie stałe punkty początkowy i końcowy, 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();
}

Jest to implementacja akcentowanej krzywej wyhamowania w stylu Material Design.

Aby mieć większą kontrolę, możesz użyć dowolnego parametru Path do zdefiniowania krzywej:

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();
}

Daje to tę samą krzywą wygładzania co przykład z wykładniczą Béziera, ale zamiast tego używa funkcji 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ć metodzie Animator.setInterpolator(). Animator używa interpolatora do określenia czasu lub ścieżki krzywej po uruchomieniu.

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();