Ścieżki ruchu SVG: przesuń własną ikonę wzdłuż krzywej

Użyj animateMotion, aby przesuwać element SVG wzdłuż trasy, i umieść w nim mpath, aby odwołać się do istniejącej ścieżki. rotate="auto" obraca poruszającą się grafikę zgodnie z kierunkiem trasy. Lokalny początek układu współrzędnych grafiki jest punktem, który przemieszcza się wzdłuż ścieżki, więc dla importowanej ikony trzeba świadomie wybrać punkt zakotwiczenia.

Przydaje się to, gdy własna strzałka, emblemat lub mała ilustracja mają się przemieszczać bez zmiany kształtu. Aby linia wyglądała, jakby sama się rysowała, użyj animacji obrysu. Aby jedna sylwetka zmieniała się w inną, użyj morfingu ścieżek. Te techniki służą do różnych zadań wizualnych.

Oddziel trasę od grafiki

Trasa określa, gdzie porusza się ikona. Ikona określa, co widzi czytelnik. Dokumentacja MDN animateMotion reference opisuje element ruchu, a mpath reference pokazuje, jak ponownie wykorzystać ścieżkę przez odwołanie.

Poniższy autorski przykład zawiera turkusową strzałkę i złotą kropkę. Strzałka wskazuje dodatni kierunek osi X, co ułatwia sprawdzenie efektu automatycznego obrotu. Grafika jest narysowana wokół (0, 0), a nie daleko od początku układu współrzędnych na dużym wyeksportowanym obszarze roboczym.

Zapisz ten kod jako motion.html i otwórz go w przeglądarce. Najpierw pojawi się statyczny emblemat. Naciśnij Play, aby uruchomić jeden czterosekundowy przebieg; Show static przywraca ilustrację początkową.

<!doctype html>
<meta charset="utf-8">
<title>Arrow following a curve</title>
<style>
  svg { display: block; width: min(100%, 800px); }
  .moving { display: none; }
  .playing .moving { display: inline; }
  .playing .still { display: none; }
</style>
 
<svg id="scene" viewBox="0 0 480 240"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="An arrow emblem follows a curved route">
  <defs>
    <path id="route" d="M60 180 C160 20 300 20 420 180" />
    <g id="emblem">
      <path fill="#147d78"
            d="M-18-12 H4 V-22 L30 0 L4 22 V12 H-18 Z" />
      <circle cx="-7" cy="0" r="4" fill="#e5a340" />
    </g>
  </defs>
 
  <use href="#route" fill="none" stroke="#a9bab6" stroke-width="2" />
  <use class="still" href="#emblem" transform="translate(60 180)" />
  <g class="moving">
    <use href="#emblem" />
    <animateMotion id="motion" dur="4s" begin="indefinite"
                   fill="freeze" rotate="auto">
      <mpath href="#route" />
    </animateMotion>
  </g>
</svg>
 
<button id="play" type="button">Play</button>
<button id="stop" type="button">Show static</button>
<script>
  const scene = document.querySelector("#scene");
  const motion = document.querySelector("#motion");
  const preference = matchMedia("(prefers-reduced-motion: reduce)");
 
  function showStatic() {
    scene.pauseAnimations();
    scene.classList.remove("playing");
  }
 
  document.querySelector("#play").addEventListener("click", () => {
    if (preference.matches) return;
    scene.pauseAnimations();
    scene.setCurrentTime(0);
    scene.classList.add("playing");
    motion.beginElement();
    scene.unpauseAnimations();
  });
  document.querySelector("#stop").addEventListener("click", showStatic);
  preference.addEventListener("change", showStatic);
  showStatic();
</script>

Widoczna szara krzywa jest osobnym użyciem trasy za pomocą use. Usuń ten element use, jeśli ścieżka ma być niewidoczna; zachowaj definicję w defs, aby animacja nadal mogła się do niej odwoływać. Element ruchu umieść wewnątrz grupy, której strzałka i kropka mają poruszać się razem.

fill="freeze" zachowuje końcowy stan animacji. Nie ma związku z turkusowym wypełnieniem strzałki. Ten przykład uruchamia się raz, dzięki czemu łatwiej sprawdzić jego końcowe położenie niż przy nieskończonej pętli.

Popraw ikonę, która odsuwa się od trasy

