Motion Path SVG: Gerakkan Ikon Khusus Sepanjang Kurva

Gunakan animateMotion untuk memindahkan elemen SVG sepanjang rute, dan letakkan mpath di dalamnya untuk merujuk path yang ada. rotate="auto" memutar karya bergerak mengikuti arah rute. Titik asal lokal karya adalah titik yang berjalan sepanjang path, sehingga ikon impor memerlukan jangkar yang disengaja.

Ini berguna ketika panah khusus, lambang, atau ilustrasi kecil harus bergerak tanpa mengubah bentuk. Untuk garis yang seolah menggambar dirinya sendiri, gunakan animasi stroke. Untuk satu siluet yang berubah menjadi siluet lain, gunakan morphing path. Teknik itu menyelesaikan tugas visual berbeda.

Pisahkan rute dari karya

Rute menentukan tempat ikon bergerak. Ikon menentukan apa yang dilihat pembaca. Referensi animateMotion MDN menjelaskan elemen gerakan, sementara referensi mpath-nya menunjukkan cara memakai ulang path melalui referensi.

Contoh asli di bawah memiliki panah hijau kebiruan dan titik emas. Panah mengarah sepanjang X positif, sehingga efek rotasi otomatis mudah diperiksa. Karya digambar di sekitar (0, 0), bukan jauh di seberang kanvas ekspor besar.

Simpan sebagai motion.html dan buka di browser. Lambang statis muncul terlebih dahulu. Tekan Play untuk menjalankan satu lintasan empat detik; Show static mengembalikan ilustrasi awal.

<!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>

Kurva abu-abu yang terlihat adalah use terpisah dari rute. Hapus use itu jika path harus tidak terlihat; pertahankan definisi dalam defs agar animasi masih dapat merujuknya. Elemen gerakan berada di dalam grup yang panah dan titiknya harus bergerak bersama.

fill="freeze" mempertahankan keadaan animasi akhir. Nilai itu tidak terkait dengan pewarnaan hijau kebiruan pada panah. Contoh berjalan sekali, sehingga posisi akhirnya lebih mudah diperiksa daripada loop tanpa akhir.

Perbaiki ikon yang melayang jauh dari rute

Gerakan diterapkan pada sistem koordinat elemen. Gerakan tidak otomatis menemukan pusat visual logo. Jika path impor menempati koordinat sekitar (200, 120), memindahkan grup yang melingkupinya sepanjang rute menyisakan offset itu di dalam grup.

Pilih titik karya yang harus menyentuh rute, lalu translasikan titik itu ke (0, 0) di dalam grup bergerak. Untuk jangkar (200, 120), strukturnya:

<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>

Translasi dalam menyiapkan karya; grup luar menerima gerakan. Pisahkan tugas itu ketika menambahkan skala atau rotasi korektif. Spesifikasi animasi SVG mendefinisikan gerakan sebagai transformasi tambahan, sehingga transformasi yang ada masih memengaruhi penempatan akhir.

Untuk lencana, pusat mungkin jangkar yang masuk akal. Untuk kendaraan, Anda mungkin menginginkan titik kontak roda; untuk pointer, mungkin ujungnya. Pusat bounding box hanya tebakan awal. Periksa titik kontak yang dimaksud pada lebih dari satu posisi sepanjang rute.

Rotasi di tempat memiliki masalah pivot sendiri. Panduan transform-origin SVG menjelaskan kasus itu tanpa menambahkan jalur perjalanan.

Pilih apakah karya harus berputar

Nilai ini didokumentasikan dalam referensi rotasi gerakan MDN. auto-reverse mengubah arah hadap; tidak membalik urutan penelusuran rute.

Jika sumber Anda mengarah ke atas, auto tidak mengetahui bahwa atas berarti depan. Putar grup karya dalam hingga mengarah sepanjang X positif, lalu terapkan gerakan pada grup luar. Hindari memutar rute sendiri hanya untuk mengoreksi orientasi lokal ikon.

Sudut rute tajam dapat menghasilkan perubahan arah mendadak. Rute melengkung merupakan titik awal lebih baik ketika Anda menginginkan belokan terlihat mulus. Sisakan juga ruang di sekitar rute: ikon dapat melampaui garis tengah path dan terpotong dekat tepi viewport SVG.

Periksa awal, tengah, dan akhir

Kami membuka rute dan lambang yang sama di Chrome dan memakai alat pengujian kecil untuk menjeda timeline SVG pada 0, 2, dan 4 detik. Ikon dimulai di kiri bawah, melintasi dekat puncak, dan selesai di kanan bawah. Dengan auto, arah hadap berubah sepanjang kurva. Dengan rotasi 0, posisi tengah tidak berubah sementara panah tetap horizontal.

