Animacja morfingu SVG: dopasuj ścieżki, zanim zaczniesz animować

Jeśli obrys ma pozostać taki sam, a cały znak ma się obracać, zamiast tego ustaw wspólny punkt obrotu SVG.

Animacja morfingu SVG zmienia geometrię kształtu między dwoma stanami. Aby natywnie interpolować dane ścieżki, przygotuj zgodne struktury poleceń i zdecyduj, które punkty mają sobie odpowiadać. Dwa atrakcyjne rysunki stanów końcowych mogą mimo to dać zapadnięty lub skręcony kształt w połowie animacji.

Reguły animacji danych ścieżki W3C wymagają tej samej liczby i tych samych typów poleceń w tej samej kolejności, aby interpolacja była płynna. To wymóg dotyczący struktury. Nie określa on, który narożnik logo powinien stać się którym narożnikiem w jego następnym stanie.

Zacznij od prostej pary, którą możesz dokładnie obejrzeć. Poniższe autorskie przykłady wykorzystują kwadrat, romb i kwadrat z celowo odwróconą kolejnością narożników, aby rozdzielić te dwie decyzje.

Zbuduj dwie ścieżki z odpowiadającymi sobie narożnikami

Ten ręcznie zapisany kwadrat i romb używają M L L L Z: przejdź do pierwszego narożnika, narysuj trzy linie i zamknij kształt. Każda para współrzędnych ma odpowiadającą jej pozycję w drugiej ścieżce.

<svg id="matched" viewBox="0 0 160 160"
  xmlns="http://www.w3.org/2000/svg"
  role="img" aria-label="Square morphing into a diamond">
  <path fill="#147d78" d="M30 30L130 30L130 130L30 130Z">
    <animate attributeName="d" dur="2s" begin="0s"
      fill="freeze" calcMode="linear"
      values="M30 30L130 30L130 130L30 130Z;M80 20L140 80L80 140L20 80Z" />
  </path>
</svg>

Element animate w SVG zmienia atrybut w czasie. Tutaj zmienia d przez dwie sekundy. Atrybut animacji fill="freeze" zachowuje jej stan końcowy; zielone wypełnienie ścieżki ustawiane przez fill jest osobnym ustawieniem sposobu malowania.

Podczas sprawdzania umieść przykład na samodzielnej stronie HTML. Uruchamia się automatycznie bez poniższego skryptu do inspekcji. Przy wdrażaniu sterowania w docelowym interfejsie zdecyduj, kiedy animacja ma się odtwarzać, i zapewnij stan statyczny odpowiedni dla tego interfejsu.

Przyporządkowanie narożników jest jawne:

Oba obrysy są prowadzone wzdłuż obwodu w tym samym kierunku. Pierwszy narożnik przesuwa się ku górnemu wierzchołkowi rombu, drugi ku prawemu i tak dalej. To świadoma decyzja projektowa autora, a nie interpretacja znaczenia któregokolwiek z kształtów.

Zatrzymaj faktyczną interpolację

Obejrzyj początek, środek i koniec, zanim dostosujesz funkcję łagodzenia ruchu lub dodasz efekty dekoracyjne. W przypadku powyższego SVG ta funkcja pomocnicza zatrzymuje oś czasu i przechodzi do czasu podanego w sekundach:

const svg = document.querySelector('#matched');
 
function showMorphAt(seconds) {
  svg.pauseAnimations();
  svg.setCurrentTime(seconds);
}
 
showMorphAt(1); // Midpoint of the two-second animation

MDN opisuje pauseAnimations() i setCurrentTime() jako metody sterowania osią czasu SVG. Powiąż funkcję pomocniczą z przyciskami o wartościach 0, 1 i 2. To trzy pozycje w ramach jednej interpolacji, a nie trzy rysunki podmieniane jeden na drugi.

Po jednej sekundzie interpolacja liniowa umieszcza każdą współrzędną w połowie między jej dwiema wartościami końcowymi. Pierwszy narożnik znajduje się więc w punkcie 55, 25. Pełny zapis ścieżki w połowie tej animacji w naszym autorskim przykładzie wygląda tak:

M55 25L135 55L105 135L25 105Z

