SVG hareket yolları: özel simgeyi bir eğri boyunca taşıyın

Bir SVG öğesini bir rota boyunca taşımak için animateMotion kullanın ve mevcut bir yola başvurmak için içine bir mpath yerleştirin. rotate="auto", hareket eden çizimi rotanın yönünü izleyecek şekilde döndürür. Yol boyunca ilerleyen nokta, çizimin yerel koordinat sisteminin başlangıç noktasıdır; dolayısıyla içe aktarılan bir simge için bilinçli olarak bir referans noktası seçmeniz gerekir.

Bu yöntem, size özel bir okun, amblemin veya küçük bir çizimin şeklini değiştirmeden hareket etmesi gerektiğinde yararlıdır. Kendini çiziyormuş gibi görünen bir çizgi için kontur animasyonu kullanın. Bir silüeti diğerine dönüştürmek için yol morflama kullanın. Bu teknikler farklı görsel amaçlara hizmet eder.

Rotayı çizimden ayrı tutun

Rota, simgenin nerede hareket edeceğini tanımlar. Simge ise okuyucunun ne göreceğini tanımlar. MDN’in animateMotion başvuru belgesi hareket öğesini açıklar; mpath başvuru belgesi ise bir yolu başvuru yoluyla nasıl yeniden kullanacağınızı gösterir.

Aşağıdaki orijinal örnekte turkuaz bir ok ve altın renkli bir nokta bulunur. Ok pozitif X yönüne bakar; bu da otomatik dönüşün etkisini incelemeyi kolaylaştırır. Çizim, dışa aktarılmış büyük bir tuvalin uzak bir noktasında değil, (0, 0) çevresinde oluşturulmuştur.

Bunu motion.html olarak kaydedin ve bir tarayıcıda açın. Önce sabit amblem görünür. Dört saniyelik tek bir geçişi çalıştırmak için Play düğmesine basın; Show static başlangıçtaki çizimi geri getirir.

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

Görünür gri eğri, rotanın ayrı bir use öğesiyle çizilmesidir. Yolun görünmez olması gerekiyorsa bu use öğesini kaldırın; animasyonun hâlâ başvurabilmesi için tanımı defs içinde tutun. Hareket öğesi, okun ve noktanın birlikte hareket edeceği grubun içinde bulunmalıdır.

fill="freeze", animasyonun son durumunu korur. Okun turkuaz dolgu rengiyle ilişkili değildir. Bu örnek bir kez çalışır; bu da son konumunu kontrol etmeyi sonsuz bir döngüye göre kolaylaştırır.

Rotadan uzaklaşan bir simgeyi düzeltin

Hareket, öğenin koordinat sistemine uygulanır. Bir logonun görsel merkezini otomatik olarak bulmaz. İçe aktardığınız yollar (200, 120) çevresindeki koordinatları kaplıyorsa, onları çevreleyen grubu bir rota boyunca taşımak grubun içindeki bu kaymayı korur.

Çizimin rotaya temas etmesi gereken noktasını seçin, ardından bu noktayı hareket eden grubun içinde (0, 0) noktasına öteleyin. (200, 120) konumundaki bir referans noktası için yapı şöyledir:

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

İçteki öteleme çizimi hazırlar; dıştaki grup hareketi alır. Bir ölçeklendirme veya düzeltici dönüş eklerken bu görevleri ayrı tutun. SVG animasyon belirtimi, hareketi ek bir dönüşüm olarak tanımlar; dolayısıyla mevcut dönüşümler de son yerleşimi etkiler.

Bir rozet için merkez mantıklı bir referans noktası olabilir. Bir araç için tekerleğin temas noktasını; bir işaretçi için ucunu tercih edebilirsiniz. Sınırlayıcı kutunun merkezi yalnızca bir başlangıç tahminidir. Amaçladığınız temas noktasını rotanın birden fazla konumunda inceleyin.

Sabit konumda dönüşün kendine özgü bir dönme merkezi sorunu vardır. SVG transform-origin rehberi, bir ilerleme yolu eklemeden bu durumu açıklar.

Çizimin dönüp dönmeyeceğini seçin

Bu değerler MDN’in hareket dönüşü başvuru belgesinde açıklanır. auto-reverse bakış yönünü değiştirir; rota boyunca ilerleme sırasını tersine çevirmez.

Kaynağınız yukarı bakıyorsa auto, yukarının ileri anlamına geldiğini bilmez. İçteki çizim grubunu pozitif X yönüne bakana kadar döndürün, ardından hareketi dıştaki gruba uygulayın. Yalnızca simgenin yerel yönünü düzeltmek için rotanın kendisini döndürmekten kaçının.

Rotadaki keskin köşeler ani yön değişikliklerine yol açabilir. Görünür biçimde yumuşak bir dönüş istediğinizde eğri bir rota daha iyi bir başlangıçtır. Ayrıca rotanın çevresinde alan bırakın: bir simge yolun merkez çizgisinin dışına taşabilir ve SVG görüntüleme alanının kenarında kırpılabilir.

Başlangıcı, ortayı ve sonu kontrol edin

Aynı rotayı ve amblemi Chrome’da açtık ve SVG zaman çizelgesini 0, 2 ve 4 saniyede duraklatmak için küçük bir test düzeneği kullandık. Simge sol alttan başladı, tepeye yakın bir noktadan geçti ve sağ altta bitirdi. auto ile bakış yönü eğri boyunca değişti. Dönüş 0 olarak ayarlandığında orta andaki konum değişmedi; ok ise yatay kaldı.

