SVG şekil dönüşümü animasyonu: Önce yolları eşleştirin

İşaretin tamamı dönerken dış hattı aynı kalmalıysa bunun yerine ortak bir SVG dönme merkezi ayarlayın.

SVG şekil dönüşümü animasyonu, bir şeklin geometrisini iki durum arasında değiştirir. SVG’nin kendi yol verisi enterpolasyonu için eşleşen komut yapıları hazırlayın ve hangi noktaların birbirine karşılık geleceğine karar verin. İki güzel uç durum çizimi, geçişin ortasında yine de çökmüş veya burulmuş bir şekil üretebilir.

W3C'nin yol verisi animasyon kuralları, akıcı enterpolasyon için aynı sayıda ve türde komutun aynı sırayla bulunmasını gerektirir. Bu yapısal bir gerekliliktir. Logonun hangi köşesinin bir sonraki durumdaki hangi köşeye dönüşmesi gerektiğine karar vermez.

İnceleyebileceğiniz küçük bir çiftle başlayın. Aşağıdaki özgün örneklerde bu iki kararı ayırmak için bir kare, baklava biçimli bir dörtgen ve köşe sırası bilinçli olarak ters çevrilmiş bir kare kullanılıyor.

Birbirine karşılık gelen köşelerle iki yol oluşturun

Elle kodlanmış bu kare ve baklava biçimli dörtgenin ikisi de M L L L Z kullanır: ilk köşeye gidin, üç çizgi çizin ve şekli kapatın. Her koordinat çiftinin diğer yolda eşleşen bir konumu vardır.

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

SVG animate öğesi, bir özniteliği zaman içinde değiştirir. Burada d değerini iki saniyede değiştirir. Animasyondaki fill="freeze", son durumu korur; yolun yeşil fill değeri ayrı bir boyama ayarıdır.

İncelerken örneği bağımsız bir HTML sayfasında tutun. Aşağıdaki inceleme betiği olmadan otomatik olarak başlar. Üretimde kullanılacak kontroller için ne zaman oynatılacağına karar verin ve arayüze uygun bir durağan durum sağlayın.

Köşe eşleştirmesi açıkça belirtilmiştir:

Her iki dış hat da çevresini aynı yönde dolaşır. İlk köşe baklava biçimli dörtgenin üstüne, ikinci köşe sağına doğru hareket eder ve bu sıra devam eder. Bu, sizin belirlediğiniz bir tasarım tercihidir; şekillerin ne anlama geldiğine dair bir yorum değildir.

Gerçek enterpolasyonu duraklatın

Hızlanma ve yavaşlama eğrisini ayarlamadan veya dekoratif efektler eklemeden önce başlangıcı, orta noktayı ve bitişi inceleyin. Yukarıdaki SVG için bu yardımcı işlev, zaman çizelgesini duraklatır ve saniye cinsinden bir zamana gider:

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

MDN, SVG zaman çizelgesini kontrol etmek için pauseAnimations() ve setCurrentTime() yöntemlerini belgeler. Yardımcı işlevi 0, 1 ve 2 değerlerine sahip düğmelere bağlayın. Bunlar, birbirinin yerine geçen üç çizim değil, tek bir enterpolasyondaki üç konumdur.

Birinci saniyede doğrusal enterpolasyon, her koordinatı iki uç değerinin tam ortasına yerleştirir. Dolayısıyla ilk köşe 55, 25 noktasındadır. Bu özgün örneğin orta noktasının tamamı şöyledir:

M55 25L135 55L105 135L25 105Z

SVG’nin kendi animasyon mekanizmasını kullanan bu örneği bir tarayıcıda başlangıçta, orta noktada ve bitişte kontrol ettik, ardından bir kez oynattık. Orta noktada dolgulu bir dörtgen olarak kaldı ve oynatma baklava biçimli dörtgene ulaştı. Bu gözlem, test edilen tarayıcıdaki bu elle kodlanmış yollar için geçerlidir; PerfectVector dönüştürme sonucu veya tarayıcılar arası uyumluluk testi değildir.

Eşit komut sayıları yine de kötü bir dönüşüm üretebilir

Başlangıç karesini koruyun, ancak hedef karenin köşe sırasını ters çevirin:

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

