SVG animasyonu - SVG animation

ölçeklendirilebilir Vektör Grafiği

Açık bir XML tabanlı standart vektör grafik formatı olan Ölçeklenebilir Vektör Grafiklerinin animasyonu çeşitli yollarla mümkündür:

Kütüphaneler ayrıca mevcut SVG-etkin tarayıcılara SMIL desteği vermek için bir dolgu olarak yazılmıştır . Bu yöntem aynı zamanda SVG+Time olarak da bilinir.

SVG, Taşınabilir Ağ Grafiklerini (PNG) ve JPEG tarama görüntülerini desteklediğinden, APNG ve Çoklu Görüntü Ağ Grafiklerine (MNG) alternatif olarak bu tür görüntüleri canlandırmak için kullanılabilir .

Tarih

SVG animasyon öğeleri , ilk sürümü 1999'da yayınlanan Senkronize Multimedya Entegrasyon Dili'nin geliştiricileri olan World Wide Web Consortium (W3C) Senkronize Multimedya Çalışma Grubu ile işbirliği içinde geliştirildi . SVG 1.0 , 4 Eylül 2001'de bir W3C Tavsiyesi oldu . Bazı web tarayıcıları , 2000'li yıllarda, Amaya da dahil olmak üzere, SVG animasyonu için destek ekledi , ancak SVG animasyonu, yalnızca 2010'lardan başlayarak yaygın olarak kullanılan tarayıcılar, özellikle Firefox 4 (2011) tarafından desteklendi. Internet Explorer , ECMAScript animasyonunu destekler ve halefi Microsoft Edge , 42.17134 sürümünden itibaren ECMAScript ve CSS animasyonlarını destekler.

SYMM Çalışma Grubu, SVG Çalışma Grubu ile işbirliği içinde, genel amaçlı bir XML animasyon özellik setini temsil eden SMIL Animasyon spesifikasyonunu yazmıştır . SVG, SMIL Animation spesifikasyonunda tanımlanan animasyon özelliklerini içerir ve SVG'ye özgü bazı uzantılar sağlar.

Örnekler

Aşağıdaki kod parçacıkları, uyumlu tarayıcılarda animasyonlu SVG görüntüleri oluşturmak için üç tekniği gösterir. İlgili kısımlar sarı renkle vurgulanmıştır. Animasyonlu versiyonlarını görmek için resimlerin küçük resimlerine tıklayın.

SMIL kullanarak SVG animasyonu

SMIL.svg kullanarak SVG animasyonu
Bu resim hakkında
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="100%" viewBox="-4 -4 8 8">
 <title>SVG animation using SMIL</title>
 <circle cx="0" cy="1" r="2" stroke="red" fill="none">
  <animateTransform
   attributeName="transform"
   attributeType="XML"
   type="rotate"
   from="0"
   to="360"
   begin="0s"
   dur="1s"
   repeatCount="indefinite"/>
 </circle>
</svg>

CSS kullanarak SVG animasyonu

CSS.svg kullanarak SVG animasyonu
Bu resim hakkında
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="100%" viewBox="-4 -4 8 8">
 <title>SVG animation using CSS</title>
 <style type="text/css">
  @keyframes rot_kf {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  .rot { animation: rot_kf 1s linear infinite; }
 </style>
 <circle class="rot" 
  cx="0" cy="1" r="2" stroke="blue" fill="none"/>
</svg>

ECMAScript kullanarak SVG animasyonu

Ampel.svg
Bu resim hakkında
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-4 -4 8 8" 
 onload="rotate(evt)">
 <title>SVG animation using ECMAScript</title>
 <script type="text/ecmascript">
  function rotate(evt) {
   var object = evt.target.ownerDocument.getElementById('rot');
   setInterval(function () {
     var now          = new Date();
     var milliseconds = now.getTime() % 1000;
     var degrees      = milliseconds * 0.36; // 360 degrees in 1000 ms
     object.setAttribute('transform', 'rotate(' + degrees + ')');
    }, 20);
  }
 </script>
 <circle id="rot" 
  cx="0" cy="1" r="2" stroke="green" fill="none"/>
</svg>

Yukarıdaki örnek işe yarasa da, optimal uygulama değildir; animasyon saniyede 50 kare (FPS) ile sınırlıdır. Kullanmak requestAnimationFramedaha iyi performans sağlar ve 60 FPS'ye ulaşabilir:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-4 -4 8 8" 
 onload="init()">
  <title>SVG animation using requestAnimationFrame()</title>
  <script>
    var object;
   
    function init() {
      object = document.getElementById('rot');     
      window.requestAnimationFrame(rotate);
    }
   
    function rotate(timestamp) {
      var milliseconds = timestamp % 1000;
      var degrees      = milliseconds * 0.36; // 360 degrees in 1000 ms
      object.setAttribute('transform', 'rotate(' + degrees + ')');
      window.requestAnimationFrame(rotate);
    }
  </script>
  <circle id="rot" cx="0" cy="1" r="2" stroke="green" fill="none"/>
</svg>

Hedef niteliği tanımlamak için SMIL nitelikleri

Aşağıdakiler, değeri zamanla değişen belirli hedef öğe için hedef niteliği tanımlayan animasyon niteliğidir. attributeName = "<attributeName>"hedef özniteliğin adını belirtir. Öznitelik için XML ad alanını belirtmek için bir XMLNS öneki kullanılabilir . Önek, geçerli animasyon öğesinin kapsamında yorumlanacaktır.

attributeType = "CSS | XML | auto"hedef özniteliğin ve ilişkili değerlerin tanımlandığı ad alanını belirtir. CSS'attributeName' değerinin, bu belirtimde canlandırılabilir olarak tanımlanan bir CSS özelliğinin adı olduğunu belirtir. XML'attributeName' değerinin, hedef öğe için varsayılan XML ad alanında tanımlanan bir XML özniteliğinin adı olduğunu belirtir. Öznitelik, bu belirtimde canlandırılabilir olarak tanımlanmalıdır. auto Varsayılan değer 'otomatik'tir. Uygulama, 'öznitelik Adı' ile hedef öğenin bir özniteliği ile eşleşmelidir. Uygulama önce eşleşen bir özellik adı için CSS özellikleri listesinde arama yapmalı ve hiçbiri bulunamazsa öğe için varsayılan XML ad alanını aramalıdır.

  • Dönüşüm (ölçek) ve CSS niteliklerindeki (opaklık ve çizgi ofseti) değişikliği gösteren SMIL animasyonu

  • Bir yol boyunca hareketi gösteren SMIL animasyonu ve 3D simülasyonu

  • Şekillerin (yolların) biçim değiştirmesini gösteren SMIL animasyonu

  • Dönüşümdeki değişiklikleri (döndürme, ölçekleme ve çevirme) ve 3D simülasyonunu gösteren CSS3 animasyonu

MediaWiki wiki yazılımı otomatik SVG görüntüleri statik olmayan animasyonlu küçük resimler üretir. Her ilgili açıklama sayfasından gerçek .svg görüntüsünün görüntülenmesi, animasyonunu uyumlu bir tarayıcıda gösterecektir.

Kütüphaneler

SVG animasyonuyla çalışmak için birkaç JavaScript kitaplığı vardır. Bu tür kitaplıkların kullanımının bir avantajı, bu kitaplıkların genellikle tarayıcılardaki uyumsuzluk sorunlarını soyutlama yoluyla çözmesidir . Kitaplık örnekleri arasında Raphaël ve Velocity.js yer alır.

Ayrıca bakınız

Referanslar

Dış bağlantılar