Animasi Morph SVG: Cocokkan Path Sebelum Menganimasikan

Jika outline harus tetap sama sementara seluruh lambang berputar, tetapkan poros rotasi SVG bersama.

Animasi morph SVG mengubah geometri bentuk antara dua keadaan. Untuk interpolasi data path native, siapkan struktur perintah yang cocok dan tentukan titik mana yang harus berkorespondensi. Gambar keadaan awal dan akhir yang menarik masih dapat menghasilkan bentuk yang runtuh atau terpuntir di tengah proses.

Aturan animasi data path W3C mewajibkan jumlah dan jenis perintah yang sama dalam urutan yang sama untuk interpolasi mulus. Itu adalah persyaratan struktural. Persyaratan tersebut tidak menentukan sudut logo mana yang seharusnya menjadi sudut mana pada keadaan berikutnya.

Mulailah dengan pasangan kecil yang dapat Anda periksa. Contoh orisinal di bawah menggunakan persegi, belah ketupat, dan persegi yang sengaja dibalik untuk memisahkan kedua keputusan tersebut.

Bangun dua path dengan sudut yang berkorespondensi

Persegi dan belah ketupat buatan tangan ini sama-sama menggunakan M L L L Z: pindah ke sudut pertama, gambar tiga garis, dan tutup bentuk. Setiap pasangan koordinat memiliki posisi yang cocok dalam path lainnya.

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

Elemen animate SVG mengubah atribut seiring waktu. Di sini elemen mengubah d selama dua detik. fill="freeze" animasi mempertahankan keadaan akhirnya; fill hijau path adalah pengaturan pewarnaan terpisah.

Simpan contoh dalam halaman HTML mandiri saat memeriksanya. Contoh dimulai otomatis tanpa skrip pemeriksaan di bawah. Untuk kontrol produksi, tentukan kapan animasi harus diputar dan sediakan keadaan statis yang sesuai untuk antarmuka.

Pemetaan sudut bersifat eksplisit:

Kedua outline mengelilingi perimeternya ke arah yang sama. Sudut pertama bergerak menuju bagian atas belah ketupat, sudut kedua menuju kanan, dan seterusnya. Ini adalah pilihan desain yang ditetapkan pembuat, bukan interpretasi arti masing-masing bentuk.

Jeda interpolasi sebenarnya

Periksa awal, titik tengah, dan akhir sebelum menyesuaikan easing atau menambahkan efek dekoratif. Untuk SVG di atas, helper ini menjeda timeline-nya dan melompat ke waktu dalam detik:

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

MDN mendokumentasikan pauseAnimations() dan setCurrentTime() untuk mengendalikan timeline SVG. Hubungkan helper ke tombol dengan nilai 0, 1, dan 2. Itu adalah tiga posisi dalam satu interpolasi, bukan tiga gambar pengganti.

Pada satu detik, interpolasi linear menempatkan setiap koordinat di tengah antara nilai awal dan akhirnya. Karena itu, sudut pertama berada pada 55, 25. Titik tengah lengkap dalam contoh orisinal ini adalah:

M55 25L135 55L105 135L25 105Z

Kami memeriksa animasi SVG native ini di browser pada awal, titik tengah, dan akhir, lalu memutarnya sekali. Titik tengah tetap berupa segiempat berisian, dan pemutaran mencapai belah ketupat. Pengamatan itu berlaku untuk path buatan tangan ini dalam browser yang diuji; ini bukan hasil konversi PerfectVector atau pengujian kompatibilitas antarbrowser.

Jumlah perintah sama masih dapat menghasilkan morph buruk

Pertahankan persegi awal, tetapi balik urutan sudut persegi target:

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

Kedua keadaan awal dan akhir terlihat seperti persegi yang sama. Kedua string masih menggunakan M L L L Z. Namun sudut kedua dan keempat sekarang bergerak melintasi bentuk untuk bertukar tempat. Pada titik tengah, koordinatnya berimpit:

M30 30L80 80L130 130L80 80Z

Keempat titik berada pada diagonal. Dalam pengujian browser kami, persegi berisian runtuh menjadi diagonal itu di tengah dan kembali menjadi persegi pada akhir. Struktur perintah yang cocok memungkinkan interpolasi; pencocokan titik yang salah membuat hasil tidak diinginkan.

Ketika pasangan hasil ekspor terpuntir, periksa titik pertama dan arah perjalanan dalam setiap path. Kemudian periksa apakah sudut dan fitur kurva menempati posisi yang berkorespondensi. Menambahkan node sembarangan dapat membuatnya lebih sulit dilihat. Panduan pembersihan node membantu menyederhanakan artwork statis, tetapi pertahankan korespondensi yang Anda tetapkan pada kedua keadaan.

Perhitungkan lubang dan bagian terpisah

Logo mungkin berisi batas luar, bukaan, dan aksen terpisah. Perlakukan semuanya sebagai bagian yang membutuhkan pasangan yang disengaja dalam keadaan berikutnya. Sebelum menganimasikan, daftarkan bagian mana yang berubah menjadi bagian mana. Jika satu keadaan memiliki lubang dan yang lain tidak, tentukan bagaimana bukaan harus menghilang alih-alih menganggap jumlah node yang cocok akan menyelesaikannya.

