Vektör grafikleri artık web'i ve hatta mobil uygulamaları ele geçiriyor. Web sayfalarının veya mobil uygulamaların simgeleri, düğmeleri ve öğeleri artık her geçen gün ekran çözünürlüğü, dpi, oranlar vb. Üzerinde oluşturulması gerektiğinden ve mobil tarayıcılarda daha iyi okunan sayfalar artık bitmap öğelerini çirkin ve kullanılamaz hale getirdi.

SVG'de animasyonlu simgeler, arka planlar ve kontroller oluşturmaya başlamanın zamanı geldi, ancak SVG dosyalarını nasıl canlandırıyorsunuz?

Bu cevabın çoğu , web ile ilgili çizimlerin nasıl canlandırılacağı ile ilgili bu soruya da gönderilmiştir .

SMIL animasyonlarından kaçının

Sara Soueidan, muhtemelen en iyi web üzerinde SVG açıklığı animatör, yazdığı "Ben biliyorum SMIL animasyonlara rehber yazdım ama, onların geleceği görerek, ben şahsen artık bunları kullanmayın." Sen de yapmamalısın.

SMIL animasyonları herhangi bir IE, Edge, bazı mobil tarayıcılarda çalışmıyor ve Chrome / Opera tarafından yavaş yavaş bırakılıyor (ancak son zamanlarda Chrome ekibi bu kullanımdan kaldırmanın geçici olarak askıya alındığını söyledi ). Bunları% 99 oranında kullanmaktan kaçınmalısınız.

Çok basit animasyonlar için CSS kullanma

SVG, büyük ölçüde saf CSS ( :hoverdurumlar, transforms, transitions ve animations kullanımı dahil) kullanılarak canlandırılabilir . Oluyor tam CSS animasyon desteği almak için planlanan ancak şu anda sadece bazı desteklenir ve çapraz tarayıcı sorunları ile hatalı olabilir.

Sara Soueidan , CSS'nin SVG'leri canlandırmak için harika olduğunu, ancak JS'yi bu çapraz tarayıcı sorunlarını çözmeye yardımcı olduğu için tercih ettiğini söylüyor . Bu nedenle, mümkün olduğunda kullanın, ancak animasyonlar daha karmaşık olduğunda veya tarayıcılar arası çalışmadığında JS'ye geri dönün.

CSS çalışmazsa JavaScript animasyonlarını kullanın

Çoğu zaman, SVG'ler bir JavaScript animasyon kütüphanesine ihtiyaç duymadan küçük bir JavaScript kullanılarak canlandırılabilir. JS'de animasyon yapmak çok daha çapraz tarayıcı desteğine sahiptir ve bazı temel anlayışlarla kullanımı oldukça kolaydır.

Zaman çizelgesi veya benzeri bir şey gerektiren karmaşık animasyonlar için GSAP gibi bir kitaplık kullanmak çok yararlı olabilir. Sayısız başka SVG animasyon kütüphanesi var, Snap.svg başka bir büyük kütüphanedir, ancak çoğu animasyonları neredeyse GSAP kadar kolay veya performansla işlemez.

Belirli animasyon türleri için , GSAP'ın MorphSVG gibi belirli bir JS eklentisini kullanmak , çapraz tarayıcı sorunlarına ve tüm hesaplamalara dikkat ettiklerinden biraz zaman kazandırabilir. Ancak, çoğu animasyon böyle eklentilere ihtiyaç duymaz. Daha fazla bilgi için bkz. "SMIL Özelliklerine Alternatifler Kılavuzu" .

SMIL için çoklu dolgular kullanmak da kabul edilebilir, ancak çok sık kullanılmadıkları / test edilmedikleri için bunu yapıyorum. Bununla birlikte, Eric Willigers ve FakeSmile en yaygın ikisi.

İşleme

SVG + JS'ye dışa aktarma konusunda karşılaştığım tek yazılım Lottie (eski adıyla Bodymovin) adlı bir Adobe After Effects eklentisi , Flash 2 SVG adlı bir Flash uzantısı ve SVG Circus adlı küçük bir çevrimiçi araçtır . Bunun dışında Adobe Edge Animate, Adobe Animate CC veya Animatron gibi yazılım animatörleri kullanılmaması gereken SMIL animasyonlarına dışa aktarılır . Bu nedenle, bazı geliştiricilerin bir düzenleyiciden dışa aktarılan SVG'leri kullanarak SVG + CSS veya SVG + JS animasyonları yapması en iyisidir . Inkscape, öğreticileri ve bunun nasıl yapılacağına dair örnekleri birbirine bağlayan harika bir kaynağa sahiptir .

Gelecekte daha fazla animasyon yazılımının SVG + JS'ye dışa aktarmayı destekleyeceğinden eminim.

Diğer bazı önemli notlar