Sprawdziliśmy tę natywną animację SVG w przeglądarce na początku, w połowie i na końcu, a następnie odtworzyliśmy ją raz. W połowie kształt pozostał wypełnionym czworokątem, a odtwarzanie zakończyło się rombem. Ta obserwacja dotyczy tych ręcznie zapisanych ścieżek w testowanej przeglądarce; nie jest wynikiem konwersji w PerfectVector ani testem zgodności między przeglądarkami.

Jednakowa liczba poleceń nadal może prowadzić do nieudanego morfingu

Zachowaj początkowy kwadrat, ale odwróć kolejność narożników kwadratu docelowego:

Start:  M30 30L130 30L130 130L30 130Z
Target: M30 30L30 130L130 130L130 30Z

Oba stany końcowe wyglądają jak ten sam kwadrat. Oba ciągi nadal używają M L L L Z. Jednak drugi i czwarty narożnik przemieszczają się teraz przez wnętrze kształtu, aby zamienić się miejscami. W połowie animacji ich współrzędne się pokrywają:

M30 30L80 80L130 130L80 80Z

Wszystkie cztery punkty leżą na przekątnej. W naszym teście w przeglądarce wypełniony kwadrat zapadł się do tej przekątnej w połowie animacji i powrócił do postaci kwadratu na końcu. Zgodna struktura poleceń umożliwiła interpolację; dopasowanie niewłaściwych punktów dało niepożądany wynik.

Gdy wyeksportowana para skręca się podczas animacji, sprawdź pierwszy punkt i kierunek prowadzenia każdej ścieżki. Następnie sprawdź, czy narożniki i charakterystyczne elementy krzywych zajmują odpowiadające sobie pozycje. Bezkrytyczne dodawanie węzłów może utrudnić dostrzeżenie tych zależności. Poradnik porządkowania węzłów pomaga uprościć statyczną grafikę, ale zachowaj ustalone przyporządkowanie między oboma stanami.

Uwzględnij otwory i oddzielne części

Logo może zawierać zewnętrzną granicę, otwór i oddzielny akcent. Traktuj je jako części, którym trzeba świadomie przypisać odpowiedniki w następnym stanie. Przed animowaniem wypisz, która część zmienia się w którą. Jeśli jeden stan ma otwór, a drugi go nie ma, zdecyduj, jak otwór powinien zniknąć, zamiast zakładać, że zgodna liczba węzłów rozstrzygnie tę kwestię.

Dokumentacja fill-rule wyjaśnia, jak SVG określa, które obszary znajdują się wewnątrz ścieżki. Podczas przygotowywania i testowania ścieżki złożonej zachowaj zamierzony sposób wypełniania. Jeśli otwór wygląda nieprawidłowo już w statycznym stanie końcowym, skorzystaj z poradnika rozwiązywania problemów z wypełnionymi otworami, zanim dodasz przejście.

Praktyczna kolejność sprawdzania:

1. Sprawdź sylwetkę, otwory i oddzielne detale każdego stanu końcowego.
2. Zidentyfikuj odpowiadające sobie podścieżki lub oddzielne elementy.
3. Dopasuj ich punkty początkowe, kierunek i istotne cechy kształtu.
4. Sprawdź stany pośrednie pod kątem krzyżujących się granic lub znikających detali.
5. Dostosuj czas animacji dopiero po zaakceptowaniu tej geometrii.

Oddzielne elementy mogą być łatwiejsze do kontrolowania, gdy niewielki akcent ma niezależnie zanikać lub się poruszać. Ten wybór jest częścią projektu animacji; nie trzeba na siłę umieszczać wszystkiego w jednej ścieżce złożonej.

Sprawdź reguły swojego mechanizmu animacji

Natywny przykład celowo używa zgodnych poleceń. Biblioteka może wykonywać dodatkowe przygotowanie, więc jej wymagania mogą się różnić.

Dokumentacja MorphSVG GSAP opisuje konwersję danych ścieżki na krzywe trzeciego stopnia i dodawanie punktów w razie potrzeby. Udostępnia też ustawienia przyporządkowania, takie jak shapeIndex. Użyj tych ustawień, aby sprawdzić zgodność punktów, zamiast zakładać, że dwa niezależnie wyeksportowane kształty są już dopasowane.

KUTE.js opisuje inny model przygotowania w swoim poradniku SVG Morph, w tym osobny sposób pracy z podścieżkami. Sprawdź wersję i komponent, których faktycznie używasz, zanim zastosujesz do nich ograniczenia natywnych ścieżek lub porady dotyczące innej biblioteki.

