#5 Morphing – animujemy floating action button cz.1

Razem z pojawieniem się Material Design, Androida Lollipop wprowadzono nowy sposób przechowywania ikon. Zamiast plików graficznych jak np png postawiono na zgodny z ideą flat design plik typu svg. Nietrudno zrozumieć taką decyzję:

xxxhdpi to rozmiar dla fullHd, ileż jeszcze można tych x dodać, żeby obsługiwać 4k, albo w przyszłości 16k? 😉 Svg ma ten plus, że skaluje się bez utraty jakości, tzn jest jeden plik, który obsłuży wszystkie rozdzielczości. Dla bardziej zainteresowanych standardem, który opracował W3C zresztą link.

Aplikacji które korzystały by jednak z tego typu rozwiązań jakoś błyskawicznie nie przybywa (png znajdujący się w folderze xxxhdpi przeskaluje się na ekranie 4k, a że smartfony mają rozmiar jakieś 6-7 cali te większe, tablety jakieś 10 cali, to i tak tego gołym okiem nie widać. Może na telewizorze 4k to widać, jak się patrzy z bliska, ale nie po to są telewizory, żeby patrzeć z bliska ;). Dlatego też pliki png mają się dobrze. Zaletą stosowania svg jest możliwość korzystania z morphingu, który na png musielibyśmy wywołać jakimś zewnętrznym programem, przerabiając go zresztą na gifa. No i tak ten gif by się potem skalował na większy ekran.. Ok, wiemy już, że powinniśmy korzystać z svg. Samo korzystanie jest takie samo jak z png w Androidzie, wrzucamy plik tylko do jednego folderu: drawable, a widać go wszędzie. A teraz zabierzmy się za morphing, ufff trochę czasu mi zajęło rozgryzienie tego.

Aby móc użyć animacji morphingu na androidzie poniżej wersji 5.0 skorzystałem z biblioteki vector-compat, która dostarczyła kilka gotowych animacji:

Nie pasowały one jednak do tego co chciałem uzyskać, dlatego też zrobiłem kilka swoich. Oto jak się to robi w androidzie.
Zacznę może od kodu w javie, musimy odnieść się do pliku xml typu animated vector:
Zawartość tego pliku (ic_line_to_done.xml) to:
Gdzie widzimy 3 istotne rzeczy:
– android:drawable, czyli lokalizację opisu naszej początkowej ikony, tej od której będzie zaczynała się animacja
– target totationGroup, czyli odnośnik do aimacji rotacji, przed zmianą ikony następuje obrócenie aktualnej, taki efekt dodający fantazji 😉
-target v, czyli właściwy odnośnik do naszej animacji morphingu
Plik line_to_done_rotation, czyli nasz obrót:
Nic trudnego, po prostu zwykły obrót ikony, trwający 200ms. Plik line_to_done_path, czyli zmiana naszych ścieżek:
Tutaj również jest łatwo, zwracam tylko uwagę na app:vc_valueType którego potrzebuje vector_comapt, żeby działać na starszych urządzeniach.
No i plik drawable, jest typu vector, oto jak wygląda:
Mamy tutaj grupę w której znajduje się plik path, czyli tak jak pisałem powyżej ścieżka opisująca wygląd naszej ikony. I przechodzimy do rzeczy najtrudniejszej, czyli właśnie ścieżek, oto jak przykładowo wyglądają:
M 48.0,54.0 L 31.0,42.0 L 15.0,54.0 L 21.0,35.0 L 6.0,23.0 L 25.0,23.0 L 25.0,23.0 L 25.0,23.0 L 25.0,23.0 L 32.0,4.0 L 40.0,23.0 L 58.0,23.0 L 42.0,35.0 L 48.0,54.0 
 
M 48.0,54.0 L 48.0,54.0 L 48.0,54.0 L 48.0,54.0 L 31.0,54.0 L 15.0,54.0 L 10.0,35.0 L 6.0,23.0 L 25.0,10.0 L 32.0,4.0 L 40.0,10.0 L 58.0,23.0 L 54.0,35.0 L 48.0,54.0
Mam nadzieję, że zaciekawieni, w następnej części opiszę jak uzyskać prawidłowe ścieżki z ikon znajdujących się tutaj. Bez tłumaczenia co oznaczają te liczby i litery, skupię się po prostu na tym w jaki sposób te ścieżki uzyskać i móc morfować dowolne ikony 😉

Finalnie uzyskałem takie efekty.

Pozdrawiam!