Bu kontrol, bu test örneğini tek bir tarayıcıda kapsar. Tasarım araçları için bir animasyon içe aktarma testi veya her tarayıcı yerleştirme biçimi için bir garanti değildir.

Kendi çiziminiz için:

1. Rotanın başlangıcında temas noktasını kontrol edin. Zamanlamayı ayarlamadan önce kaynak kaymalarını düzeltin.
2. Dönemeçlerin yakınında duraklatın ve amblemin amaçlanan kısmının çizgiyi izlediğini doğrulayın.
3. Otomatik ve sabit dönüşü karşılaştırın. Özellikle metin içerdiğinde, çizime göre seçim yapın.
4. Son duruşta kırpma olup olmadığını kontrol edin ve yeniden oynatmanın doğru başladığını doğrulayın.
5. Gerçek teslim ortamını test edin. Bu örnek, JavaScript kontrolleri olan bir HTML sayfasında satır içi SVG kullanır.

MDN’in belgelediği gibi animateMotion varsayılan olarak yol boyunca eşit hızda hareket kullanır. Dolayısıyla sürenin yarısı, yaklaşık olarak kat edilen mesafenin yarısını temsil eder; kontrol noktaları arasındaki eğri parametresinin orta değerine her zaman karşılık gelmez. Asimetrik kübik rotamızın iki saniyedeki duruşu, geometrik tepesinin biraz sağındaydı.

Kullanışlı bir sabit sürüm sunun

Örnek, amblemin sabit bir use öğesiyle başlar ve hareketi yalnızca Play düğmesi etkinleştirildikten sonra başlatır. JavaScript çalışmazsa sabit çizim görünür kalır. Azaltılmış hareket tercihi etkin olduğunda olay işleyicisi çizimi bu durumda bırakır.

prefers-reduced-motion medya özelliği, sayfanın kullanıcının hareket tercihine yanıt vermesini sağlar. Burada JavaScript, SVG hareketini başlatmadan önce bu tercihi okur ve tercih değişirse sabit sürümü geri getirir.

Test düzeneğinde açık bir azaltılmış hareket önizleme anahtarıyla sabit sürüm dalını da test ettik: animasyonlu grubu gizledi ve amblemi başlangıç konumunda gösterdi. Bu anahtar alternatif gösterim mantığımızı sınadı; bilgisayarın erişilebilirlik ayarını değiştirmedi.

Mümkün olduğunda anlamı animasyonun dışında tutun. Kullanıcının bir durumu öğrenmek veya temel talimatları okumak için hareket eden bir amblemi izlemesi gerekmemelidir. Zaten açıklayıcı bir metnin yanındaki dekoratif simge için erişilebilirlik etiketlemesini, aynı içeriğin iki kez duyurulmasını önleyecek şekilde uyarlayın.

Kendi motifinizi animasyondan önce hazırlayın

Size özel motifiniz yalnızca PNG veya JPG olarak bulunuyorsa PerfectVector, hareketi oluşturmadan önce düzenlenebilir SVG çizimi elde etmenize yardımcı olabilir. Elde edilen silüeti ve küçük açıklıkları inceleyin, birlikte hareket etmesi gereken parçaları gruplayın ve referans noktasını seçin. PerfectVector kaynak geometrisini sağlar; rota, zamanlama ve hareket davranışı ayrı olarak hazırlanır.

Mevcut bir SVG doğrudan gruplama ve referans noktası hazırlığına geçebilir. Bu gösterimdeki gibi basit oklar için geometriyi doğrudan çizmek de pratiktir. Görsel vektörleştirmeye genel bakış, raster bir kaynağı vektörleştirmenin ne zaman yararlı olduğunu açıklar.

Yalnızca raster biçimde bulunan özel bir işaret için görselinizi PerfectVector’da deneyin, konturlarını ve küçük ayrıntılarını kontrol edin, ardından bu SVG’yi rotanızın başlangıcında, ortasında ve sonunda test edin. Animasyonlu sürümün yanında sabit bir sürüm de saklayın.

Sık sorulan sorular

Simgem neden yolun üzerinde değil, yanında hareket ediyor? Çizim yerel koordinat başlangıcından kaymış olabilir. Rotayı izlemesi gereken noktayı seçin ve hareket eden grubun içinde bu noktayı sıfıra öteleyin. Sonucu başlangıçta ve bir dönemeçte kontrol edin.

Otomatik dönüş simgenin şeklini değiştirir mi? Hayır. Hareket, çizimin yerleşimini ve yönünü değiştirir. Yol geometrisini morflamaz. Bu örnekte kullanılan otomatik dönüş için kaynağın ileri yönü pozitif X doğrultusuna bakmalıdır.

Görünür kılavuz çizgiyi kaldırabilir miyim? Evet. Rota tanımını ve ID’sini koruyun, ancak kılavuz çizgiyi çizen ayrı öğeyi kaldırın. Hareket, mpath aracılığıyla yola hâlâ başvurabilir.

Kaynaklar

1. MDN animateMotion — Hareket yollarını, dönüş değerlerini ve varsayılan eşit hızlı hareketi açıklar.
2. MDN mpath — Hareket öğesinin içinde mevcut bir rotaya başvurmayı açıklar.
3. SVG animation specification — Hareket dönüşümlerini ve çizimin koordinatlarıyla ilişkilerini tanımlar.
4. MDN rotate attribute — Sabit, otomatik ve ters yöne bakan hareket yönelimlerini belgeler.
5. MDN reduced-motion preference — Kullanıcının hareket tercihinin nasıl algılanacağını açıklar.