Animasi Stroke SVG: Siapkan Satu Rute Penggambaran

Animasi stroke SVG dapat menampilkan garis dengan menggerakkan dash sepanjang path-nya. Gunakan stroke-dasharray untuk mendefinisikan dash dan celah, lalu animasikan stroke-dashoffset sampai stroke terlihat. MDN mendokumentasikan keduanya sebagai properti pewarnaan stroke.

Path sumber menentukan apa yang tampak tergambar. Path terbuka dapat mengikuti rute pena melalui tengah sebuah lambang. Outline berisian mendeskripsikan batas lambang. Menambahkan stroke pada outline tersebut mengarahkan animasi di sekitar tepinya; pengaturan dash saja tidak menampilkan isiannya secara bertahap.

Mulailah dengan satu bentuk kecil sebelum mengatur waktu logo lengkap. Contoh buatan tangan di bawah memisahkan rute penggambaran, artwork berisian, dan perimeter agar Anda dapat memilih geometri yang dibutuhkan animasi.

Untuk menggerakkan seluruh ikon sepanjang kurva, gunakan alur kerja motion path SVG, yang memisahkan rute perjalanan dari artwork.

Mulai dengan path terbuka ber-stroke

Path orisinal ini bergerak ke kanan, lalu ke atas. fill-nya dinonaktifkan, sehingga lambang yang terlihat sepenuhnya berasal dari stroke-nya:

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

Gunakan CSS ini untuk penampilan bertahap selama dua detik:

.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" mengalibrasi operasi berbasis jarak ke panjang yang ditetapkan sebesar 100. Referensi pathLength menjelaskan normalisasi ini. Satu nilai dash-array diulang sebagai dash dan celah, sehingga 100 menyediakan dash sepanjang path diikuti celah yang sama panjangnya. Menggeser pola itu sebesar 100 menyembunyikan stroke dalam contoh ini; memindahkan offset ke nol menampilkannya.

Gunakan angka tanpa unit di sini. stroke-dashoffset: 100% bukan pengganti 100 unit path yang dinormalisasi. Referensi dash-offset MDN menyatakan bahwa nilai persentase menggunakan diagonal viewport SVG yang dinormalisasi, bukan panjang total path.

Contoh menggunakan cap butt agar awal yang dijeda lebih mudah diperiksa. Gaya cap lain dapat mengubah tampilan ujung dash. Pilih cap untuk artwork, lalu periksa frame awal dan akhir pada ukuran tempat ikon benar-benar akan muncul. Untuk pengulangan dekoratif, bandingkan outline bertitik dan jarak cap sebelum memilih panjang dash dan celah.

Bandingkan rute dengan outline berisian

Strip bengkok tebal dapat terlihat mirip dengan garis ber-stroke tersebut sambil berisi geometri berbeda. Path buatan tangan kedua ini mengelilingi batas strip dan ditutup dengan Z:

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

Dengan pewarnaan berikut, mengubah offset dash-nya tidak memiliki efek yang terlihat:

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

Strip tetap terisi karena tidak ada stroke untuk dibuat dash. Spesifikasi pewarnaan SVG W3C membedakan pewarnaan bagian dalam bentuk dari pewarnaan stroke-nya.

Jika Anda mengatur fill: none, menambahkan stroke, dan menganimasikan path tertutup tersebut, stroke mengikuti perimeter: sepanjang satu tepi, melintasi ujung, dan kembali sepanjang tepi lainnya. Path tidak menjadi satu rute melalui pusat strip.

Perbedaan ini juga menjelaskan mengapa hasil penelusuran dapat menghasilkan garis potong ganda. Dalam animasi, hasil yang tidak diinginkan mungkin berupa garis yang mengelilingi bagian luar goresan pena. Jika efek yang dimaksudkan membutuhkan rute tengah, gunakan panduan SVG satu garis untuk memeriksa atau menyiapkan geometri tersebut.

Periksa awal, titik tengah, dan akhir

Untuk pemeriksaan contoh dalam keadaan dijeda, nonaktifkan animasinya dan atur stroke-dashoffset ke 100, 50, dan 0. Nilai tersebut sesuai dengan awal, penampilan separuh, dan keadaan akhir untuk path yang dinormalisasi ini. Nilai itu bukan persentase yang diketik ke properti CSS.

Simpan ketiga versi dalam halaman pengujian kecil dengan tombol untuk keadaan tersebut. Pengaturan tengah sangat berguna: bentuk akhir dapat terlihat mirip, sementara rute penggambarannya menjadi jelas di tengah penampilan bertahap.

Kami memeriksa path buatan tangan ini di browser pada offset 100, 50, dan 0, serta menjalankan animasi berdurasi dua detik satu kali. Strip berisian tetap terlihat sementara rute dan perimeter tampil bertahap secara berbeda. Pengujian ini memperagakan path orisinal tersebut; ini bukan penelusuran PerfectVector atau pengujian di semua browser.

Periksa pewarnaan dan computed style elemen sebenarnya jika hasil berbeda. Aturan CSS dapat mengesampingkan atribut presentasi, dan path tanpa stroke terlihat tidak dapat memperagakan penampilan bertahap dengan dash. Daftar pemeriksaan stroke hilang membantu mengisolasi masalah pewarnaan dan tampilan sebelum Anda menyesuaikan waktu animasi.

Tentukan titik awal dan urutan path

Path pertama dimulai pada M30 90, bergerak horizontal ke x=100, lalu vertikal ke y=30. Urutan itu memberikan arah penampilan bertahap. Jika gambar harus dimulai dari ujung atas, siapkan path dalam arah itu alih-alih menganggap animasi mengetahui gerakan pena yang dimaksudkan.