Pemeriksaan itu mencakup contoh ini dalam satu browser. Ini bukan pengujian impor animasi untuk alat desain atau jaminan untuk setiap mode penyematan browser.

Untuk karya Anda sendiri:

1. Periksa titik kontak pada awal rute. Perbaiki offset sumber sebelum menyesuaikan waktu.
2. Jeda dekat belokan dan pastikan bagian lambang yang dimaksud mengikuti garis.
3. Bandingkan rotasi otomatis dan tetap. Pilih berdasarkan karya, terutama ketika berisi teks.
4. Periksa pose akhir untuk pemotongan dan pastikan pemutaran ulang dimulai dengan benar.
5. Uji konteks penyerahan sebenarnya. Contoh ini memakai SVG inline di dalam halaman HTML dengan kontrol JavaScript.

animateMotion memakai gerakan paced secara default, sebagaimana didokumentasikan MDN. Karena itu, setengah durasi mewakili kira-kira setengah jarak yang ditempuh, belum tentu parameter kurva yang berada di tengah antara titik kontrol. Pose dua detik rute kubik asimetris kami sedikit di kanan puncak geometrisnya.

Sediakan versi statis yang berguna

Contoh dimulai dengan use statis dari lambang, dan gerakannya baru dimulai setelah tombol Play diaktifkan. Jika JavaScript tidak berjalan, karya statis tetap terlihat. Ketika preferensi reduced motion aktif, handler membiarkannya dalam keadaan itu.

Fitur media prefers-reduced-motion memungkinkan halaman merespons preferensi gerakan pengguna. Di sini JavaScript membaca preferensi itu sebelum memulai gerakan SVG, dan memulihkan versi statis jika preferensi berubah.

Kami juga menguji cabang statis dengan sakelar pratinjau reduced motion eksplisit dalam alat pengujian: sakelar menyembunyikan grup animasi dan menampilkan lambang di lokasi awal. Sakelar itu menguji logika alternatif kami; tidak mengubah pengaturan aksesibilitas komputer.

Jika memungkinkan, letakkan makna di luar animasi. Pengguna tidak seharusnya harus menonton lambang bergerak untuk mengetahui status atau membaca petunjuk penting. Untuk ikon dekoratif di samping teks yang sudah deskriptif, sesuaikan label aksesibilitas agar konten yang sama tidak diumumkan dua kali.

Siapkan motif sendiri sebelum menganimasikannya

Jika motif khusus Anda hanya tersedia sebagai PNG atau JPG, PerfectVector dapat membantu merekonstruksi karya SVG yang bisa diedit sebelum Anda membuat gerakan. Periksa siluet dan bukaan kecil hasil rekonstruksi, kelompokkan bagian yang harus bergerak bersama, dan pilih titik jangkar. PerfectVector menyediakan geometri sumber; rute, waktu, dan perilaku gerakan dibuat secara terpisah.

SVG yang ada dapat langsung melalui pengelompokan dan persiapan jangkar. Untuk panah sederhana seperti demonstrasi ini, menggambar geometri langsung juga praktis. Ikhtisar vektorisasi gambar menjelaskan kapan tracing sumber raster berguna.

Untuk tanda khusus yang hanya raster, coba gambar Anda dalam PerfectVector, periksa kontur dan detail kecil, lalu uji SVG tersebut pada awal, tengah, dan akhir rute. Simpan versi statis bersama versi animasi.

FAQ

Mengapa ikon saya bergerak di samping path, bukan di atasnya? Karya mungkin bergeser dari titik asal lokalnya. Pilih titik yang harus mengikuti rute dan translasikan titik itu ke nol di dalam grup bergerak. Periksa hasil pada awal dan belokan.

Apakah rotasi otomatis mengubah bentuk ikon? Tidak. Gerakan mengubah penempatan dan orientasi karya. Gerakan tidak melakukan morphing pada geometri path. Arah depan sumber harus mengarah sepanjang X positif untuk rotasi otomatis yang dipakai dalam contoh ini.

Bisakah saya menghapus garis panduan terlihat? Ya. Pertahankan definisi rute dan ID-nya, tetapi hapus elemen terpisah yang menggambar garis panduan. Gerakan masih dapat merujuk path melalui mpath.

Sources

1. MDN animateMotion — Menjelaskan motion path, nilai rotasi, dan gerakan paced default.
2. MDN mpath — Menjelaskan perujukan rute yang ada di dalam elemen gerakan.
3. Spesifikasi animasi SVG — Mendefinisikan transformasi gerakan dan hubungannya dengan koordinat karya.
4. MDN atribut rotate — Mendokumentasikan orientasi gerakan tetap, otomatis, dan menghadap terbalik.
5. MDN preferensi reduced motion — Menjelaskan deteksi preferensi gerakan pengguna.