JavaScript, SVG'yi canlandırmada ele alacağımız yolların sonuncusudur. Harika ve oldukça rahat olan CSS'ye baktık, ancak canlandırmak isteyebileceğiniz bir dizi SVG özelliğini yapamaz. Ardından, SVG kodunun kendisinde bildirime dayalı bir sözdizimi olan ve öğenin şekli de dahil olmak üzere daha fazla şeyi canlandırabilmesi açısından daha güçlü olan SMIL'e baktık.
JavaScript bunların her ikisinin de yapabileceği her şeyi yapabilir ve iyi yapabilir. Ya gerçekten karmaşık bir kod yazmanın bedeli ya da size yardımcı olacak bir kütüphanenin masrafı. Ancak bir kez çalışmaya başladığınızda, sözdizimi gerçekten harika ve animasyonlar için dostça olabilir ve performans aslında birinci sınıf olabilir.
SVG animasyonları için JavaScript kullanmanın bir başka avantajı da destektir. SVG'yi canlandırırken endişelenecek pek çok tuhaflık var. Bazı tarayıcılar öğelerdeki dönüştürmeleri desteklemez. Bazı tarayıcılar sayfa yakınlaştırma ile garip şeyler yapar. Bazıları dönüşüm orijini ile tutarsızdır. JavaScript kitaplıkları genellikle bu sorunlarda yardımcı olur.
Özellikle animasyondan bahsederken, birçok JavaScript SVG kitaplığı genel olarak SVG ile çalışmakla ilgilidir. Bunu oluşturabilir ve işleyebilir, öğedeki özelliklere erişebilir, bunları değiştirebilir vb. Bir tür SVG'ye daha sağlam bir API eklemek gibi.
Snag.svg - "SVG için jQuery"
Snap.svg kullanmanın temel örneği:
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen BhHix'i görün.
Bu videoda Snap.svg ile yaptığımız başka bir şey de bu CSS animasyon Pen over'ı Snap.svg'ye dönüştürerek, bize Snap.svg'yi sayfada zaten bulunan satır içi SVG ile çalışmak için kullanabileceğimizi öğretmek. Adobe bir dizi örneği kendisi toplamıştır.
Raphael - Snap.svg ile aynı yaratıcıdan eski kitaplık
SVG.js - "SVG'yi işlemek ve canlandırmak için hafif bir kitaplık." İşte baktığımız saat demosu, bu animasyonların DOM'u hızla değiştirerek nasıl çalıştığını gösteriyor.
D3.js - “D3.js, verilere dayalı olarak belgeleri işlemek için bir JavaScript kitaplığıdır. D3, HTML, SVG ve CSS kullanarak verilere hayat vermenize yardımcı oluyor. " İşte onunla SVG oluşturmaya başlamayla ilgili bir eğitim ve onunla canlandırmayı tanıtan başka bir tanıtım.
GreenSock - "Modern web için ultra yüksek performanslı, profesyonel düzeyde animasyon." GreenSock, genel olarak web'deki animasyonlarla ilgilidir, ancak SVG'yi destekler. İşte nasıl çalıştığını görebileceğiniz bir Kalem.
Velocity.js - "Hızlandırılmış JavaScript animasyonu." Ayrıca SVG'yi destekleyen, genel olarak web'deki animasyon hakkında bir kitaplık. Julian Shapiro bunu yarattı ve JavaScript animasyonunun neden aslında en performanslı animasyon stili olabileceğini ve Velocity.js'nin nasıl çalıştığını yazdı. İşte bazı SVG'ye özgü özellikleri canlandıran çok basit bir demo.
Ayrıca bir çerçeve yardımı olmadan JavaScript animasyonlarıyla kendi başınıza gitmekte özgürsünüz. Satır içi SVG'nin DOM'da olduğunu ve bu nedenle tüm normal DOM API öğelerinin kullanımınıza açık olduğunu unutmayın. Sizin gibi jQuery'nin DOM ile çalışmasına gerçekten gerek yok, bu genellikle işi kolaylaştırır. İşte işleri kendi yöntemleriyle yapan oldukça ilginç bir örnek.