SVG kontur animasyonu: Tek bir çizim rotası hazırlayın

SVG kontur animasyonu, yol boyunca bir çizgi parçasını hareket ettirerek çizgiyi ortaya çıkarabilir. Çizgi parçasını ve boşluğu tanımlamak için stroke-dasharray kullanın, ardından kontur görünür olana kadar stroke-dashoffset değerini canlandırın. MDN bunları kontur boyama özellikleri olarak belgeler.

Neyin çiziliyormuş gibi görüneceğini kaynak yol belirler. Açık bir yol, bir işaretin ortasından geçen kalem rotasını izleyebilir. Dolgulu bir dış hat ise işaretin sınırını tanımlar. Bu dış hatta kontur eklemek, animasyonu kenarları boyunca ilerletir; kesikli çizgi ayarları tek başına dolguyu ortaya çıkarmaz.

Logonun tamamının zamanlamasını ayarlamadan önce küçük bir şekille başlayın. Aşağıdaki elle kodlanmış örnekler, animasyonunuzun ihtiyaç duyduğu geometriyi seçebilmeniz için çizim rotasını, dolgulu çizimi ve çevre hattını birbirinden ayırır.

Bir simgenin tamamını bir eğri boyunca taşımak için hareket rotasını çizimden ayrı tutan SVG hareket yolu iş akışını kullanın.

Açık, konturlu bir yolla başlayın

Bu özgün yol önce sağa, sonra yukarı ilerler. fill devre dışıdır; dolayısıyla görünen işaret tamamen konturdan oluşur:

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

İki saniyelik bir ortaya çıkma animasyonu için bu CSS'i kullanın:

.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", mesafeye dayalı işlemleri sizin belirlediğiniz 100 uzunluğuna göre kalibre eder. pathLength başvuru belgesi bu normalleştirmeyi açıklar. Tek bir stroke-dasharray değeri, çizgi parçası ve boşluk olarak tekrarlanır; dolayısıyla 100, tam uzunlukta bir çizgi parçası ve ardından aynı uzunlukta bir boşluk sağlar. Bu örnekte deseni 100 kaydırmak konturu gizler; kaydırmayı sıfıra getirmek onu ortaya çıkarır.

Burada birimsiz sayılar kullanın. stroke-dashoffset: 100%, normalleştirilmiş 100 yol biriminin yerine geçmez. MDN'nin dash-offset başvuru belgesi, yüzde değerlerinin yolun toplam uzunluğu yerine SVG görüntü alanının normalleştirilmiş köşegenini kullandığını belirtir.

Örnekte, duraklatılmış başlangıcı daha kolay incelemek için butt uç biçimi kullanılır. Diğer uç biçimleri, çizgi parçasının uçlarının görünümünü değiştirebilir. Çizime uygun uç biçimini seçin, ardından simgenin gerçekten görüneceği boyutta ilk ve son kareleri kontrol edin. Dekoratif tekrarlar için çizgi parçası ve boşluk uzunluklarını seçmeden önce noktalı dış hatları ve uç aralıklarını karşılaştırın.

Rotayı dolgulu bir dış hatla karşılaştırın

Kalın, bükülmüş bir şerit, farklı geometri içermesine rağmen bu konturlu çizgiye benzer görünebilir. Elle kodlanmış bu ikinci yol, şeridin sınırı boyunca dolaşır ve Z ile kapanır:

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

Aşağıdaki boyama ayarlarıyla stroke-dashoffset değerini değiştirmek görünür bir etki yaratmaz:

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

Kesikli hâle getirilecek bir kontur olmadığı için şerit dolgulu kalır. W3C'nin SVG painting belirtimi, bir şeklin içini boyamak ile konturunu boyamak arasında ayrım yapar.

Bunun yerine fill: none ayarlayıp bir kontur ekler ve kapalı yolu canlandırırsanız kontur çevre hattını izler: bir kenar boyunca ilerler, ucu geçer ve diğer kenar boyunca geri döner. Şeridin merkezinden geçen tek bir rotaya dönüşmez.

Bu ayrım, vektörleştirmenin neden çift kesim çizgileri üretebildiğini de açıklar. Animasyonda istenmeyen sonuç, kalem izinin dışından dolaşan bir çizgi olabilir. Amaçlanan etki bir merkez rotası gerektiriyorsa bu geometriyi incelemek veya hazırlamak için tek çizgili SVG kılavuzunu kullanın.

