SVG'yi Canlandırmak için 8 JavaScript Kütüphanesi
SVG çözünürlükten bağımsız bir grafiktir. Bu olacak demektir Herhangi bir ekranda herhangi bir kalite kaybına uğramadan iyi görünün. Bunun ötesinde, bazı animasyon efektleriyle SVG'nin canlanmasını da sağlayabilirsiniz..
Daha önce SVG serimizin yayınlarından birinde, SVG animasyonunun nasıl çalıştığını gösterdik.
Hongkiat.com hakkında daha fazlası:
- Animate.css - Kolayca animasyon oluşturmak için CSS3 Kütüphanesi
- Textillate.js ile kolayca metin ekleyin
- Photoshop metni SVG'ye nasıl dönüştürülür
- JQuery ile içeriği gizlemek ve kaydırmak için canlandırın
1. Vivus
Vivus bir JavaScript kütüphanesidir SVG'nize çizilmekte görünüm verir. Vivus herhangi bir bağımlılığa ihtiyaç duymadan kutudan çıkıyor (örneğin, jQuery). Basitçe dahil .js HTML'nizde bir dosya oluşturun ve canlandırmak istediğiniz SVG öğesini, animasyonu hemen başlatmak için bazı önceden ayarlanmış seçenekleri belirleyin.
Örneğin:
yeni Vivus ('svg-element', type: 'oneByOne', süre: 200); Yukarıdaki, benim sahip olduğum SVG elemanımı canlandıracak svg eleman 200 milisaniyede kimlik. Bu SVG'nin her bir elemanı, bu zaman çerçevesi içerisinde birbiri ardına çizilecektir..
2. Bonsai
Bonsai, web sayfalarındaki grafiksel öğeleri canlandırmanın yanı sıra çizim yapmanızı sağlayan güçlü bir JavaScript kitaplığıdır. Hem HTML5 grafik türü Canvas'ı hem de SVG'yi destekler. Bonsai ile basit bir dikdörtgen veya daire oluşturabilir veya isterseniz tam teşekküllü çok oyunculu Bunun gibi bir animasyon oyunu. Bonsai'nin canlı eylemde nasıl çalıştığını hissetmek için Orbit'i kullanabilir veya ilham almak için bu etkileyici örnekleri inceleyebilirsiniz..
3. Hız
Hız, hızlı animasyonlar için oluşturulmuş bir JavaScript kütüphanesidir. Animasyon oluştururken hızın hızı inanılmaz derecede hızlı. Karşılaştırmada, jQuery ve hatta CSS'den daha iyi performans gösterir. Velocity'in API'si jQuery'deki animasyona benzer şekilde çalışır, ancak alias anahtar sözcüğünü kullanır. $ .Velocity () yerine $ .Animate (). Bu bir yana, aynı animasyonlu anahtar kelimeleri aynı şekilde kullanabilirsiniz. fadeIn ve fadeOut.
4. Raphael
RaphaelJS, web sayfalarında SVG'yi canlandırmanın yanı sıra vektör grafiği canlandırmanıza izin veren bir kütüphanedir. IE6'ya kadar geniş bir yelpazedeki tarayıcıları destekler; bu da Raphael'i niş içinde en güvenilir JavaScript kütüphanesi yapar. RaphaelJS ile, Counter Strike ile etkileşimli analitik grafikler, dünya haritaları ve oyun etkileşimleri oluşturabilirsiniz..
5. Yapış
SnapSVG, baştan sona Adobe Web Platform Ekibi ile birlikte Raphael geliştiricisi Dmitry Baranovskiy tarafından geliştirilen SVG animasyonu için popüler bir JavaScript kütüphanesidir. Yine de Raphael'in aksine, SnapSVG sadece en yeni tarayıcılar içindir. Bu, kütüphanenin Raphael'ten önemli ölçüde daha küçük olmasını ve kırpma ve maskeleme gibi SVG özelliklerini desteklemesini sağlar.
6. Tembel Çizgi Ressamı
Lazy Line Painter, Vivus'a benzer bir çizim sırasını canlandırmak için SVG yollarını canlandırmak için kullanılan bir jQuery eklentisidir. Kötü haber, bu eklenti sadece bu çok özel bir şey yapar. Bu nedenle, Illustrator veya Inkscape gibi uygulamalardan SVG'yi içe aktarırken, SVG'nizde yalnızca Doldurma rengi kalmamasını sağlayın, yalnızca yol.
7. SVG.js
SVG.js, SVG'yi işlemek ve canlandırmak için kullanılan hafif bir kütüphanedir. Bu kitaplık ile, SVG öğeniz içindeki boyutu, konumu veya rengi canlandırabilirsiniz. Sadece olsa canlandırıyor; Ekstra işlevsellik eklemek için ek eklentiler de uygulayabilirsiniz. Bu örnek, görüntüye gauss bulanıklığı, desatürat, kontrast, sepya vb..
8. Geçit
Walkway üç tip elemanı destekler, yol, hat, ve Çoklu çizgi SVG çizgileri çizmek için kullanılır. PlayStation 4 konsol çizgi animasyonunu gösteren Polygon'dan bir örnek.