• Performansı akılda tutmak önemlidir . Sara Drasner , mümkün olduğunca donanım hızlandırmalı CSS animasyonlarını seçmeniz gerektiğini , ancak mümkün olmadığında iyi bir JavaScript yaklaşımına geri dönmenizi gerektiren SVG için bazı performans kriterleri oluşturdu .

• Bir <object>etikette SVG'leri kullanmak veya <svg>etkileşimli ise doğrudan bir XML öğesinde gömülü ve etkileşimli değilse arka plan görüntüsü olarak kullanmak en iyisidir , ancak bunu yapmanın başka yolları da vardır.

Web animasyonlarının daha bütün bir görünümü için Rachel Nabor'un A List Part'deki yayınını okuyun . Aletle ilgili bazı ek öneriler için, bu yazı çok yararlıdır, ancak tüm duyguları kabul etmiyorum, özellikle de SMIL animasyonlarını nasıl sunduğunu.

Her zaman büyük bir ağrı WRT destek / bakım olmak için JS kütüphaneleri dışında başka bir şeye güvenerek buldum.

Her zaman D3.js kullandım . Başlangıçta veri kümelerinden etkileşimli SVG / DOM öğeleri oluşturmak için oluşturuldu. Bununla birlikte, JS'nin sayfaya erişimi olduğu sürece, bir sayfada yer alan SVG / DOM'yi değiştirebilirsiniz.

SVG / DOM oluşturmak / canlandırmak için çeşitli projelerde kullanıyorum. bazı örneklere yumuşak gerçek zamanlı gösterge tabloları, harita görselleştirmeleri, DOM dönüşümleri ve PDF'lere dahil edilmek üzere SVG dosyaları oluşturmak dahildir. Bunu internette de gördüm. Web sitesinde bir sürü örnek ve onu kullanan sayfalara bağlantılar vardır.

Bunu tavsiye ederim çünkü oldukça çapraz tarayıcı uyumludur, aktif bir topluluğa sahiptir ve öğrenmesi kolaydır. Web sayfasına bir göz atın ve onunla neler yapabileceğinizin küçük bir örneğini görmek için gerçek dünya kullanımlarına dikkat edin.

Svg canlandırmanın olası yolları şunlardır:

SVG SMIL ANİMASYONLARI

SVG, doğrudan Adobe Animate CC + flash2svg eklentisi gibi animasyon araçlarından dışa aktarılan, SMIL adı verilen güçlü yerel biçimlendirme dili ile canlandırılabilir.

Desteksiz tarayıcılarda bile SMIL ile bir SVG'yi canlandırmak için sadece bir SMIL çoklu dolgusu kullanmanız gerekir.

Çoklu doldurma, bir tarayıcıdan eksik özellikler için destek sağlayan, orijinal kodlamayı tarayıcının anlayabileceği bir dile çeviren özel bir javascript kod parçasıdır.

Eric Willigers tarafından yapılan SMIL çoklu dolgusu tam da bunu yapıyor: SMIL'i Microsoft tarayıcısının bile desteklediği Web Animations API'sına çeviriyor. Google Chrome geliştiricileri, yerel SMIL desteğini bırakmaya ve Web Animasyonlarına odaklanmaya karar verdiler, Eric Willigers, SMIL dosyalarını Chrome'da oynatma görevini çoktan doldurdu.

Birisi bunu yanlış bir şekilde SMIL'in Chrome tarafından kullanımdan kaldırılması olarak yorumladı ve geliştiricileri bu seçim için eleştirdi. Ancak bu gerçek bir kullanımdan çıkarma değildi, sadece SMIL'i çoklu dolum düzeyinde yorumlama işinin yerini almıştır.

Aslında Chrome, SMIL'i kullanımdan kaldırma niyetleri hakkında çok resmi bir duyuruda Willigers çoklu dolgusunu gösterdi.

Eğer SMIL'in ölümü hakkında internette okuduysanız endişelenmeyin. SMIL'in “ölümü” büyük ölçüde abartılmıştı. Daha çok yeniden doğuş gibi.

IE ve EDGE dahil tüm tarayıcılarda SMIL kullanmak için, bu javascript çoklu dolguyu web sayfanıza eklemeniz yeterlidir:

https://github.com/ericwilligers/svg-animation

Popüler flash2svg ihracatçısının yazarı Tom Byrne tarafından yapılan çoklu dolguyu kullanan bir demo sayfası:

çok dolgu içermeyen sayfa:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

ve çok sayfalı aynı sayfa:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

Kaynağa bakarsanız, hemen hemen kendini açıklar.

Ayrıca, çoklu dolgulu performanslar genellikle orijinal SMIL'den daha iyidir, çünkü birçok tarayıcıda Web Animations donanım hızlandırılırken SMIL genellikle değildir.

SVG SMIL'DE İHRACAT ANİMASYONLARI