İki uç durum aynı kare gibi görünür. Her iki metin de hâlâ M L L L Z kullanır. Ancak ikinci ve dördüncü köşe, yer değiştirmek için artık şeklin içinden geçer. Orta noktada koordinatları çakışır:

M30 30L80 80L130 130L80 80Z

Dört noktanın tamamı bir köşegen üzerindedir. Tarayıcı testimizde dolgulu kare geçişin yarısında bu köşegene çöktü ve sonunda yeniden kareye dönüştü. Komut yapısının eşleşmesi enterpolasyonu mümkün kıldı; yanlış noktaların eşleştirilmesi sonucu istenmeyen hâle getirdi.

Dışa aktarılmış bir çift buruluyorsa her yolun ilk noktasını ve ilerleme yönünü inceleyin. Ardından köşelerin ve eğri özelliklerinin birbirine karşılık gelen konumlarda olup olmadığını kontrol edin. Gelişigüzel düğüm eklemek bunu görmeyi zorlaştırabilir. Düğüm temizleme kılavuzu, durağan çizimi sadeleştirmeye yardımcı olur; ancak iki durum arasında oluşturduğunuz eşleşmeyi koruyun.

Delikleri ve ayrı parçaları hesaba katın

Bir logo dış sınır, açıklık ve bağımsız bir vurgu öğesi içerebilir. Bunları bir sonraki durumda bilinçli olarak eşleştirilmesi gereken parçalar olarak ele alın. Animasyondan önce hangi parçanın hangisine dönüşeceğini listeleyin. Bir durumda delik varken diğerinde yoksa eşleşen düğüm sayısının bunu çözeceğini varsaymak yerine açıklığın nasıl kaybolması gerektiğine karar verin.

fill-rule başvuru belgesi, SVG'nin hangi bölgelerin bir yolun içinde olduğuna nasıl karar verdiğini açıklar. Bileşik bir yol hazırlayıp test ederken amaçlanan dolgu davranışını koruyun. Açıklık durağan bir uç durumda zaten yanlış görünüyorsa geçiş eklemeden önce dolan delikler için sorun giderme kılavuzunu kullanın.

Pratik bir inceleme sırası şöyledir:

1. Her uç durumun silüetini, deliklerini ve bağımsız ayrıntılarını doğrulayın.
2. Birbirine karşılık gelen alt yolları veya ayrı öğeleri belirleyin.
3. Başlangıç noktalarını, yönlerini ve işinize yarayan özelliklerini hizalayın.
4. Ara durumlarda kesişen sınırları veya kaybolan ayrıntıları kontrol edin.
5. Zamanlamayı ancak bu geometriyi onayladıktan sonra ayarlayın.

Küçük bir vurgu öğesinin bağımsız olarak solması veya hareket etmesi gerekiyorsa ayrı öğeleri kontrol etmek daha kolay olabilir. Bu tercih animasyon tasarımının parçasıdır; onu tek bir bileşik yola zorla yerleştirmeniz gerekmez.

Animasyon mekanizmanızın kurallarını kontrol edin

SVG’nin kendi animasyon mekanizmasını kullanan örnek, eşleşen komutları bilinçli olarak kullanır. Bir kütüphane ek hazırlık yapabilir; bu nedenle gereklilikleri farklı olabilir.

GSAP'nin MorphSVG belgeleri, yol verilerini kübik eğrilere dönüştürmeyi ve gerektiğinde nokta eklemeyi açıklar. Ayrıca shapeIndex gibi eşleştirme kontrolleri sunar. Birbirinden bağımsız dışa aktarılmış iki şeklin zaten eşleştiğini varsaymak yerine eşleşmeyi incelemek için bu kontrolleri kullanın.

KUTE.js, SVG Morph kılavuzunda alt yollar için ayrı bir iş akışı da içeren farklı bir hazırlık modeli belgeler. SVG’nin kendi yol verisi kısıtlamalarını veya başka bir kütüphanenin tavsiyelerini uygulamadan önce gerçekten kullandığınız sürümü ve bileşeni kontrol edin.

