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