SVG'yi canlandırmak, onu canlandırmaya yaklaşabileceğiniz birbirinden tamamen farklı üç yol olması açısından biraz benzersizdir.
1. CSS @keyframes ile animasyon
SVG öğeleri hedeflenebilir ve CSS ile şekillendirilebilir. Yani, @keyframes aracılığıyla animasyon uygulayabilirsiniz. Böyle:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Aşağıdaki durumlarda bu şekilde canlandırmayı seçebilirsiniz ...
- Animasyon oldukça basit.
- Yalnızca CSS'nin canlandırabileceği özellikleri canlandırmanız gerekir.
- CSS animasyonlarını zaten biliyorsunuz ve bu konuda rahatsınız.
2. SMIL ile Animasyon
Doğrudan SVG'ye yerleştirilmiş animasyonlar için bir sözdizimi vardır. İşte çok basit bir örnek:
İşte SMIL ile ilgili büyük bir öğretici.
Aşağıdaki durumlarda bu şekilde canlandırmayı seçebilirsiniz ...
- Şeklin kendisi gibi CSS'nin yapamadığı özellikleri canlandırmanız gerekir.
- Süreleri / gecikmeleri manuel olarak senkronize etmeden bir başkası sona erdiğinde bir animasyonu başlatmak gibi SMIL'e özgü diğer özelliklere ihtiyacınız var. Veya bir tıklamayla bir animasyonu başlatmak gibi etkileşimle ilgili şeyler.
3. JavaScript ile Animasyon
JavaScript ile, requestAnimationFrame (veya diğer döngüler) gibi şeylere erişebilirsiniz, böylece hızlı bir şekilde değişen özellik değerlerini kullanarak canlandırabilirsiniz. Ayrıca SVG ile çalışmak için tipik olarak yerleşik animasyon öğeleri bulunan çerçeveler de vardır. Veya SVG ile çalışan animasyon çerçeveleri. SnapSVG, GreenSock, SVG.js veya Velocity.js gibi.
İşte SnapSVG ile bir örnek:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Aşağıdaki durumlarda bu şekilde canlandırmayı seçebilirsiniz ...
- Yine de JavaScript'te çalışıyorsunuz, belki de animasyonunuzun JSON veya benzeri ile aldığınız verilerle ilgisi var.
- Yine de JavaScript'e ihtiyacınız var, çünkü mantığa veya matematiğe veya gerçekten sadece orada mümkün olan başka bir şeye ihtiyacınız var.
- JavaScript'in sizin için bazı hataları çözmesiyle ilgileniyorsunuz.
- Animasyonunuzun kapsamı oldukça büyük / karmaşık ve JavaScript'in sağlayabileceği soyutlamaya ve organizasyona ihtiyacınız var.
Demo
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan SVG'yi Canlandırmanın Üç Yolu Kalemine bakın.
Nihayetinde SVG'yi nasıl kullandığınız seçeneklerinizi etkilemiyor mu?
Öyle. SVG-as- kullanıyorsanız , başka bir stil sayfasından CSS animasyonlarını kullanamazsınız. Ancak, bazı tarayıcılarda (bu yazının yazıldığı sırada, Chrome evet, Firefox hayır) SMIL animasyonlarınız çalışacaktır. SVG dosyalarında gömülü CSS çalışırsa veya bir gün çalışırsa şaşırmam. JavaScript, muhtemelen değil.
SVG'yi bir CSS arka plan görüntüsünde kullanıyorsanız, yukarıdaki ile benzer bir hikaye olduğunu düşünüyorum.
Satır içi kullanırsanız , tüm olasılıklar size açıktır.
SVG'yi bir objectveya aracılığıyla kullanıyorsanız iframe, çalışması için komut dosyalarını / stilleri doğrudan SVG'ye yerleştirmeniz gerekir.