Referensi fill-rule menjelaskan bagaimana SVG menentukan wilayah mana yang berada di dalam path. Pertahankan perilaku isian yang dimaksudkan saat menyiapkan dan menguji compound path. Jika bukaan sudah terlihat salah pada keadaan awal atau akhir yang statis, gunakan panduan pemecahan masalah lubang terisi sebelum menambahkan transisi.

Urutan pemeriksaan praktis adalah:

1. Konfirmasi siluet, lubang, dan detail terpisah pada keadaan awal dan akhir.
2. Identifikasi subpath atau elemen terpisah yang berkorespondensi.
3. Sejajarkan titik awal, arah, dan fitur bergunanya.
4. Periksa keadaan antara untuk batas bersilangan atau detail yang menghilang.
5. Sesuaikan waktu hanya setelah menerima geometri tersebut.

Elemen terpisah dapat lebih mudah dikendalikan ketika aksen kecil harus memudar atau bergerak secara mandiri. Pilihan itu bagian dari desain animasi; pilihan tidak harus dipaksakan ke satu compound path.

Periksa aturan mekanisme animasi Anda

Contoh native sengaja menggunakan perintah yang cocok. Pustaka dapat melakukan persiapan tambahan, sehingga persyaratannya mungkin berbeda.

Dokumentasi MorphSVG GSAP menjelaskan konversi data path menjadi kurva kubik dan penambahan titik bila diperlukan. Pustaka juga menyediakan kontrol pemetaan seperti shapeIndex. Gunakan kontrol tersebut untuk meninjau korespondensi alih-alih menganggap dua bentuk yang diekspor secara mandiri sudah cocok.

KUTE.js mendokumentasikan model persiapan berbeda dalam panduan SVG Morph, termasuk alur kerja terpisah untuk subpath. Periksa versi dan komponen yang benar-benar Anda gunakan sebelum menerapkan pembatasan path native atau saran pustaka lain padanya.

Pilih pasangan kecil yang representatif untuk mekanisme tersebut dan periksa geometri antaranya. Pengujian persegi-ke-belah-ketupat yang berhasil tidak membuktikan perilaku logo gabungan terperinci. Simpan salinan artwork sumber agar Anda dapat membedakan perubahan yang diperkenalkan selama persiapan animasi dari desain asli.

Siapkan artwork raster sebelum mencocokkan keadaan

Jika master vektor hilang dan hanya artwork PNG atau JPG tersisa, alur kerja gambar-ke-vektor PerfectVector dapat membantu menyiapkan kandidat SVG yang dapat diedit. Bandingkan siluet, lubang, dan wilayah terpisah dengan sumber, lalu periksa path yang diunduh. Panduan pengeditan SVG membahas langkah pembersihan berikutnya.

Memvektorisasi dua gambar tidak menetapkan korespondensi semantis antara titiknya atau membuat morph yang selesai. Terima setiap gambar statis terlebih dahulu, lalu siapkan pasangan untuk animator pilihan. Jika master vektor yang dapat diedit sudah ada, gunakan master itu alih-alih menelusuri ulang salinan raster.

Uji titik tengah setelah setiap perubahan bermakna pada pasangan. Gambar awal atau akhir yang lebih sederhana berguna hanya jika transisi masih mengikuti fitur yang dimaksudkan. Artikel pengeditan di blog menyediakan panduan persiapan sumber terkait.

FAQ

Apakah path SVG membutuhkan jumlah titik yang sama untuk morph? Untuk interpolasi data path native, struktur perintah yang cocok penting, termasuk jenis dan urutan perintah. Pustaka mungkin menormalisasi struktur berbeda, jadi periksa dokumentasinya sendiri alih-alih hanya mengandalkan jumlah titik.

Mengapa morph SVG saya terpuntir meskipun keadaan awal dan akhir terlihat benar? Titik mungkin berkorespondensi dalam urutan yang tidak diinginkan. Periksa titik awal, arah, dan pencocokan fitur, lalu periksa titik tengah. Siluet awal dan akhir yang identik dapat menyembunyikan bentuk antara yang runtuh.

Dapatkah dua file SVG terpisah di-morph secara otomatis? Animator membutuhkan geometri kompatibel atau dinormalisasi dan pemetaan yang berguna antara keadaan. Dua ekstensi file saja tidak menyediakan pemetaan itu; periksa path, lubang, dan bagian terpisah.

Apakah mengonversi dua PNG menjadi SVG membuat pasangan morph yang cocok? Tidak. Konversi menyiapkan kandidat vektor statis. Anda tetap perlu mencocokkan bagian dan titiknya, memilih mekanisme animasi, dan memeriksa transisi.

Sources

1. W3C — Path SVG — Mendefinisikan struktur interpolasi data path native dan pencocokan parameter.
2. MDN — animate — Mendokumentasikan animasi atribut seiring waktu.
3. MDN — pauseAnimations — Mendukung penjedaan timeline pemeriksaan.
4. MDN — setCurrentTime — Mendokumentasikan pencarian waktu timeline SVG dalam detik.
5. MDN — fill-rule — Menjelaskan perilaku wilayah dalam untuk artwork gabungan.
6. GSAP — MorphSVG — Menjelaskan normalisasi dan kontrol pemetaan titik.
7. KUTE.js — SVG Morph — Mendokumentasikan persiapan khusus komponen dan alur kerja subpath-nya.

Cocokkan bagian dan periksa titik tengah sebelum menyempurnakan waktu. Jika artwork awal Anda berupa raster, siapkan kandidat SVG, verifikasi geometri statisnya, lalu bangun keadaan animasi yang berkorespondensi.