#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:

morphAnim.animFab(R.drawable.ic_line_to_done, true);
Animator anim = ViewAnimationUtils.createCircularReveal(layoutSuccess,
        centerX, centerY, startRadius, endRadius);
layoutSuccess.setVisibility(View.VISIBLE);
anim.addListener(new AnimatorListenerAdapter() {
    @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            addStar(counter == result);
            createReadyView();
        }
    });
anim.start();

centerX = contentNumbersBricksAdding.getRight();
centerY = contentNumbersBricksAdding.getBottom();
double valueToSqrt =
Math.pow((double) contentNumbersBricksAdding.getWidth(), 2)
+ Math.pow((double) contentNumbersBricksAdding.getHeight(), 2);
endRadius = (int) Math.sqrt(valueToSqrt);

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: