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 Compose

Animacja związana z ruchem polega na działaniu na siłę tarcia, która jest proporcjonalna do z prędkością obiektu. Służy do animowania właściwości obiektu aby stopniowo zakończyć animację. Ma on początkowy pęd, otrzymywane głównie dzięki szybkości gestów, ale stopniowo zwalnia. animacja kończy się, gdy prędkość jest dostatecznie niska że nie powoduje to żadnych widocznych zmian na ekranie urządzenia.

Rysunek 1. Animacja przesunięcia
.

Aby dowiedzieć się więcej o powiązanych tematach, przeczytaj te przewodniki:

Dodawanie biblioteki AndroidaX

Aby korzystać z animacji opartych na fizyce, musisz dodać do projektu bibliotekę AndroidaX w następujący sposób:

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

    Odlotowe

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

    Kotlin

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

Utwórz animację przelotu

Zajęcia FlingAnimation umożliwiają tworzenie dla animacji przesuwania obiektu. Aby utworzyć animację przelotu, utwórz wystąpienia klasy FlingAnimation oraz podaj obiekt i właściwości 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ą właściwość animacji zmienia się na początku animacji. Domyślna prędkość początkowa to ustawiona na 0 pikseli na sekundę. Dlatego należy zdefiniować prędkość początkową aby mieć pewność, że animacja nie skończy się od razu.

Jako prędkości początkowej możesz użyć stałej wartości lub oprzeć ją jest wyższa niż prędkość gestu dotykowego. Jeśli zdecydujesz się podać stałą wartość, określ wartość w dp na sekundę, a następnie przekonwertuj ją na piksele na sekundę. Definiowanie wartości dp na sekundę umożliwia określenie prędkości niezależnie od gęstości i formatu urządzenia. Więcej informacji na temat: do konwersji prędkości początkowej na piksele na sekundę, zapoznaj się z Konwertuję dp na sekundę do pikseli na sekundę w Animacja wiosenna.

Aby ustawić prędkość, wywołaj metodę setStartVelocity() i przekaż jej prędkość w pikselach na sekundę. Metoda zwraca obiekt flingu w w której ustalona jest prędkość.

Uwaga: użyj atrybutu GestureDetector.OnGestureListener oraz VelocityTracker klasy do pobrania i obliczenia oraz szybkość gestów dotykowych.

Ustaw zakres wartości animacji

Możesz ustawić minimalne i maksymalne wartości animacji ograniczyć wartość właściwości do określonego zakresu. Ten element sterujący zakresu jest szczególnie przydatne podczas animowania właściwości, które mają zakresu, np. alfa (od 0 do 1).

Uwaga: gdy wartość animacji przesunięcia osiągnie wartość wartość minimalną lub maksymalną, animacja zostanie zakończona.

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

Ustaw tarcie

Metoda setFriction() pozwala zmienić: i usterek. Określa, jak szybko zmniejsza się prędkość w animacji.

Uwaga: jeśli nie ustawisz bariery na początku animacja używa domyślnej wartości tarcia wynoszącej 1.

Metoda zwraca obiekt, którego animacja używa wartości tarcia i udostępniania.

Kod demonstracyjny

Przykład poniżej pokazuje przesuwanie w poziomie. Prędkość przechwycona z tracker prędkości to velocityX, a granice przewijania to ustaw na 0 i maxPrzewiń. Tarcza jest ustawiona 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ę

Jeśli animujesz właściwość niestandardową, która nie jest zdefiniowana w pikselach, ustaw parametr minimalna zmiana wartości animacji widocznej dla użytkowników. it określa rozsądny próg zakończenia animacji.

Nie trzeba wywoływać tej metody przy animowaniu DynamicAnimation.ViewProperty, ponieważ minimalna widoczna zmiana jest pobierana z usługi. Na przykład:

  • Domyślna minimalna widoczna wartość zmiany to 1 piksel na potrzeby wyświetlania takie jak TRANSLATION_X, TRANSLATION_Y, TRANSLATION_Z, SCROLL_X i SCROLL_Y.
  • W przypadku animacji korzystających z obrotu, np. ROTATION, ROTATION_X i ROTATION_Y, czyli minimalna widoczność zmiana to MIN_VISIBLE_CHANGE_ROTATION_DEGREES, czyli 1/10 piksela.
  • W przypadku animacji używających przezroczystości minimalna widoczna zmiana to MIN_VISIBLE_CHANGE_ALPHA, czyli 1/256.

Aby ustawić minimalną widoczną zmianę dla animacji, wywołaj funkcję setMinimumVisibleChange() i prześlij jedną 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 zapoznaj się z 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ą widoczną wartość zmiany dla właściwości niestandardowej, użyj funkcji następujący wzór:

Minimalna widoczna zmiana = zakres wartości właściwości niestandardowej / zakres animacja w pikselach

Na przykład właściwość, którą chcesz animować, zmienia się od 0 do 100. Odpowiada to zmianie o 200 pikseli. Zgodnie ze wzorem minimalna wartość wartość widocznych zmian to 100 / 200 równa się 0,5 piksela.