SVG animasyonları oluşturmanın daha basit yolu, onları çizmek için Adobe Animate CC gibi araçları ve SVG'ye dışa aktarmak için Flash2svg ( https://github.com/TomByrne/Flash2Svg ) gibi eklentileri kullanmaktır . Bununla birlikte, neredeyse tüm animasyonları + sesi bu çizgi bölümü gibi tek bir SVG dosyası olarak dışa aktarabilirsiniz:
http://www.tbyrne.org/portfolio/smil/LoveDota.svg

SVG ANİMASYON JS KÜTÜPHANELERİ

Javascript yolu daha karmaşıktır. Her şeyden önce bir javascript programcısı olmanız gerekir. O zaman birçok kütüphane arasında seçim yapmak zorundasınız. Daha popüler olanlar:

• SnapSVG http://snapsvg.io
  Bu kütüphane, aynı yazar tarafından yapılan eski ve popüler Raphael animasyon kütüphanesinin halefidir. Çok kararlı, ancak SVG'yi canlandırmak için çalışma zamanında dahili bir formatta dönüştürür. Dönüşüm seçenekleri de çok basit, sadece doğrusal enterpolasyon. (NOT: Adobe Animate CC için bir snap.svg eklentisi de vardır, ancak dışa aktarılan dosyalar şişirilir. İhracatçı, animasyonun her karesi için bir anahtar svg komutu üretir, her anahtar kare değil, 1000'den fazla satır içeren bir 18Kb svg dosyası üretir basit bir dikdörtgeni 360 derece döndürmek için kod. Flash2svg eklentisi çok daha verimli, sadece bir komut ve aynı işi yapmak için birkaç bayt).

• Greensock MorphSVG
  http://greensock.com/morphSVG SVG'yi
  kolayca canlandırabilmenizi ve dahili bir biçimde dönüştürmeye gerek kalmadan tam özellikli bir dönüştürme kütüphanesi. Inkscape içinde sadece 3-4 svg anahtar kareleri oluşturun ve Greenock SVGMorphing lib kareler arasında otomatik olarak enterpolasyon yapar ve düzgün bir oynatma için tüm ara kareleri oluşturur. İşte bir örnek:
  http://codepen.io/Emasoft/pen/reOqYE

• 3D Seen.js
  http://seenjs.io/demo-svg-canvas.html 3D
  animasyon yapmak istiyorsanız bu kütüphane çok güçlüdür.
  Seen.js, 3D .obj dosyalarını SVG'de meshler ve çok kolay bir şekilde canlandırır.

SVG GÖRÜNTÜ EDİTÖRLERİ

Araçlara gelince, animasyon anahtar karelerini esas olarak üç yazılımla oluşturabilirsiniz:

• Inkscape: açık kaynak, tonlarca özelliğe sahiptir, SVG Çalışma Grubuna katılan insanlar tarafından yapılan gelişmiş bir vektör düzenleme paketi. SVG formatı için referans. Öğrenmesi kolay değil.

• Adobe Illustrator: ticari, çok güçlü vektör çizim yazılımı, hala SVG tarafından desteklenmeyen birçok özellik sunar, ancak formatla en kötü uyumluluğa sahiptir. Illustrator karışıklığını düzeltmek için genellikle dışa aktarılan SVG dosyasını manuel olarak düzenlemeniz gerekir. Ancak sanat okulunda çok popüler ve tüm grafikçiler bunu nasıl kullanacaklarını biliyorlar.

• Affinity Designer: Bu, Illustrator gibi ticari bir yazılımdır, ancak neredeyse Inkscape düzeyinde mükemmel bir SVG uyumluluğu vardır. Kullanıcı arayüzü çok daha dostane ve şimdi SVG sanatçıları arasında çok popüler hale geliyor.

SVG ANİMASYON EDİTÖRLERİ

Şu anda tek SVG animasyon editörü şudur:

• Adobe Animate CC: Eski Adobe Flash Pro, artık kullanılmayan flash animasyonlardan modern SVG animasyonlarına geçmek için Adobe tarafından tamamen yeniden yazılmıştır. Ortaya çıkan SVG animasyonlarını özel bir javascript kitaplığıyla birlikte dışa aktarabilir veya "flash2svg" gibi eklentileri kullanarak SVG + SMIL'e kaydetmeyi seçebilirsiniz. Bu son seçenek çok verimli, şişirilmiş yerli ihracatçı yerine her zaman kullanıyorum.

Ücretsiz eklentiyi buradan indirebilirsiniz: https://github.com/TomByrne/Flash2Svg

Veya Adobe Plugins panelinden yükleyin: https://creative.adobe.com/addons/products/7232

Ne yazık ki Adobe Animate CC ticari bir markadır. Ücretsiz açık kaynaklı alternatif animasyon uygulamaları var, ama hepsini denedim ve hala IMHO'yu emiyorlar. Gelecek için umut edelim.

Referanslar:
Konuyla ilgili daha kapsamlı blog yayınım: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec

Snap.svg hakkında başvuruda bulunulan dava: /programming/35727635/adobe-animate-snap-svg-plugin-huge-files