W poprzednich częściach tej serii zatrzymaliśmy się na tym, że jeden kolor wypełnia cały ekran. Dzisiaj pójdziemy krok dalej, czyli opiszę jak zrobić płynne przejście pomiędzy jedną, a drugą aktywnością.

Oto kroki które chcemy wykonać po wypełnieniu ekranu kolorem zieleni lub czerwieni:

1) płynna zmiana koloru na biały
2) jednoczesna animacja obiektu, zamiana symbolu „wykonane” na strzałkę
3) jednoczesna zmiana przycisku fab
4) kiedy już kolor zmieni się na biały usunięcie animacji przejścia pomiędzy aktywnościami
5) start nowej aktywności z animacją pojawiania się

Metoda, które wykonuje pierwsze cztery operacje wygląda tak:

MorphingAnimation morphingAnimationView = new 
    MorphingAnimation(getApplicationContext(), successV);
morphingAnimationView.animImageView(R.drawable.ic_done_to_line);
animateFab(R.drawable.ic_done_to_line, false);
ValueAnimator colorAnim = ObjectAnimator.ofInt(
    layoutSuccess, "backgroundColor",
    getResources().getColor(R.color.colorSuccessGreen), 
 getResources().getColor(R.color.icons));
colorAnim.setDuration(500);
colorAnim.setEvaluator(new ArgbEvaluator());
colorAnim.start();
colorAnim.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        Intent intent = new Intent(NumbersOrderActivity.this, 
      NumbersCompareActivity.class);
        startActivity(intent);
        overridePendingTransition(0, 0);
    }
});

Nowością która się tutaj pojawia jest klasa ValueAnimator. Klasa akurat w tym przypadku pozwala na płynną zmianę kolorów obiektu, z zielonego na biały. Na klasie jest założony listener, który po zakończeniu animacji uruchamia nową aktywność, z kolei metoda overridePendingTransition(0, 0) powoduje usunięcie domyślnej animacji otwarcia nowego activiti. Chciałem umieścić animację rozjaśniania w tym miejscu, ale zadziałało by to tak, że rozjaśniał by wszystko łącznie z paskiem i przyciskiem fab, a tego nie chciałem, celem było aby zmieniała się tylko zawartość ekranu. Przyjmowane przez metodę parametry to zero i zero co oznacza usunięcie animacji, pierwszy z tych parametrów, to animacja włączenia nowego activiti, drugi to wyłączenie starego. Jest też tutaj pewna asynchroniczność, mianowicie czas zmiany kolou to 500ms, z kolei animacja zmiany kształtu trwa 200ms, możliwe, że jeszcze w jakiś sposób to zmienię, ale na ten moment wygląda chyba nieźle.

Ostatnią istotną rzeczą jest kod, którego użyłem w nowej aktywności, wykonuje on punkt 5, czyli odpowiada za animację rozjaśnienia i jest uruchamiany podczas tworzenia activity, dzięki temu mamy animację już od samego początku. Po stronie javy prezentuje się tak:

Animation animFadeIn = AnimationUtils.loadAnimation(
    getApplicationContext(), R.anim.fade_in);
numbersCompareActivity.startAnimation(animFadeIn);

Po stronie xml w ten sposób:

<alpha
    android:duration="@integer/anim_duration"
    android:fromAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="1.0" />

Wydaje mi się, że jest samo-opisywalny i nie za wiele mogę tutaj powiedzieć 😉 A tak wygląda efekt finalny który udało mi się uzyskać:

Czym jest liczba? Korzystamy z nich na co dzień, ponieważ kiedyś nauczyliśmy się jak to robić, ale wyobraźmy sobie, że mamy przed sobą młody umysł. Umysł w którym ciężko się do czegoś odnieść, ponieważ nie ma zbyt wielu doświadczeń. W jaki sposób wytłumaczyć, czym jest liczba?

Po głębszym przemyśleniu chyba najlepiej będzie połączyć liczbę z ilością. Coś, co dziecko potrafi znaleźć w realnym świecie, jak 2 sztuki jabłka, czy 5 orzechów. W tej wersji spróbujmy po ilości „belek”, co zresztą sugeruje Montessori. Implementacja nie jest zbyt skomplikowana, dodajemy dwa przyciski, przy czym plus jest znacznie wyraźniejszy, bo chcemy zwrócić na niego uwagę. A do tego licznik ilości naszych belek, aby było maksymalnie 10. Po dojściu do maksymalnej liczby odblokuje się następne zadanie, jeszcze nie do końca wiem jak to będzie wyglądać 😉

Następnym krokiem będzie jakaś możliwość porównania ilości i dodania bądź odjęcia z każdej strony, aby nasza waga pozostała w równowadze. Mam nadzieję że będzie to zrozumiałe dla młodych osób 😉

Plany na najbliższym czas:
-dodanie fragmentów
-poprawienie wyglądu belek
-dodanie animacji dodawania poprzez zsuwanie z góry, odejmowania
-dodanie animacji plus/minus na dole
-następna aktywność: porównywanie

Projekt na github.

Pozdrawiam!