Ruch działa na układ współrzędnych elementu. Nie wyznacza automatycznie wizualnego środka logo. Jeśli importowane ścieżki znajdują się w okolicy współrzędnych (200, 120), przesuwanie zawierającej je grupy wzdłuż trasy zachowuje to przesunięcie wewnątrz grupy.

Wybierz punkt grafiki, który powinien stykać się z trasą, a następnie przesuń go do (0, 0) wewnątrz poruszającej się grupy. Dla punktu zakotwiczenia w (200, 120) struktura wygląda tak:

<g class="moving">
  <g transform="translate(-200 -120)">
    <!-- Place the original artwork paths here. -->
  </g>
  <animateMotion dur="4s" rotate="auto">
    <mpath href="#route" />
  </animateMotion>
</g>

Wewnętrzne przesunięcie przygotowuje grafikę; grupa zewnętrzna otrzymuje ruch. Zachowaj ten podział ról, gdy dodajesz skalowanie lub obrót korygujący. SVG animation specification definiuje ruch jako dodatkową transformację, więc istniejące transformacje nadal wpływają na końcowe położenie.

Dla odznaki sensownym punktem zakotwiczenia może być środek. Dla pojazdu możesz wybrać punkt styku koła z podłożem, a dla wskaźnika — jego czubek. Środek prostokąta ograniczającego to tylko wstępne przybliżenie. Sprawdź zamierzony punkt styku w więcej niż jednym położeniu na trasie.

Obrót bez przemieszczania również wymaga odpowiedniego punktu obrotu. Poradnik SVG transform-origin wyjaśnia ten przypadek bez dodawania ścieżki ruchu.

Wybierz, czy grafika ma się obracać

Te wartości opisano w dokumentacji MDN motion rotation reference. auto-reverse zmienia kierunek, w którym zwrócona jest grafika; nie odwraca kolejności pokonywania trasy.

Jeśli grafika źródłowa wskazuje w górę, auto nie wie, że góra oznacza kierunek do przodu. Obróć wewnętrzną grupę grafiki tak, aby wskazywała dodatni kierunek osi X, a następnie zastosuj ruch do grupy zewnętrznej. Unikaj obracania samej trasy tylko po to, aby skorygować lokalną orientację ikony.

Ostre narożniki trasy mogą powodować gwałtowne zmiany kierunku. Zakrzywiona trasa jest lepszym punktem wyjścia, gdy zależy Ci na widocznie płynnym skręcie. Zostaw też miejsce wokół trasy: ikona może wystawać poza linię środkową ścieżki i zostać przycięta przy krawędzi obszaru widoku SVG.

Sprawdź początek, środek i koniec

Otworzyliśmy tę samą trasę i emblemat w Chrome i za pomocą niewielkiego narzędzia testowego zatrzymaliśmy oś czasu SVG w punktach odpowiadających 0, 2 i 4 sekundom. Ikona zaczęła w lewym dolnym rogu, przeszła w pobliżu wierzchołka i skończyła w prawym dolnym rogu. Przy auto zmieniała orientację wzdłuż krzywej. Przy obrocie ustawionym na 0 położenie w połowie czasu pozostało takie samo, a strzałka pozostawała pozioma.

To sprawdzenie obejmuje ten przypadek testowy w jednej przeglądarce. Nie jest testem importu animacji do narzędzi projektowych ani gwarancją działania we wszystkich sposobach osadzania w przeglądarce.

W przypadku własnej grafiki:

1. Sprawdź punkt styku na początku trasy. Popraw przesunięcia grafiki źródłowej, zanim dostosujesz czas animacji.
2. Zatrzymaj animację w pobliżu zakrętów i potwierdź, że zamierzona część emblematu podąża za linią.
3. Porównaj obrót automatyczny i stały. Wybierz na podstawie grafiki, zwłaszcza jeśli zawiera tekst.
4. Sprawdź, czy grafika w końcowym położeniu nie jest przycięta, i potwierdź, że ponowne odtwarzanie zaczyna się prawidłowo.
5. Przetestuj rzeczywisty sposób użycia. Ten przykład wykorzystuje SVG osadzone bezpośrednio na stronie HTML z przyciskami sterowanymi przez JavaScript.

animateMotion domyślnie stosuje ruch ze stałą prędkością, zgodnie z dokumentacją MDN. Połowa czasu trwania oznacza więc w przybliżeniu połowę przebytej odległości, a niekoniecznie punkt odpowiadający połowie zakresu parametru krzywej wyznaczonej przez jej punkty kontrolne. W przypadku naszej asymetrycznej trasy będącej krzywą trzeciego stopnia położenie po dwóch sekundach wypadało nieco na prawo od jej geometrycznego wierzchołka.

