Przenoszenie widoków za pomocą animacji przesuwania

Wypróbuj sposób tworzenia wiadomości
Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak korzystać z animacji w sekcji Tworzenie
Spring AnimationSpec →

Animacja oparta na przesuwaniu wykorzystuje siłę tarcia proporcjonalną do prędkości obiektu. Można dzięki temu animować właściwość obiektu i stopniowo kończyć animację. Ma początkowy pęd, który jest określany głównie na podstawie prędkości gestu, i stopniowo się zwalnia. Animacja kończy się wtedy, gdy jej tempo jest na tyle niskie, że nie powoduje ona widocznej zmiany na ekranie urządzenia.

Rysunek 1. Animacja przesunięcia

Aby dowiedzieć się więcej na podobne tematy, przeczytaj te przewodniki:

Dodaj bibliotekę AndroidX

Aby używać animacji opartych na fizyce, musisz dodać do projektu bibliotekę AndroidX w ten sposób:

  1. Otwórz plik build.gradle modułu aplikacji.
  2. Dodaj bibliotekę AndroidX do sekcji dependencies.

    Odlotowy

            dependencies {
            implementation 'androidx.dynamicanimation:dynamicanimation:1.0.0'
        }

    Kotlin

            dependencies {
            implementation("androidx.dynamicanimation:dynamicanimation:1.0.0")
        }

Utwórz animację przelotu

Klasa FlingAnimation pozwala utworzyć animację zwięzłości obiektu. Aby utworzyć animację przelotną, utwórz instancję klasy FlingAnimation i podaj obiekt oraz właściwość obiektu, które chcesz animować.

Kotlin

val fling = FlingAnimation(view, DynamicAnimation.SCROLL_X)

Java

FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);

Ustaw prędkość

Prędkość początkowa określa szybkość, z jaką zmienia się właściwość animacji na początku animacji. Domyślna prędkość początkowa to 0 pikseli na sekundę. Dlatego musisz określić prędkość początkową, aby mieć pewność, że animacja nie kończy się od razu.

Możesz używać stałej wartości jako prędkości początkowej lub ustawić ją na podstawie prędkości gestu dotykowego. Jeśli chcesz podać stałą wartość, najpierw zdefiniuj wartość w dp na sekundę, a następnie przekonwertuj ją na liczbę pikseli na sekundę. Określenie wartości dp na sekundę pozwala określić prędkość niezależnie od gęstości i formatów urządzenia. Więcej informacji o przeliczaniu prędkości początkowej na piksele na sekundę znajdziesz w sekcji Konwertowanie dp na sekundę na piksele na sekundę w Animacji wiosennej.

Aby ustawić prędkość, wywołaj metodę setStartVelocity() i przekaż ją w pikselach na sekundę. Metoda zwraca obiekt rzucany, dla którego ustawiono prędkość.

Uwaga: do pobierania i obliczania szybkości gestów dotykowych użyj odpowiednio klas GestureDetector.OnGestureListener i VelocityTracker.

Ustaw zakres wartości animacji

Jeśli chcesz ograniczyć wartość właściwości do określonego zakresu, możesz ustawić minimalne i maksymalne wartości animacji. To ustawienie zakresu jest szczególnie przydatne podczas animowania właściwości, które mają swój wewnętrzny zakres, np. alfa (od 0 do 1).

Uwaga: animacja zwięzła się kończy, gdy jej wartość osiągnie wartość minimalną lub maksymalną.

Aby ustawić wartości minimalną i maksymalną, wywołaj odpowiednio metody setMinValue() i setMaxValue(). Obie metody zwracają obiekt animacji, dla którego ustawiono wartość.

Określ tarcie

Metoda setFriction() umożliwia zmianę układu animacji. Określa, jak szybko zmniejsza się prędkość w animacji.

Uwaga: jeśli nie ustawisz barier na początku animacji, domyślnie zostanie użyta wartość tarcia równa 1.

Metoda zwraca obiekt, którego animacja korzysta z podanej przez Ciebie wartości tarcia.

Kod demonstracyjny

Przykład poniżej przedstawia przechylenie w poziomie. Prędkość przechwycona z modułu do śledzenia prędkości wynosi velocityX, a progi przewijania są ustawione na 0, a parametr max Scroll. Przeciwdziałanie jest ustawione na 1,1.

Kotlin

FlingAnimation(view, DynamicAnimation.SCROLL_X).apply {
    setStartVelocity(-velocityX)
    setMinValue(0f)
    setMaxValue(maxScroll)
    friction = 1.1f
    start()
}

Java

FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);
fling.setStartVelocity(-velocityX)
        .setMinValue(0)
        .setMaxValue(maxScroll)
        .setFriction(1.1f)
        .start();

Ustaw minimalną widoczną zmianę

Gdy animujesz właściwość niestandardową, która nie jest zdefiniowana w pikselach, ustaw minimalną zmianę wartości animacji, która jest widoczna dla użytkowników. Określa rozsądny próg zakończenia animacji.

Nie musisz wywoływać tej metody podczas animowania elementu DynamicAnimation.ViewProperty, ponieważ minimalna widoczna zmiana pochodzi z właściwości. Na przykład:

  • Domyślna minimalna wartość widocznej zmiany to 1 piksel w przypadku właściwości widoku, takich jak TRANSLATION_X, TRANSLATION_Y, TRANSLATION_Z, SCROLL_X i SCROLL_Y.
  • W przypadku animacji z obrotem, np. ROTATION, ROTATION_X i ROTATION_Y, minimalna widoczna zmiana to MIN_VISIBLE_CHANGE_ROTATION_DEGREES, czyli 1/10 piksela.
  • W przypadku animacji, które korzystają z przezroczystości, minimalna widoczna zmiana to MIN_VISIBLE_CHANGE_ALPHA, czyli 1/256.

Aby ustawić minimalną widoczną zmianę dla animacji, wywołaj metodę setMinimumVisibleChange() i przekaż jedną z minimalnych widocznych stałych lub wartość, którą trzeba obliczyć dla właściwości niestandardowej. Więcej informacji o obliczaniu tej wartości znajdziesz w sekcji Obliczanie minimalnej wartości widocznej zmiany.

Kotlin

anim.minimumVisibleChange = DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE

Java

anim.setMinimumVisibleChange(DynamicAnimation.MIN_VISIBLE_CHANGE_SCALE);

Uwaga: wartość musisz przekazać tylko wtedy, gdy animujesz właściwość niestandardową, która nie jest określona w pikselach.

Obliczanie minimalnej wartości widocznej zmiany

Aby obliczyć minimalną wartość widocznej zmiany dla właściwości niestandardowej, użyj tego wzoru:

Minimalna widoczna zmiana = Zakres wartości właściwości niestandardowej / Zakres animacji w pikselach

Na przykład właściwość, którą chcesz animować, rozwija się od 0 do 100. Odpowiada to zmianie o 200 pikseli. Zgodnie ze wzorem minimalna wartość widocznej zmiany wynosi 100 / 200 i odpowiada 0, 5 piksela.