Wybierz prostą, reprezentatywną parę dla tego mechanizmu i obejrzyj jej geometrię pośrednią. Udany test przejścia od kwadratu do rombu nie przesądza o zachowaniu szczegółowego, złożonego logo. Zachowaj kopię grafiki źródłowej, aby móc odróżnić zmiany wprowadzone podczas przygotowywania animacji od oryginalnego projektu.

Przygotuj grafikę rastrową przed dopasowaniem stanów

Jeśli brakuje oryginalnej grafiki wektorowej i pozostała tylko grafika PNG lub JPG, proces konwersji obrazu na grafikę wektorową w PerfectVector może pomóc przygotować edytowalny plik SVG do dalszej oceny. Porównaj sylwetkę, otwory i oddzielne obszary ze źródłem, a następnie obejrzyj pobrane ścieżki. Poradnik edycji SVG opisuje następny etap porządkowania.

Wektoryzacja dwóch obrazów nie ustala semantycznego przyporządkowania między ich punktami ani nie tworzy gotowego morfingu. Najpierw zaakceptuj każdy statyczny rysunek, a następnie przygotuj parę dla wybranego narzędzia do animacji. Jeśli masz już edytowalny oryginał wektorowy, pracuj na nim zamiast ponownie wektoryzować kopię rastrową.

Sprawdzaj stan w połowie animacji po każdej istotnej zmianie w parze. Prostszy stan końcowy jest przydatny tylko wtedy, gdy przejście nadal przebiega zgodnie z zamierzonymi cechami kształtu. Artykuły na blogu dotyczące edycji zawierają powiązane wskazówki dotyczące przygotowania materiałów źródłowych.

Często zadawane pytania

Czy ścieżki SVG muszą mieć tę samą liczbę punktów, aby można było wykonać morfing? W natywnej interpolacji danych ścieżki liczy się zgodna struktura poleceń, w tym ich typy i kolejność. Biblioteka może normalizować różne struktury, więc sprawdź jej dokumentację, zamiast opierać się wyłącznie na liczbie punktów.

Dlaczego mój morfing SVG skręca się, mimo że stany końcowe wyglądają poprawnie? Punkty mogą odpowiadać sobie w niepożądanej kolejności. Sprawdź punkt początkowy, kierunek i dopasowanie cech kształtu, a następnie obejrzyj stan w połowie animacji. Identyczne sylwetki stanów końcowych mogą ukrywać zapadnięty kształt pośredni.

Czy można automatycznie wykonać morfing między dwoma oddzielnymi plikami SVG? Narzędzie do animacji potrzebuje zgodnej lub znormalizowanej geometrii oraz użytecznego przyporządkowania między stanami. Same rozszerzenia dwóch plików nie zapewniają tego przyporządkowania; sprawdź ścieżki, otwory i oddzielne części.

Czy konwersja dwóch plików PNG na SVG tworzy dopasowaną parę do morfingu? Nie. Konwersja przygotowuje statyczne wersje wektorowe do dalszej oceny. Nadal musisz dopasować ich części i punkty, wybrać mechanizm animacji i sprawdzić przejście.

Źródła

1. W3C — SVG paths — określa strukturę natywnej interpolacji danych ścieżki i dopasowanie parametrów.
2. MDN — animate — opisuje animację atrybutów w czasie.
3. MDN — pauseAnimations — umożliwia zatrzymanie osi czasu na potrzeby inspekcji.
4. MDN — setCurrentTime — opisuje przechodzenie do określonego czasu na osi czasu SVG, podawanego w sekundach.
5. MDN — fill-rule — wyjaśnia zachowanie obszarów wewnętrznych w grafice złożonej.
6. GSAP — MorphSVG — opisuje normalizację i ustawienia przyporządkowania punktów.
7. KUTE.js — SVG Morph — opisuje przygotowanie właściwe dla tego komponentu i sposób pracy z podścieżkami.

Dopasuj części i obejrzyj stan w połowie animacji, zanim dopracujesz jej przebieg w czasie. Jeśli Twoja grafika wyjściowa jest rastrowa, przygotuj plik SVG do dalszej oceny, zweryfikuj jego statyczną geometrię, a następnie zbuduj odpowiadające sobie stany animacji.