Zapewnij użyteczną wersję statyczną

Przykład zaczyna się od statycznego elementu use odwołującego się do emblematu, a ruch uruchamia się dopiero po aktywowaniu przycisku Play. Jeśli JavaScript nie działa, statyczna grafika pozostaje widoczna. Gdy preferencja ograniczonego ruchu jest aktywna, funkcja obsługi pozostawia ją w tym stanie.

Cecha mediów prefers-reduced-motion pozwala stronie reagować na preferencję użytkownika dotyczącą ruchu. Tutaj JavaScript odczytuje tę preferencję przed uruchomieniem ruchu SVG i przywraca wersję statyczną, jeśli preferencja się zmieni.

Przetestowaliśmy również wariant statyczny za pomocą osobnego przełącznika podglądu ograniczonego ruchu w narzędziu testowym: ukrywał animowaną grupę i wyświetlał emblemat w położeniu początkowym. Ten przełącznik sprawdzał naszą logikę wariantu zastępczego; nie zmieniał ustawienia dostępności komputera.

Jeśli to możliwe, przekazuj istotne informacje poza animacją. Użytkownik nie powinien musieć oglądać poruszającego się emblematu, aby poznać status lub przeczytać niezbędne instrukcje. W przypadku dekoracyjnej ikony obok tekstu, który już opisuje jej znaczenie, dostosuj etykietę dostępności, aby uniknąć dwukrotnego odczytywania tej samej treści.

Przygotuj własny motyw przed animowaniem

Jeśli Twój własny motyw istnieje tylko jako PNG lub JPG, PerfectVector może pomóc odzyskać edytowalną grafikę SVG, zanim przygotujesz ruch. Sprawdź odzyskaną sylwetkę i niewielkie otwory, zgrupuj części, które mają poruszać się razem, i wybierz punkt zakotwiczenia. PerfectVector dostarcza geometrię źródłową; trasę, czas i zachowanie ruchu tworzy się osobno.

Jeśli masz już grafikę SVG, możesz od razu zgrupować jej elementy i przygotować punkt zakotwiczenia. W przypadku prostych strzałek, takich jak w tej demonstracji, praktyczne jest również bezpośrednie narysowanie geometrii. Wprowadzenie do wektoryzacji obrazów wyjaśnia, kiedy przydaje się obrysowywanie obrazu rastrowego.

Jeśli własny znak masz wyłącznie w postaci rastrowej, wypróbuj swój obraz w PerfectVector, sprawdź jego kontury i drobne szczegóły, a następnie przetestuj uzyskane SVG na początku, w środku i na końcu trasy. Zachowaj wersję statyczną obok animowanej.

FAQ

Dlaczego moja ikona porusza się obok ścieżki zamiast po niej? Grafika może być przesunięta względem lokalnego początku układu współrzędnych. Wybierz punkt, który powinien podążać za trasą, i przesuń go do zera wewnątrz poruszającej się grupy. Sprawdź wynik na początku i na zakręcie.

Czy automatyczny obrót zmienia kształt ikony? Nie. Ruch zmienia położenie i orientację grafiki. Nie przekształca geometrii jej ścieżek. Na potrzeby automatycznego obrotu użytego w tym przykładzie przednia część grafiki źródłowej powinna być zwrócona w dodatnim kierunku osi X.

Czy mogę usunąć widoczną linię pomocniczą? Tak. Zachowaj definicję trasy i jej identyfikator, ale usuń osobny element rysujący linię pomocniczą. Ruch nadal może odwoływać się do ścieżki przez mpath.

Źródła

1. MDN animateMotion — Opisuje ścieżki ruchu, wartości obrotu i domyślny ruch ze stałą prędkością.
2. MDN mpath — Wyjaśnia odwoływanie się do istniejącej trasy wewnątrz elementu ruchu.
3. SVG animation specification — Definiuje transformacje ruchu i ich związek ze współrzędnymi grafiki.
4. MDN rotate attribute — Dokumentuje stałą, automatyczną i przeciwną do kierunku trasy orientację podczas ruchu.
5. MDN reduced-motion preference — Wyjaśnia wykrywanie preferencji użytkownika dotyczącej ruchu.