Başlangıcı, orta noktayı ve bitişi kontrol edin

Örneği duraklatılmış hâlde incelemek için animasyonu devre dışı bırakın ve stroke-dashoffset değerini 100, 50 ve 0 olarak ayarlayın. Bu değerler, normalleştirilmiş yol için başlangıca, yarısının ortaya çıkmasına ve son duruma karşılık gelir. CSS özelliğine yazılan yüzdeler değildir.

Üç sürümü de bu durumlar için düğmeler içeren küçük bir test sayfasında tutun. Orta ayar özellikle kullanışlıdır: tamamlanmış şekiller birbirine benzer görünebilirken çizim rotaları ortaya çıkma sürecinin ortasında belirginleşir.

Bu elle kodlanmış yolları bir tarayıcıda 100, 50 ve 0 kaydırma değerlerinde kontrol ettik ve iki saniyelik animasyonu bir kez çalıştırdık. Rota ve çevre hattı farklı şekillerde ortaya çıkarken dolgulu şerit görünür kaldı. Bu test söz konusu özgün yolları gösterir; PerfectVector vektörleştirme sonucu veya tüm tarayıcılarda yapılmış bir test değildir.

Sonuç farklıysa gerçek öğenin boyama ayarlarını ve hesaplanmış stillerini inceleyin. Bir CSS kuralı sunum özniteliğini geçersiz kılabilir; görünür konturu olmayan bir yol da kesikli çizgiyle ortaya çıkma etkisini gösteremez. Kaybolan kontur kontrol listesi, animasyon zamanlamasını ayarlamadan önce boyama ve görüntüleme sorunlarını ayırmanıza yardımcı olur.

Başlangıç noktasına ve yol sırasına karar verin

İlk yol M30 90 noktasından başlar, yatay olarak x=100'e, sonra dikey olarak y=30'a ilerler. Bu sıra, ortaya çıkma animasyonuna bir yön verir. Çizim üst uçtan başlamalıysa animasyonun amaçlanan kalem hareketini bildiğini varsaymak yerine yolu o yönde hazırlayın.

Ayrı işaretlerden oluşan bir logo için hangi yolun önce, hangisinin sonra görünmesi gerektiğine karar verin. Aynı animasyonu her yolda başlatmak, eşzamanlı ortaya çıkma üretir. Bir sıralama için açıkça belirtilmiş gecikmeler veya başka bir zaman çizelgesi düzeni gerekir. Sonraki şekiller hâlâ çizilmekte olan bir konturu kapatabileceği için kesişimleri ve örtüşmeleri duraklatılmış durumlarda kontrol edin.

Birbirinden kopuk birkaç alt yoldan oluşan bir çizimin, zamanlamayı kullanışlı biçimde kontrol edebilmek için ayrı öğelere bölünmesi gerekebilir. Görsel tasarım kararlarıyla animasyon rotası kararlarını ayrı tutun. Sırf tek bir yol elde etmek için ilgisiz parçaları birleştirmek, sanatçının hiç amaçlamadığı bir bağlantı oluşturabilir.

Bir animasyon kütüphanesi sıralamayı kontrol etmenize yardımcı olabilir, ancak girdinin yine de doğru geometriye sahip olması gerekir. Motion'ın SVG animation belgeleri, canlandırılmış pathLength değeri üzerinden çizgi çizme olanağı sunar. Kütüphanedeki bu kontrol, burada kullanılan SVG’nin kendi pathLength="100" kalibrasyonundan ayrı bir API'dir; API'yi kontrol etmeden bir örneğin değerlerini diğerine kopyalamayın.

Tamamlanmış çizimi hareket olmadan da sunun

CSS örneğinde varsayılan kaydırma değeri sıfırdır ve yalnızca animasyon çalışırken değiştirilir. Azaltılmış hareket medya sorgusu, ortaya çıkma animasyonunu devre dışı bırakır ve tamamlanmış çizgiyi gösterir. MDN'nin prefers-reduced-motion kılavuzu, sorgunun kullanıcı tercihini nasıl algıladığını açıklar.