Untuk logo dengan lambang terpisah, tentukan path mana yang harus muncul terlebih dahulu dan mana yang mengikuti. Memulai animasi yang sama pada setiap path menghasilkan penampilan serentak. Urutan membutuhkan jeda eksplisit atau susunan timeline lain. Periksa perpotongan dan tumpang tindih pada keadaan dijeda karena bentuk yang datang kemudian dapat menutupi stroke yang masih sedang digambar.

Gambar yang terdiri dari beberapa subpath terputus mungkin perlu dipisahkan menjadi elemen untuk kontrol waktu yang berguna. Pisahkan keputusan desain visual dan rute animasi. Menggabungkan bagian tak terkait hanya untuk mendapatkan satu path dapat memperkenalkan koneksi yang tidak pernah dimaksudkan seniman.

Pustaka animasi dapat membantu mengendalikan urutan, tetapi input-nya tetap membutuhkan geometri yang tepat. Dokumentasi animasi SVG Motion menawarkan penggambaran garis melalui nilai pathLength yang dianimasikannya. Kontrol pustaka itu merupakan API terpisah dari kalibrasi pathLength="100" SVG native yang digunakan di sini; jangan menyalin nilai satu contoh ke contoh lain tanpa memeriksa API.

Pertahankan artwork lengkap tersedia tanpa gerakan

Contoh CSS secara default menggunakan offset nol dan mengubahnya hanya saat animasi berjalan. Media query reduced-motion-nya menonaktifkan penampilan bertahap dan menampilkan garis lengkap. Panduan prefers-reduced-motion MDN menjelaskan bagaimana query mendeteksi preferensi pengguna.

Untuk demo interaktif, sediakan kontrol hasil statis serta tombol putar ulang. Untuk ikon antarmuka, pertahankan label teks terlihat atau nama aksesibel yang menjelaskan tindakan. Animasi tidak seharusnya menjadi satu-satunya cara pembaca mengetahui arti grafis.

Uji keadaan awal, terinterupsi, dan selesai dalam penempatan sebenarnya. Jika ikon penting tetap tidak terlihat ketika animasi tidak berjalan, perbaiki gaya dasar sebelum memperluas efek ke seluruh antarmuka. Demo terisolasi yang berhasil tidak membuktikan setiap hasil browser, teknologi bantu, atau performa.

Siapkan artwork raster tanpa menjanjikan rute pena

Jika master vektor hilang dan lambang PNG atau JPG datar membutuhkan artwork yang dapat diedit, alur kerja gambar-ke-vektor PerfectVector dapat menyiapkan kandidat SVG. Bandingkan siluet, lubang, dan wilayah terpisahnya dengan sumber, lalu periksa path yang diunduh dalam editor. Gunakan geometri itu sebagai artwork untuk ditinjau sebelum merencanakan animasi.

Vektorisasi tidak menetapkan urutan pena asli, membuat timeline Anda, atau menjamin path garis tengah tunggal. Jika penampilan bertahap membutuhkan satu rute melalui stroke, gambar atau siapkan rute itu secara sengaja. Pertahankan master vektor yang sudah ada jika tersedia. SVG yang hanya menanamkan gambar raster juga membutuhkan pemeriksaan gambar tertanam sebelum Anda menganggap lambang terlihatnya merupakan geometri path yang dapat diedit.

Terima artwork statis terlebih dahulu, lalu terima urutan penggambaran. Panduan pengeditan di blog membahas pembersihan sumber sebelum lapisan animasi.

FAQ

Mengapa SVG saya tetap terlihat pada awal animasi stroke? Periksa apakah bagian yang terlihat merupakan isian. Pengaturan dash-array dan dash-offset memengaruhi stroke, sehingga wilayah berisian dapat tetap terlihat sementara stroke-nya tersembunyi.

Mengapa animasi menggambar di sekitar kedua sisi garis? Path mungkin mendeskripsikan outline tertutup di sekitar lambang tebal. Memberi stroke pada path itu mengikuti perimeternya. Siapkan rute penggambaran terbuka ketika efek membutuhkan satu garis melalui pusat.

Dapatkah saya menggunakan 100% untuk seluruh panjang path? Bukan sebagai pengganti umum dalam stroke-dashoffset. Persentasenya merujuk pada diagonal viewport yang dinormalisasi. Contoh menggunakan pathLength="100" native dengan nilai dash tanpa unit.

Apakah mengonversi PNG menjadi SVG membuatnya siap untuk animasi tulisan tangan? Vektorisasi tidak memberikan jaminan urutan pena atau garis tengah otomatis. Periksa geometri yang dihasilkan dan siapkan path penggambaran serta waktunya secara terpisah.

Sources

1. MDN — stroke-dasharray — Mendefinisikan panjang dash dan celah bergantian untuk pewarnaan stroke.
2. MDN — stroke-dashoffset — Menjelaskan offset pola dan referensi yang digunakan persentase.
3. MDN — pathLength — Mendokumentasikan kalibrasi jarak native untuk path dan stroke.
4. W3C — Pewarnaan SVG — Memisahkan perilaku isian dan stroke.
5. MDN — prefers-reduced-motion — Mendokumentasikan preferensi pengguna yang digunakan untuk hasil statis.
6. Motion — Animasi SVG — Menjelaskan API penggambaran garis terpisah milik pustaka.

Uji satu rute pada awal, titik tengah, dan akhir sebelum mengurutkan seluruh artwork. Jika sumber Anda berupa lambang raster, siapkan kandidat SVG yang dapat diedit, periksa geometrinya, dan rencanakan rute penggambaran secara terpisah.