Bu mekanizma için küçük, temsil edici bir çift seçin ve ara geometrisini inceleyin. Başarılı bir kareden baklava biçimli dörtgene dönüşüm testi, ayrıntılı bir bileşik logonun davranışını kanıtlamaz. Animasyon hazırlığı sırasında yapılan değişiklikleri özgün tasarımdan ayırabilmek için kaynak çizimin bir kopyasını saklayın.

Durumları eşleştirmeden önce raster çizimi hazırlayın

Ana vektör dosyası eksikse ve yalnızca PNG veya JPG çizim kaldıysa PerfectVector'ın görselden vektöre iş akışı, düzenlenebilir bir SVG adayı hazırlamanıza yardımcı olabilir. Silüeti, delikleri ve ayrı bölgeleri kaynakla karşılaştırın, ardından indirdiğiniz yolları inceleyin. SVG düzenleme kılavuzu, sonraki temizleme adımını ele alır.

İki görseli vektörleştirmek, noktaları arasında anlamsal eşleşme kurmaz veya tamamlanmış bir şekil dönüşümü oluşturmaz. Önce her durağan çizimi onaylayın, ardından çifti seçilen animasyon aracına hazırlayın. Düzenlenebilir ana vektör dosyası zaten varsa raster kopyayı yeniden vektörleştirmek yerine onun üzerinden çalışın.

Çifte yapılan her anlamlı değişiklikten sonra bir orta noktayı test edin. Daha basit bir uç durum, ancak geçiş hâlâ amaçlanan özellikleri izliyorsa yararlıdır. Blogun düzenleme yazıları, ilgili kaynak hazırlama rehberliğini sunar.

Sık sorulan sorular

Şekil dönüşümü için SVG yollarının aynı sayıda noktaya sahip olması gerekir mi? SVG’nin kendi yol verisi enterpolasyonunda, komut türleri ve sıraları dâhil komut yapısının eşleşmesi önemlidir. Bir kütüphane farklı yapıları normalleştirebilir; bu nedenle yalnızca nokta sayısına güvenmek yerine kendi belgelerini kontrol edin.

Uç durumlar doğru görünse bile SVG şekil dönüşümüm neden buruluyor? Noktalar istenmeyen bir sırayla eşleşiyor olabilir. Başlangıç noktasını, yönü ve özellik eşleştirmesini kontrol edin, ardından orta noktayı inceleyin. Birbirinin aynı uç durum silüetleri, çökmüş bir ara şekli gizleyebilir.

İki ayrı SVG dosyası otomatik olarak birbirine dönüştürülebilir mi? Animasyon aracı, uyumlu veya normalleştirilmiş geometriye ve durumlar arasında kullanışlı bir eşleştirmeye ihtiyaç duyar. İki dosya uzantısı tek başına bu eşleştirmeyi sağlamaz; yolları, delikleri ve ayrı parçaları inceleyin.

İki PNG'yi SVG'ye dönüştürmek eşleşmiş bir şekil dönüşümü çifti oluşturur mu? Hayır. Dönüştürme, durağan vektör adayları hazırlar. Parçalarını ve noktalarını eşleştirmeniz, bir animasyon mekanizması seçmeniz ve geçişi incelemeniz yine gerekir.

Kaynaklar

1. W3C — SVG paths — SVG’nin kendi yol verisi enterpolasyonunun yapısını ve parametre eşleştirmesini tanımlar.
2. MDN — animate — Özniteliklerin zaman içinde canlandırılmasını belgeler.
3. MDN — pauseAnimations — İnceleme zaman çizelgesini duraklatmayı sağlar.
4. MDN — setCurrentTime — SVG zaman çizelgesinde saniye cinsinden bir zamana gitmeyi belgeler.
5. MDN — fill-rule — Bileşik çizimlerde iç bölge davranışını açıklar.
6. GSAP — MorphSVG — Normalleştirme ve nokta eşleştirme kontrollerini açıklar.
7. KUTE.js — SVG Morph — Bileşene özgü hazırlığı ve alt yol iş akışını belgeler.

Zamanlamaya son şeklini vermeden önce parçaları eşleştirin ve orta noktayı inceleyin. Başlangıç çiziminiz raster ise bir SVG adayı hazırlayın, durağan geometrisini doğrulayın ve ardından birbirine karşılık gelen animasyon durumlarını oluşturun.