Etkileşimli bir demo için tekrar oynatma düğmesinin yanı sıra durağan sonucu gösteren bir kontrol sunun. Arayüz simgesinde, eylemi açıklayan görünür metin etiketini veya erişilebilir adı koruyun. Animasyon, okuyucunun grafiğin anlamını keşfetmesinin tek yolu olmamalıdır.

Başlangıç, kesintiye uğramış ve tamamlanmış durumları gerçek yerleşimde test edin. Gerekli bir simge animasyon çalışmadığında görünmez kalıyorsa etkiyi arayüzün tamamına yaymadan önce temel stili düzeltin. Başarılı, bağımsız bir demo, her tarayıcı, yardımcı teknoloji veya performans sonucunu kanıtlamaz.

Raster çizimi kalem rotası vaat etmeden hazırlayın

Ana vektör dosyası eksikse ve tek katmanlı bir PNG veya JPG biçimindeki işaret için düzenlenebilir çizim gerekiyorsa PerfectVector'ın görselden vektöre iş akışı, bir SVG adayı hazırlayabilir. Silüetini, deliklerini ve ayrı bölgelerini kaynakla karşılaştırın, ardından indirdiğiniz yolları bir düzenleyicide inceleyin. Animasyonu planlamadan önce bu geometriyi incelenecek çizim olarak kullanın.

Vektörleştirme, özgün kalem sırasını belirlemez, zaman çizelgenizi oluşturmaz veya tek merkez çizgili yolları garanti etmez. Ortaya çıkma etkisi bir konturun içinden geçen tek rota gerektiriyorsa bu rotayı bilinçli olarak çizin veya hazırlayın. Varsa mevcut ana vektör dosyasını koruyun. Yalnızca raster görsel gömen bir SVG'de de görünen işaretin düzenlenebilir yol geometrisi olduğunu varsaymadan önce gömülü görsel kontrolünü yapmanız gerekir.

Önce durağan çizimi, sonra aşamalı çizim sırasını onaylayın. Blogun düzenleme kılavuzları, animasyon katmanından önce kaynak temizliğini ele alır.

Sık sorulan sorular

SVG'm kontur animasyonunun başlangıcında neden görünür kalıyor? Görünen bölümün dolgu olup olmadığını kontrol edin. stroke-dasharray ve stroke-dashoffset ayarları konturu etkiler; bu nedenle dolgulu bir bölge, konturu gizliyken görünür kalabilir.

Animasyon neden çizginin iki yanını da dolaşarak çiziyor? Yol, kalın bir işaretin çevresindeki kapalı dış hattı tanımlıyor olabilir. Bu yola kontur vermek çevre hattını izler. Etki merkezden geçen tek bir çizgi gerektiriyorsa açık bir çizim rotası hazırlayın.

Yol uzunluğunun tamamı için 100% kullanabilir miyim? stroke-dashoffset içinde genel bir ikame olarak kullanamazsınız. Yüzde değerleri görüntü alanının normalleştirilmiş köşegenine göre hesaplanır. Örnekte SVG’nin kendi pathLength="100" özniteliği ile birimsiz kesikli çizgi değerleri kullanılır.

PNG'yi SVG'ye dönüştürmek onu el yazısı animasyonuna hazır hâle getirir mi? Vektörleştirme, otomatik kalem sırası veya merkez çizgisi garantisi vermez. Oluşan geometriyi inceleyin, çizim yollarını ve zamanlamayı ayrı hazırlayın.

Kaynaklar

1. MDN — stroke-dasharray — Kontur boyaması için sırayla gelen çizgi parçası ve boşluk uzunluklarını tanımlar.
2. MDN — stroke-dashoffset — Desen kaydırmalarını ve yüzdelerin kullandığı referansı açıklar.
3. MDN — pathLength — Yollar ve konturlar için SVG’nin kendi mesafe kalibrasyonunu belgeler.
4. W3C — SVG painting — Dolgu ve kontur davranışını ayırır.
5. MDN — prefers-reduced-motion — Durağan sonuç için kullanılan kullanıcı tercihini belgeler.
6. Motion — SVG animation — Kütüphanenin ayrı çizgi çizme API'sini açıklar.

Çizimin tamamını sıralamadan önce tek bir rotayı başlangıçta, orta noktada ve bitişte test edin. Kaynağınız raster bir işaretse düzenlenebilir bir SVG adayı hazırlayın, geometrisini inceleyin ve çizim rotasını ayrı planlayın.