#6 Morphing – animujemy floating action button cz.2 ścieżki

W poprzedniej części opisałem jak stworzyć animację morphingu bez jednego aspektu, mianowicie ścieżek, czyli rzeczy zgoła najpotrzebniejszej. Dlatego dzisiaj skupimy się na ścieżkach.

Przykładowa ścieżka wygląda tak:

W języku svg tak:

Z kolei jako png tak (kliknij aby zobaczyć):

Główna zasada tworzenia ścieżek do morphingu jest taka, że muszą być kompatybilne, tzn muszą być stworzone z takiej samej ilości elementów, czyli liter i cyfr przy nich, poukładanych w takiej samej kolejności, różniących się oczywiście zawartością, np:
Widzimy tutaj sporo 0, ale dzięki temu uzyskujemy kompatybilność, a efekt który dają nam te ścieżki w zwolnionym tempie wygląda tak:
Noo dobra, wytłumaczyłem jak to musi wyglądać, teraz jak transformować pliki svg na ścieżki? Na początku trafiłem na stronę svg2android. Jeśli wrzucimy tam plik svg, i zaznaczymy opcję:
„Bake transforms into path (experimental)”
to otrzymamy poprawną ścieżkę. To samo robimy z drugim plikiem do którego chcemy morphować i voilla. Chociaż nie do końca, bo jak pisałem powyżej w zależności od złożoności ikony możemy otrzymać różne długości ścieżek i trzeba to wyrównać, można to zrobić oczywiście ręcznie jeśli ścieżka jest krótka jak tutaj:
 
Które to ścieżki dają nam taki efekt:
Jest jednak szybszy sposób 😉
Biblioteka vectalign, pobierany sobie stamtąd plik .jar, uruchamiamy go i podajemy paramtery –start nazwa pierwszego svg, –end nazwa drugiego svg tak wygląda efekt:
Kopiujemy sobie ścieżki z pliku wynikowego i uzyskujemy bardzo ładną animację, np taką:
Dla porządku dodam jeszcze ścieżki dla tej konkretnej animacji:
 
I to już wszystko co udało mi się odkryć w temacie morphingu, tak naprawdę dowolną ikonę możemy przerobić na svg, a następnie na ścieżkę, dlatego mam wrażenie że w projekcie jeszcze pojawi się tego typu animacja nie raz i to niekoniecznie na tak małych obiektach jak floating action button 😉
Pozdrawiam!