#10 Circular reveal animation

W poprzednim wpisie pokazałem jak działa aktywność dodawania, ale w jednym miejscu nie było w ogóle animacji, co skutkowało dziwnym pojawianiem się obiektów. Dzisiaj zajmiemy się dalej tym oknem i dodamy tą animację.

Po poprawkach aktywność  działa w ten sposób, że po kliknięciu na strzałkę sprawdza, czy wartość jest prawidłowa. Na tej podstawie rozpoczyna animację wypełniania widokiem sukces:

lub porażka

Widoki te są zdefiniowane jako osobne layouty, z ustawionym parametrem hide. Po zakończeniu wypełniania w tle ustawia wartości dla kolejnego zadania, tj liczba belek na stosie, oraz uzupełnia gwiazdkę, w zależności od wyniku poprzedniego działania. Po kliknięciu na środek ekranu cofa animację i wyświetla widok z nowymi wartościami. Dzisiaj chciałem się skupić właśnie na tej animacji wypełniania ekranu zawartością.

Nazywa się ona circular reveal i pojawiła się razem z Material Design, choć aktualnie znajduje się już w support library i możemy z niej korzystać w starszych wersjach. Metoda tworząca tą animację przyjmuje aż 5 parametrów:
– widok na którym wywołujemy animację
– środek tego widoku na którym wywołujemy animację (współrzędne x, y)
– punkt startowy i końcowy promienia animacji.

Oto jak wygląda ta animacja, ustawiłem czas trwania na 4 sekundy:

Kodzik, który obsługuje tą animację w przypadku prawidłowej odpowiedzi wygląda tak:
Ważną rzeczą jest ustawienie parametru visibility dla layoutu który ma przykryć nasz główny layout. Jeszcze parametry które wykorzystujemy w tej metodzie:
Pobieramy X i Y, czyli środek koła z którego będzie rozpoczynała się animacja, ustawiamy startRadius na 0, oraz obliczamy endRadius z wzoru na przekątną prostokąta, czyli tego wzoru:
Dla animacji powrotnej, zamieniamy po prostu punkt startowy i końcowy promienia, czyli startRadius z endRadius. Oto jaki efekt uzyskujemy finalnie, po ustawieniu animacji do normalnej szybkości:
Ps. To już 10 wpis, czyli jesteśmy na półmetku w konkursie DSP 😉
Pozdrawiam!