CSS ve SMIL ile SVG Animasyonu
CSS geçişleri ve SMIL ile SVG öğelerine hareket ekleyin
CSS ve SMIL ile SVG Animasyonu, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
SVG üzerinde CSS Geçişleri
SVG sunum öznitelikleri (dolgu, kontur, opaklık, dönüşüm) CSS geçişleriyle canlandırılabilir. Bir sınıf ekleyip geçişi tanımlayın: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. CSS geçişleri SVG öğelerinde de aynı şekilde çalışır.
SVG üzerinde CSS Kare Animasyonları
SVG öğelerine @keyframes uygulayın: yol çizme efektleri için çizgi kesikliği ofsetini, belirme efekti için opaklığı, hareket ve dönme için dönüşümü canlandırın. HTML öğelerinde kullanılan aynı animasyon sözdizimi, hiçbir değişiklik yapılmadan SVG öğeleri için de geçerlidir.
@keyframes draw {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
.path { stroke-dasharray: 100; animation: draw 1s ease forwards; }Yol Çizme Efekti
Kesik çizgi dizisi ve kesik çizgi ofseti tekniği, bir yolun çizilmesini taklit eder: kesik çizgi dizisini yol uzunluğuna eşitleyin, kesik çizgi ofsetini yol uzunluğuna ayarlayın (görünmez) ve ardından kesik çizgi ofsetini 0'a canlandırın. Böylece kontur, başlangıçtan sona doğru kendiliğinden çiziliyormuş gibi görünür.
Yol Uzunluğunu Alma
path.getTotalLength(), yolun SVG kullanıcı birimlerindeki uzunluğunu döndürür. Bu değeri hem kesik çizgi dizisi hem de başlangıçtaki kesik çizgi ofseti için kullanın. Böylece animasyon, yolun karmaşıklığı veya uzunluğu ne olursa olsun doğru çalışır.
SVG üzerinde CSS Dönüşümü
Modern tarayıcılar SVG öğelerinde CSS dönüşümünü destekler. SVG öğelerinde dönüşüm başlangıç noktası varsayılan olarak SVG'nin sol üst köşesidir; HTML'deki gibi öğenin merkezi değildir. Dönüşüm kutusu özelliğini dolgu kutusuna göre ayarlayarak dönüşüm başlangıç noktasını öğenin sınırlayıcı kutusuna göre belirleyin.
.spinner {
transform-box: fill-box;
transform-origin: center;
animation: rotate 1s linear infinite;
}SMIL Animasyonları
SMIL (Eşzamanlı Çoklu Ortam Entegrasyonu Dili), SVG'nin yerleşik animasyon sistemidir. Animasyon öğesi, öznitelik değerlerini zaman içinde değiştirir. SMIL, JavaScript veya CSS gerektirmez; animasyonlar tamamen SVG işaretlemesinin içinde bildirimsel olarak tanımlanır.
<circle r="20">
<animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/>
</circle>animateTransform
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite">, SMIL sözdizimini kullanarak bir öğeyi belirtilen merkez noktası çevresinde döndürür.
animateMotion
<animateMotion>, bir öğeyi SVG yolu boyunca hareket ettirir. Bir yola mpath ile veya satır içi yol verileriyle başvurabilirsiniz. Öğe, yol eğrisini otomatik olarak izler; bu da koordinatları elle hesaplamadan karmaşık hareket yolları oluşturmak için kullanışlıdır.
CSS ve SMIL Arasındaki Ödünleşimler
CSS animasyonları: tüm modern tarayıcılarda desteklenir, CSS basamaklandırmasıyla bütünleşir ve JavaScript ile denetlenmeleri (duraklatma, tersine çevirme) daha kolaydır. SMIL: SVG işaretlemesinin içinde kendi kendine yeter, CSS erişimi olmayan statik SVG dosyalarında çalışır ve yol izleme animasyonları için bildirimsel ve ifade gücü yüksek bir yapı sunar.
SVG Yollarını Şekil Dönüştürme
İki yol şekli arasında animasyon oluşturmak için yolların aynı sayıda komuta ve uyumlu bir yapıya sahip olması gerekir. CSS animasyonu d özelliğini canlandırır (Chrome 88+, Firefox 72+): yerel CSS yol şekil dönüştürmesi için @keyframes { to { d: path("M...") } } kullanılır.
SVG Animasyonları için Erişilebilirlik
Hareketi rahatsız edici bulan kullanıcılar için SVG animasyonlarını devre dışı bırakmak veya sadeleştirmek üzere prefers-reduced-motion medya sorgusunu ekleyin. Dekoratif animasyonlar tamamen devre dışı bırakılmalı; yüklenme durumları gibi anlamlı animasyonlar durdurulmak yerine sadeleştirilmelidir.
Bilgi Kontrolü
Kesik çizgi dizisi ve kesik çizgi ofseti tekniği, yol çizme animasyonunu nasıl oluşturur?
Özet
SVG animasyonu, özellik tabanlı efektler için CSS geçişlerini ve kare animasyonlarını, yol çizimi için kesik çizgi dizisi/ofseti tekniğini, SVG içindeki bildirimsel animasyon için SMIL animate/animateTransform/animateMotion öğelerini ve erişilebilirlik için azaltılmış hareket tercihini kullanır. CSS ve SMIL birbirini tamamlar; seçiminizi SVG'nin CSS basamaklandırmasıyla bütünleşmesine mi yoksa bağımsız dosya olarak taşınabilir olmasına mı ihtiyaç duyduğuna göre yapın.
Sıkça Sorulan Sorular
“CSS ve SMIL ile SVG Animasyonu” dersi ücretsiz mi?
Evet — “CSS ve SMIL ile SVG Animasyonu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“CSS ve SMIL ile SVG Animasyonu” dersinde ne öğreneceğim?
CSS geçişleri ve SMIL ile SVG öğelerine hareket ekleyin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“CSS ve SMIL ile SVG Animasyonu” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Satır İçi SVG ve img ile object Karşılaştırması
- Temel SVG Şekilleri: rect circle path
- SVG viewBox ve Duyarlı Ölçeklendirme
- CSS ve SMIL ile SVG Animasyonu