Tu na HASHTAGI , nasi klienci polegają na nas, jeśli chodzi o rzetelne zarządzanie treściami w mediach społecznościowych. Klienci Sprout korzystają z naszych aplikacji mobilnych na iOS i Androida, aby móc zarządzać swoimi media społecznościowe w podróży . Kiedy zdecydowaliśmy się zaktualizować nasze środowisko tworzenia wiadomości na Androida do obsługi wydawniczy wiele obrazów dołączonych do tweeta, chcieliśmy wyjaśnić użytkownikowi, że dołączono wiele obrazów, nawet jeśli nie są one widoczne na ekranie tworzenia wiadomości.



Rozwiązanie projektowe: użyj animacji do oznaczania obrazów poza ekranem

Biorąc pod uwagę nasz projekt i ograniczenia ekranu mobilnego, załączone obrazy mogły znajdować się poza ekranem. Chociaż nie jest to idealne rozwiązanie, było to konieczne ustępstwo, biorąc pod uwagę gęstość obsługiwanych funkcji na ekranie tworzenia wiadomości. W przypadkach, w których obrazy są w rzeczywistości poza ekranem, zdecydowaliśmy się zaimplementować poziomą animację „odbijania”, która wskazywałaby, że listę obrazów można przewijać.



Wybór implementacji: ObjectAnimator + EasingInterpolator

Istnieje wiele mechanizmów obsługujących podstawowe animacje w systemie Android. Niektóre wymagają konfiguracji w kodzie, inne w xml. Wybierając spośród alternatyw, zdecydowaliśmy się nadać priorytet kompatybilności wstecznej (obsługujemy wersję 15+ SDK), prostocie implementacji i konfigurowalności. Ostatecznie zdecydowaliśmy się na połączenie ObjectAnimator i EasingInterpolator . Oba można skonfigurować w kodzie Java, który ostatecznie jest bardziej przyjazny dla programistów: składnia jest znana, a logikę animacji można całkowicie zdefiniować w jednym miejscu w bazie kodu.

ObjectAnimator to klasa udostępniana przez platformę systemu Android, która umożliwia modyfikowanie właściwości widoku. Ponieważ ruch domyślnego interpolatora dla ObjectAnimator nie wydawał się naturalny w naszym przypadku użycia, zdecydowaliśmy się użyć EasingInterpolator, który jest przydatną biblioteką, która udostępnia wiele różnych modeli interpolacji.

próbka-android-bounce-animation-easing-sample

Kod animacji odbijania

private void doBounceAnimation(View targetView) { ObjectAnimator animator = ObjectAnimator.ofFloat(targetView, 'translationX', 0, 25, 0); animator.setInterpolator(new EasingInterpolator(Ease.ELASTIC_IN_OUT)); animator.setStartDelay(500); animator.setDuration(1500); animator.start(); }

Na szczęście kod obsługujący takie zachowanie jest bardzo zwięzły. W linii 1 określamy, w jaki sposób chcemy animować targetView. W tym przypadku chcemy zmodyfikować właściwość „translationX” elementu targetView, która jest pozycją x widoku po układzie. Chcemy animować od przesunięcia 0 dp od pozycji początkowej do przesunięcia 25 dp w prawo i ostatecznie wrócić do pierwotnego przesunięcia 0 dp.

W linii 2 określamy typ interpolacji, jaki chcielibyśmy. Bawiliśmy się różnymi modelami interpolacji, ale ostatecznie zdecydowaliśmy, że Ease.ELASTIC_IN_OUT wygląda najlepiej w naszym przypadku użycia.

HASHTAGI Android Bounce Animation in Compose

Aby uzyskać więcej informacji na temat obsługi animacji właściwości w systemie Android, zapoznaj się z Deweloper Property Animation doc .



Animacja w akcji

Jesteśmy bardzo zadowoleni z naszych aktualizacji funkcji tworzenia wiadomości na urządzenia przenośne. Idąc dalej, planujemy nadal wzbogacać nasze mobilne doświadczenie o responsywne interfejsy wizualne. Chcesz pracować z nami nad tego typu rzeczami? Chodź Pracuj z nami w naszym zespole mobilnym z Androidem!

Podziel Się Z Przyjaciółmi: