Plan zajęć cz. 5 – Animacja aktualności

Zgodnie z zapowiedzią w ostatnim tygodniu, w tym tygodniu pracowałem nad animacją wiadomości pobranych ze stron Internetowych. Dodatkowo dokonałem parę zmian. Między innymi dodałem na ekranie logowania automatyczne zaznaczanie pola gdzie użytkownik wprowadza swój login. Dzięki temu użytkownik może od razu zacząć wypełniać formularz bez konieczności manualnego zaznaczenia.

Animacja wiadomości

Jak się okazało animowanie długich wiadomości nie jest najłatwiejszym zadaniem. Pierwszym moim podejściem było stworzenie długiego łańcucha zawierającego wszystkie informacje. Następnie chciałem go przesunąć poza widoczny obszar aplikacji i powoli go przesuwać w lewą stronę co będzie dawało animację.

Niestety nie obyło się bez problemów. Aplikacja może wyświetlić element graficzny o maksymalnej długości całego okna aplikacji. Jeżeli główne okno jest mniejsze niż cały ciąg z wiadomościami to jest on ucinany do rozmiaru okna bazowego. Przez co nie można wyświetlić w prosty sposób długiego ciągu. Po napotkaniu tego problemu jakiś czas przeszukiwałem Internet w poszukiwaniu potencjalnych podpowiedzi lub też rozwiązań. Niestety nie natrafiłem na nic konkretnego. Już miałem dać sobie spokój na ten dzień, jak wpadłem na pomysł wykorzystania kontenera ScrollViewer. Kontener ten pozwala nam na dodanie suwaka do dowolnego innego elementu graficznego. Co pozwoliło mi na wyświetlenie całego ciągu wiadomości bez jego ucinania.

Kolejnym etapem była animacja ciągu wiadomości. Zastosowałem tutaj animacje marginesu zaczynając od najbardziej przesuniętego w prawo tak aby wiadomość była niewidoczna w tym przypadku margines z lewej strony wynosił długość samego widoku tygodnia. Powoli przesuwać go w lewą stronę aż wyjedzie poza widziany ekran. Całość zapętlić w nieskończoną pętlę. Tym sposobem mamy animację, która pokaże cały łańcuch wiadomości i przesunie go przez całą widoczną długość okna. Po czym cały proces animowania zacznie się od początku.

Po całej animacji pozostaje długa przerwa w wiadomościach więc postanowiłam dodać kolejny łańcuch, ten sam, który będzie animowany zaraz po pierwszym. Ta część już wymagała trochę planowania i matematyki. Finalnie udało mi się osiągnąć odpowiednie proporcje opóźnienia dwóch animacji w taki sposób, że uruchamiają się jedna po drugiej.

Rozwiązanie to nie jest rozwiązaniem idealnym, znalazłem już pierwszy problem. Kiedy użytkownik naciśnie na przycisk wiadomości w celu otworzenia strony z jej treścią wszystko jest jak najbardziej poprawne. Tylko w przypadku kiedy przycisk jest w połowie niewidoczny, ponieważ jeszcze nie wjechał całkowicie na obszar widzialny, to animacja jest przesuwana do przodu aby wyrenderować cały przycisk. Ostatecznie psując synchronizację obu animacji.

Kończąc

Animacje okazały się ciekawym wyzwaniem. Pozostawiają jeszcze trochę możliwości na poprawę. Na chwilę obecną uznaję tą część aplikacji za ukończoną. Pozostaje tylko stworzenie klas pobierających informacje z wcześniej wskazanych stron. Aby można było wypełnić kontener odpowiednimi wiadomościami.

Pisząc ten wpis wpadłem na nowy pomysł w jaki można animować wyświetlane wiadomości. Cały proces opierałby się na animowaniu pojedynczych wiadomości, a nie ich listy jako całości. Tym sposobem nie potrzeba używać ScrollViewer oraz istnieje możliwość, że pozbycie się tego kontenera pozwoli na zmniejszenie przesunięcia się wiadomości po ich naciśnięciu. Może kiedyś jeszcze przed wypuszczeniem samej aplikacji sprawdzę czy taki sposób nie będzie lepszy.

Cały kod aplikacji można zobaczyć na moim koncie github /kkolodziejczak/ZUTSchedule

Leave a Reply

Translate »