Animacja obrysu SVG: przygotuj pojedynczą trasę rysowania

Animacja obrysu SVG może stopniowo odsłaniać linię przez przesuwanie kreski wzdłuż jej ścieżki. Użyj stroke-dasharray, aby zdefiniować kreskę i odstęp, a następnie animuj stroke-dashoffset, aż obrys stanie się widoczny. MDN opisuje te właściwości jako właściwości malowania obrysu.

Ścieżka źródłowa decyduje o tym, co wygląda na rysowane. Otwarta ścieżka może odwzorowywać trasę ruchu pisaka przez środek znaku. Wypełniony kontur opisuje granicę znaku. Dodanie obrysu do tego konturu sprawia, że animacja biegnie wzdłuż jego krawędzi; same ustawienia kresek nie odsłaniają wypełnienia.

Zacznij od jednego małego kształtu, zanim zaplanujesz czas animacji całego logo. Poniższe przykłady, utworzone ręcznie, oddzielają trasę rysowania, wypełnioną grafikę i obwód, aby można było wybrać geometrię potrzebną do animacji.

Aby przesuwać całą ikonę wzdłuż krzywej, skorzystaj z procesu pracy ze ścieżką ruchu SVG, który oddziela trasę ruchu od grafiki.

Zacznij od otwartej ścieżki z obrysem

Ta autorska ścieżka biegnie w prawo, a następnie w górę. Jej fill jest wyłączone, więc widoczny znak powstaje wyłącznie z obrysu:

<div class="playing">
  <svg viewBox="0 0 140 130" role="img" aria-label="Open bent line">
    <path class="reveal route" pathLength="100" d="M30 90H100V30" />
  </svg>
</div>

Użyj tego kodu CSS, aby odsłonić linię w ciągu dwóch sekund:

.reveal {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
 
.route {
  fill: none;
  stroke: #147d78;
  stroke-width: 16;
  stroke-linecap: butt;
}
 
.playing .reveal {
  animation: draw 2s linear forwards;
}
 
@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
 
@media (prefers-reduced-motion: reduce) {
  .playing .reveal {
    animation: none;
    stroke-dashoffset: 0;
  }
}

pathLength="100" kalibruje operacje oparte na odległości do zadanej długości 100. Dokumentacja pathLength opisuje tę normalizację. Pojedyncza wartość stroke-dasharray określa zarówno długość kreski, jak i odstępu, więc 100 daje kreskę na całą długość ścieżki, po której następuje równie długi odstęp. Przesunięcie tego wzoru o 100 ukrywa obrys w tym przykładzie; zmiana przesunięcia na zero odsłania go.

Używaj tutaj liczb bez jednostek. stroke-dashoffset: 100% nie zastępuje 100 znormalizowanych jednostek ścieżki. Dokumentacja przesunięcia kresek w MDN podaje, że wartości procentowe odnoszą się do znormalizowanej przekątnej obszaru wyświetlania SVG, a nie do całkowitej długości ścieżki.

W przykładzie zastosowano płaskie zakończenie butt, aby łatwiej było sprawdzić zatrzymany stan początkowy. Inne style zakończeń mogą zmienić wygląd końców kreski. Dobierz zakończenie do grafiki, a następnie sprawdź pierwszą i ostatnią klatkę w rozmiarze, w jakim ikona będzie faktycznie wyświetlana. W przypadku dekoracyjnych powtórzeń porównaj kropkowane kontury i odstępy między zakończeniami, zanim wybierzesz długości kresek i odstępów.

Porównaj trasę z wypełnionym konturem

Gruby, zagięty pasek może wyglądać podobnie do tej linii z obrysem, choć ma inną geometrię. Ta druga, ręcznie utworzona ścieżka biegnie wokół granicy paska i zamyka się poleceniem Z:

<path class="reveal filled" pathLength="100"
  d="M30 82H92V30H108V98H30Z" />

Przy poniższych ustawieniach malowania zmiana przesunięcia kresek nie daje żadnego widocznego efektu:

.filled {
  fill: #ef8067;
  stroke: none;
}

Pasek pozostaje wypełniony, ponieważ nie ma obrysu, który można podzielić na kreski. Specyfikacja SVG painting W3C rozróżnia malowanie wnętrza kształtu i malowanie jego obrysu.

Jeśli zamiast tego ustawisz fill: none, dodasz obrys i animujesz tę zamkniętą ścieżkę, obrys będzie podążał po obwodzie: wzdłuż jednej krawędzi, w poprzek zakończenia paska i z powrotem wzdłuż drugiej krawędzi. Nie stanie się pojedynczą trasą przez środek paska.

To rozróżnienie wyjaśnia też, dlaczego trasowanie obrazu może tworzyć podwójne linie cięcia. W animacji niepożądanym efektem może być linia biegnąca wokół zewnętrznych krawędzi śladu pisaka. Jeśli zamierzony efekt wymaga trasy przez środek, skorzystaj z poradnika SVG z pojedynczą linią, aby sprawdzić lub przygotować taką geometrię.

Sprawdź początek, połowę i koniec

Aby sprawdzić przykład w zatrzymanych stanach, wyłącz jego animację i ustaw stroke-dashoffset kolejno na 100, 50 i 0. Te wartości odpowiadają początkowi, odsłonięciu do połowy i stanowi końcowemu tej znormalizowanej ścieżki. Nie są to wartości procentowe wpisywane do właściwości CSS.

Umieść wszystkie trzy wersje na małej stronie testowej z przyciskami do tych stanów. Szczególnie przydatne jest ustawienie pośrednie: gotowe kształty mogą wyglądać podobnie, ale ich trasy rysowania stają się wyraźne w trakcie odsłaniania.

Sprawdziliśmy te ręcznie utworzone ścieżki w przeglądarce przy przesunięciach 100, 50 i 0 oraz raz uruchomiliśmy dwusekundową animację. Wypełniony pasek pozostawał widoczny, podczas gdy trasa i obwód odsłaniały się w różny sposób. Ten test pokazuje działanie tych autorskich ścieżek; nie jest to wynik wektoryzacji w PerfectVector ani test we wszystkich przeglądarkach.

Jeśli wynik jest inny, sprawdź ustawienia malowania i obliczone style konkretnego elementu. Reguła CSS może nadpisać atrybut prezentacyjny, a ścieżka bez widocznego obrysu nie może pokazać odsłaniania za pomocą kresek. Lista kontrolna brakującego obrysu pomaga wyodrębnić problemy z malowaniem i wyświetlaniem, zanim dostosujesz czas animacji.

Ustal punkt początkowy i kolejność ścieżek

Pierwsza ścieżka zaczyna się w M30 90, biegnie poziomo do x=100, a następnie pionowo do y=30. Ta kolejność nadaje odsłanianiu kierunek. Jeśli rysowanie ma zaczynać się od górnego końca, przygotuj ścieżkę w tym kierunku, zamiast zakładać, że animacja zna zamierzony ruch pisaka.

W przypadku logo z oddzielnymi znakami zdecyduj, która ścieżka ma pojawić się pierwsza, a które po niej. Uruchomienie tej samej animacji na każdej ścieżce powoduje jednoczesne odsłanianie. Sekwencja wymaga jawnie ustawionych opóźnień lub innego układu na osi czasu. Sprawdź przecięcia i nakładające się fragmenty w zatrzymanych stanach, ponieważ późniejsze kształty mogą zakrywać obrys, który nadal jest rysowany.

Rysunek złożony z kilku niepołączonych podścieżek może wymagać rozdzielenia na elementy, aby można było odpowiednio sterować ich czasem animacji. Podejmuj osobno decyzje dotyczące wyglądu grafiki i trasy animacji. Łączenie niezwiązanych ze sobą fragmentów tylko po to, by uzyskać jedną ścieżkę, może wprowadzić połączenie, którego autor nigdy nie zamierzał.

Biblioteka animacji może pomóc kontrolować sekwencję, ale jej dane wejściowe nadal muszą mieć odpowiednią geometrię. Dokumentacja SVG animation biblioteki Motion opisuje rysowanie linii za pomocą animowanej wartości pathLength. Ten mechanizm sterowania w bibliotece korzysta z odrębnego API niż użyta tutaj natywna kalibracja SVG pathLength="100"; nie kopiuj wartości z jednego przykładu do drugiego bez sprawdzenia API.

Zapewnij dostęp do gotowej grafiki bez ruchu

Przykład CSS domyślnie ustawia przesunięcie na zero i zmienia je tylko podczas działania animacji. Zapytanie medialne dotyczące ograniczenia ruchu wyłącza odsłanianie i pokazuje gotową linię. Poradnik prefers-reduced-motion MDN wyjaśnia, jak to zapytanie wykrywa preferencję użytkownika.

W interaktywnym przykładzie udostępnij przycisk pokazujący statyczny wynik oraz przycisk ponownego odtworzenia. W przypadku ikony interfejsu zachowaj widoczną etykietę tekstową lub nazwę dostępną dla technologii wspomagających, która wyjaśnia działanie. Animacja nie powinna być jedynym sposobem, w jaki czytelnik poznaje znaczenie grafiki.

Przetestuj stan początkowy, stan po przerwaniu animacji i stan końcowy w rzeczywistym miejscu użycia. Jeśli istotna ikona pozostaje niewidoczna, gdy animacja się nie uruchamia, popraw styl bazowy, zanim rozszerzysz efekt na cały interfejs. Udany przykład przetestowany w izolacji nie potwierdza poprawnego działania we wszystkich przeglądarkach i z każdą technologią wspomagającą ani wydajności we wszystkich warunkach.

Przygotuj grafikę rastrową bez obiecywania trasy pisaka

Jeśli brakuje wzorcowego pliku wektorowego, a płaski znak PNG lub JPG wymaga edytowalnej grafiki, proces konwersji obrazu na grafikę wektorową w PerfectVector może przygotować wstępną wersję SVG. Porównaj jej sylwetkę, otwory i oddzielne obszary ze źródłem, a następnie sprawdź pobrane ścieżki w edytorze. Potraktuj tę geometrię jako grafikę do oceny przed zaplanowaniem animacji.

Wektoryzacja nie ustala pierwotnej kolejności ruchów pisaka, nie tworzy osi czasu ani nie gwarantuje pojedynczych ścieżek biegnących przez środek. Jeśli odsłanianie wymaga jednej trasy przez środek obrysu, narysuj lub przygotuj tę trasę świadomie. Zachowaj istniejący wzorcowy plik wektorowy, jeśli jest dostępny. SVG, który jedynie osadza obraz rastrowy, również wymaga sprawdzenia osadzonego obrazu, zanim założysz, że widoczny znak jest edytowalną geometrią ścieżek.

Najpierw zaakceptuj statyczną grafikę, a następnie sekwencję jej rysowania. Poradniki edycji na blogu opisują porządkowanie źródła przed dodaniem warstwy animacji.

FAQ

Dlaczego mój SVG pozostaje widoczny na początku animacji obrysu? Sprawdź, czy widoczna część jest wypełnieniem. Ustawienia wzoru kresek i jego przesunięcia wpływają na obrys, więc wypełniony obszar może pozostawać widoczny, gdy jego obrys jest ukryty.

Dlaczego animacja rysuje wokół obu stron linii? Ścieżka może opisywać zamknięty kontur wokół grubego znaku. Obrysowanie tej ścieżki prowadzi po jej obwodzie. Przygotuj otwartą trasę rysowania, jeśli efekt wymaga pojedynczej linii przez środek.

Czy mogę użyć 100% dla całej długości ścieżki? Nie jako ogólnego zamiennika w stroke-dashoffset. Wartości procentowe tej właściwości odnoszą się do znormalizowanej przekątnej obszaru wyświetlania. Przykład używa natywnego pathLength="100" z wartościami kresek bez jednostek.

Czy konwersja PNG na SVG przygotowuje grafikę do animacji pisma odręcznego? Wektoryzacja nie daje automatycznej gwarancji kolejności ruchów pisaka ani ścieżek biegnących przez środek. Sprawdź wynikową geometrię i przygotuj osobno ścieżki rysowania oraz czas animacji.

Źródła

1. MDN — stroke-dasharray — definiuje naprzemienne długości kresek i odstępów przy malowaniu obrysu.
2. MDN — stroke-dashoffset — wyjaśnia przesunięcia wzoru i punkt odniesienia wartości procentowych.
3. MDN — pathLength — dokumentuje natywną kalibrację odległości dla ścieżek i obrysów.
4. W3C — SVG painting — rozróżnia zachowanie wypełnienia i obrysu.
5. MDN — prefers-reduced-motion — dokumentuje preferencję użytkownika wykorzystywaną do wyświetlenia statycznego wyniku.
6. Motion — SVG animation — opisuje osobne API biblioteki do rysowania linii.

Przetestuj jedną trasę na początku, w połowie i na końcu, zanim ułożysz sekwencję całej grafiki. Jeśli źródłem jest znak rastrowy, przygotuj wstępną wersję edytowalnego SVG, sprawdź jego geometrię i osobno zaplanuj trasę rysowania.