Site icon TeknoDestek

CSS ve JavaScript kullanarak bir SVG Animasyonu oluşturun

Pınar Güldökmez
SVG Animasyonu

SVG veya Ölçeklenebilir Vektör Grafikleri, vektör grafik bilgilerini hafif bir biçimde sağlamak için bir XML uygulamasıdır. PNG ve JPEG gibi diğer rasterleştirilmiş görüntü formatlarından farklı olarak SVG, görüntü kalitesinde kayıp olmadan ölçeklenebilir.

Bir SVG grafiği oluşturmak, Adobe Illustrator ve diğer grafik düzenleme yazılımları kullanılarak veya öğeler, şekiller veya yollar oluşturmak için XML/SVG DOM etiketleri ve ayarları kullanılarak manuel olarak tasarlanabilir.

Bunlar XML grafikleri olmasına rağmen, üzerlerine CSS, JavaScript ve SMIL (Senkronize Multimedya Entegrasyon Dili) gibi birçok farklı şekilde uygulanabilen bazı animasyonlar koymak mümkündür.

Bugünkü eğitimde, size simgeler, metin ve vektör grafikleri kullanarak CSS ve JavaScript kullanarak SVG’yi nasıl canlandırabileceğinizi göstereceğim.

Adobe Illustrator Dosyalarını SVG’ye Dışa Aktarma

Bir görüntüyü SVG formatına aktarmanın en iyi yollarından biri Adobe Illustrator kullanmaktır. Bu eğitimde kullanacağımız son SVG simgelerini, metnini ve illüstratörü zaten oluşturdum.

Adobe Illustrator dosyalarınızı SVG’ye aktarmak için Dosya -> Farklı Kaydet’e gidin ve ardından dışa aktarmak istediğiniz SVG formatının istediğiniz adını girin. Bu örnekte “ plant ” kullanacağım ve tür formatı için SVG’yi seçeceğim.

Ardından, SVG seçenek penceresi görünecektir; profiller altında SVG 1.1 sürümünün seçildiğinden ve ardından resimler konumunda bağlantı radyo düğmesinin seçili olduğundan emin olun. CSS özellikleri için Stil Öğeleri öğesini seçin. SVG kodlarını kontrol etmek isterseniz, alt kısımdaki “ SVG Kodunu Göster ” butonuna tıklamanız yeterlidir. Dışa aktarma işlemini bitirmek için “ Tamam ” düğmesine tıklamanız yeterlidir.

SVG’yi HTML’de kullanma

Yukarıda belirtildiği gibi SVG, XML tabanlı bir dosyadır ve bazı tarayıcılar, HTML’ye bir SVG görüntüsü eklemenize izin verir. SVG’yi HTML belgelerine dahil etmenin farklı yolları vardır.

1. HTML belgenize SVG XML kodlarının tamamını ekleyerek

Bu, HTML belgelerine SVG görüntüleri eklemenin en hızlı yoludur. SVG XML kodlarını kopyalayıp <svg> etiketi içine yapıştırın. Eklemek istediğiniz birden fazla SVG resminiz varsa, özellikle yeni başlıyorsanız, bu biraz kafa karıştırıcı olabilir. Aşağıdaki örneğe bakın:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" class="icon">
<style type="text/css">
.st0 {
    fill:none;
    stroke:#F2F2F2;
    stroke-width:4;
    stroke-miterlimit:10;
}
.icon .st0 {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
}
.icon .fill {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
    fill: #ffffff;
}
.icon:hover {
    cursor: pointer;
}
.icon:hover .st0 {
    stroke: #1f8a4c;
}
.icon:hover .fill {
    -webkit-transform: scale(893, 893);
    -moz-transform: scale(893, 893);
    transform: scale(893, 893);
}
</style>
    <g id="fill" transform="translate(101,99)">
        <circle class="fill" r="0.1" />
    </g>
    <g id="container">
        <circle class="st0" cx="101" cy="99" r="89.333" />
    </g>
    <g id="icon-details">
        <path class="st0" d="M146.899,134.202c3.856,4.702,2.772,11.963-2.418,16.218l0,0c-5.192,4.258-12.523,3.896-16.38-0.806
        l-30.004-36.594c-3.855-4.701-2.772-11.964,2.418-16.22l0,0c5.19-4.256,12.523-3.895,16.377,0.808L146.899,134.202z" />
        <circle class="st0" cx="77.843" cy="72.434" r="33.331" />
        <circle class="st0" cx="77.844" cy="72.434" r="22.343" />
    </g>
</svg>

2. Bir resim etiketi kullanarak

SVG’yi HTML belgelerinize dahil etmenin başka bir yolu da src niteliği aracılığıyla <img> etiketini kullanmaktır. Bu, HTML etiketinize normal görüntü biçimini içe aktarma işlemiyle aynıdır. Ancak bazen çalışmıyor ve CSS ile manipüle etmek zor. Aşağıdaki örneği inceleyin:

1
&amp;lt;img src=&amp;quot;images/text-svg.svg&amp;quot; alt=&amp;quot;text svg&amp;quot;&amp;gt;

3. Nesne etiketini kullanarak

SVG görüntülerini içe aktarmanın tercih edilen yolu budur. Kullanımı <object> ile birlikte etiketi <embed>, farklı tarayıcılarda bir vektör formatında görüntü vermektedir. Bu öğreticinin geri kalanında, SVG’lerimizi HTML belgelerine dahil etmek için bu yöntemi kullanacaktık. Aşağıdaki örneğe bakın.

1
2
3
<object>
    <embed src="images/text-svg.svg">
</object>

Not: CSS ve JavaScript, satır içi ve dahili stil özellikleri aracılığıyla SVG animasyonu için kullanılabilse de, özellikle IE9 veya daha düşük sürümlerde tüm tarayıcılarda desteklendiğini garanti etmez.

SVG Simgesi Vurgulu Animasyon

Eğitimin bu kısmı için birlikte çalışacağımız üç SVG düz simgesi oluşturdum. Yapmamız gereken ilk şey, bunları HTML belgemizin <embed> etiketine eklemek ve ardından bir <object>  etiketine sarmak.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
<li>
        <object>
            <embed src="images/icon-magnifying-glass.svg">
        </object>
</li>
<li>
        <object>
            <embed src="images/icon-list.svg">
        </object>
</li>
<li>
        <object>
            <embed src="images/icon-envelope.svg">
        </object>
</li>
</ul>

Şimdi SVG’nin fareyle üzerine gelme efektlerini değiştireceğimiz CSS’nin zamanı geldi. Bunu yapmak için, dahili CSS aracılığıyla her SVG görüntü sınıfına CSS uygulayacağız.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.st0 {
    fill:none;
    stroke:#F2F2F2;
    stroke-width:4;
    stroke-miterlimit:10;
}
.icon .st0 {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
}
.icon .fill {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
    fill: #ffffff;
}
.icon:hover {
    cursor: pointer;
}
.icon:hover .st0 {
    stroke: #1f8a4c;
}
.icon:hover .fill {
    -webkit-transform: scale(893, 893);
    -moz-transform: scale(893, 893);
    transform: scale(893, 893);
}

Bu SVG simgeleri dışa aktarıldığında Adobe Illustrator tarafından sağlanan varsayılan SVG sınıfını kullanarak, düzgün bir dolgu efekti oluşturmak için CSS3 geçiş özelliği ekleyeceğiz. Dolgu özelliği ile aynıdır içinde background-color ederken CSS inme özelliği aynıdır sınır renkli. Bir açılır vurgulu efekti oluşturmak için CSS3 dönüştürme ölçeğini kullanacağız ve dolgunun davranışını değiştireceğiz.

SVG Metin Animasyonu

Bakacağımız bir sonraki SVG animasyonu, SVG metni çizmekle ilgili. Text.svg dosya kelimeler “içerir SVG METİN bir kutu içinde”. Yani temelde burada elde etmeye çalıştığımız şey, kenarlığı tire şeklinde döndürmek ve ardından metni çizmeden önce bir animasyon gecikmesi eklemek.

SVG dosyamızı HTML belgemize eklemek için hala <object> ve   <embed> etiketlerini kullanıyoruz.

1
2
3
<object>
  <embed src="images/text-svg.svg">
</object>

CSS’imiz için, düzgün bir çizgi çizme efekti oluşturmak için vuruş-dasharray ve vuruş-dashoffset kullanacağız. Stroke-dasharray özniteliği, temel olarak tire akışını ayarlar ve kontur yolları için kullanılırken, kontur-dashoffset tireler arasındaki mesafeyi belirler.

Bu efekti elde etmek için CSS3 @keyframes’i kullanacağız ve ardından metin svg’sinin asıl sınıfı olan st1 sınıfı için animasyon gecikmesini ayarlayacağız.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.st0 {
    font-family:'Lato-Light'
}
.st1 {
    font-size:181.2018px
}
.st2 {
    display:none
}
.st3 {
    fill:none;
    stroke:#FFF;
    stroke-width:3;
    stroke-miterlimit:10
}
.st0 {
    stroke-dasharray:800;
    stroke-dashoffset:0;
    -webkit-animation:dash 2s linear forwards;
    -moz-animation:dash 2s linear forwards;
    animation:dash 2s linear forwards;
    opacity:0
}
@-webkit-keyframes dash {
from {
    stroke-dashoffset:800;
}
to {
    stroke-dashoffset:1;
    opacity:1;
}
}
@-moz-keyframes dash {
from {
    stroke-dashoffset:800;
}
to {
    stroke-dashoffset:1;
    opacity:1;
}
}
@keyframes dash {
from {
    stroke-dashoffset:800;
}
to {
    stroke-dashoffset:1;
    opacity:1;
}
}
.st1 {
    stroke-dasharray:800;
    stroke-dashoffset:0;
    -webkit-animation:dash 2s linear forwards;
    -moz-animation:dash 2s linear forwards;
    animation:dash 2s linear forwards;
    -webkit-animation-delay:1.6s;
    -moz-animation-delay:1.6s;
     animation-delay:1.6s;
}
#container {
    stroke-dasharray:50;
    stroke-dashoffset:0;
    -webkit-animation:dash 1.5s linear forwards;
    -moz-animation:dash 1.5s linear forwards;
    animation:dash 1.5s linear forwards;
}

CSS ve JavaScript ile SVG Vektör Animasyonu

Bu öğreticinin son kısmı için iki vektör öğesi oluşturdum. Birincisi bir vazo, ikincisi ise bir bitki görüntüsüdür. Amaç, fareyi vazonun üzerine getirdiğimizde bitkinin temel elemanın üstünde büyümesi için bir animasyon elde etmektir.

<object> etiketini kullanarak burada iki öğemiz olacak: vase.svg ve plant.svg. Aşağıda, SVG’mizin yolunu belirtmek için src yerine data niteliğini kullandığımı fark edeceksiniz. Bu data özelliği, daha sonra istediğimiz efekti elde etmek için JavaScript kodlarımız tarafından kullanılacaktır.

Ayrıca her şeyi bir id kapsayıcısına saracağız ve ardından plant.svg’ye plantobj id ve vase.svg için vaseobj id vereceğiz.

1
2
3
4
5
6
<div id="container" style="margin: 0px auto; display: block; width: 300px; height: 350px">
<object data="images/plant.svg" id="plantobj" type="image/svg+xml">
</object>
<object data="images/vase.svg" id="vaseobj" type="image/svg+xml">
</object>
</div>

Şimdi CSS’miz için, id kapsayıcısını konumlandırmak ve göreceli olarak ayarlamamız ve ona belirli bir yükseklik ve genişlik vermemiz gerekiyor.

1
2
3
4
5
6
7
#container {
      position: relative;
      margin: 0px auto;
      display: block;
      width: 300px;
      height: 350px
    }

Sonra, en hem stilleri ekleyelim vaseobj ve plantobj. Temel olarak, buraya ekleyeceğimiz stiller, öğelerimizin ayarlandığı konumdur. Ardından, bitki elemanımızda, ölçeğin bir CSS3 dönüşümü özelliği ayarlayacağız ve ardından yumuşak bir efekt oluşturmak için biraz geçiş ekleyeceğiz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#vaseobj {
      position: absolute;
      bottom: 20px;
      left: 70px;
    }
    #plantobj {
      position: absolute;
      bottom: 127px;
      left: 130px;
      -moz-transform: scale(0, 0);
      -webkit-transform: scale(0, 0);
      transform: scale(0, 0);
      -moz-transform-origin: 20%, 100%;
      -webkit-transform-origin: 20% 100%;
      transform-origin: 20% 100%;
      -moz-transition: all 1.5s ease;
      -webkit-transition: all 1.5s ease;
      transition: all 1.5s ease;
    }

Ardından, öğeyi hem x ekseninde hem de y ekseninde yüzde 200 oranında ölçeklendirecek olan büyüme sınıfımız için CSS’yi ekleyeceğiz. Bu, daha sonra JavaScript kodlarımızda anlamlı olacaktır.

1
2
3
4
5
#plantobj.grow {
      -moz-transform: scale(2, 2);
      -webkit-transform: scale(2, 2);
      transform: scale(2, 2);
    }

Son olarak, büyüyen etkiyi yaratmak için JavaScript kullanarak vektör öğelerimize biraz sihir ekleyelim. İlk olarak, SVG belgesini yakalamak için bir fonksiyon oluşturacağız. Bu aynı zamanda bir çerçeve belgesi tarafından üretilen belge nesnesini döndürüp döndürmediğini de test edecektir, aksi takdirde değer boş olacaktır. Bu aynı zamanda vazo öğesinin üzerine geldiğimizde imleç işaretçimizi yapabilmemizi de sağlayacaktır.

1
2
3
4
5
6
7
8
9
10
11
12
function getSubDocument(embedding_element) {
  if (embedding_element.contentDocument) {
    return embedding_element.contentDocument;
  }
  else {
    var subdoc = null;
    try {
      subdoc = embedding_element.getSVGDocument();
    } catch(e) {}
    return subdoc;
  }
}

Şimdi sulu kısmı ekleyelim. window.onload olayını kullanarak id’lerimizi farklı değişkenlere atayacağız. Ardından, onmouseover ve onmouseout’u kullanarak, düzgün bir büyüme etkisi yaratmak için bitki elementine büyüme sınıfını ekleyeceğiz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.onload = function () {
  var vaseobj = document.getElementById('vaseobj');
  var vasedoc = getSubDocument(vaseobj);
  var vs = vasedoc.getElementById('vase');
  vs.style.cursor = 'pointer';
  var plantobj = document.getElementById('plantobj');
  vaseobj.onmouseover = function() {
    plantobj.className = &amp;quot;grow&amp;quot;;
  };
  vaseobj.onmouseout = function() {
    plantobj.className = &amp;quot;&amp;quot;;
  }
};

Daha Fazla İpucu

HTML belgemize bir SVG görüntüsü eklemek için <object> etiketini <embed> etiketiyle birlikte kullanabilmemize rağmen, geliştirici Alexey Ten, vektörü nasıl kullanabileceğimiz ve SVG’mizin rasterleştirilmiş sürümü için bir geri dönüş sağlayabileceğimiz konusunda bazı püf noktaları tanıttı.

İkimiz de kullanabilirsiniz <svg> etiketi kullanılarak bu araçlar href ve src aynı anda niteliğini. Aşağıdaki örneği inceleyin.

1
2
3
<svg width="300" height="300">
    <image xlink:href="images/icon-magnifying-glass.svg" src="images/icon-magnifying-glass.png" width="300" height="300"/>
</svg>

SVG için Önerilen JavaScript Kitaplığı

SVG’yi CSS ve JavaScript kullanarak canlandırabilseniz de, çevrimiçi olarak SVG’yi canlandırmanıza yardımcı olacak bazı iyi kitaplıklar vardır.

Toplama

SVG, HTML belgelerinizin daha küçük, daha hızlı ve etkileşimli olmasını sağlayacak XML grafiklerini çevrimiçi hale getirmenin en iyi yollarından biridir.

SVG görüntülerini nasıl canlandırabileceğinize ilişkin bu basit fikirlerle, SVG belgelerini canlandırmanın daha fazla yolu için Mozilla’nın SVG kılavuzuna göz atın.

Ve bu kadar! Umarım, bu eğitimde bir şeyler öğrenmişsinizdir. Tüm büyük tarayıcıların (IE’nin yanı sıra) yakın gelecekte SVG’yi destekleyeceğini umuyorum. Bu, ölçeklenebilir grafikleri çok daha iyi hale getirecektir.

Exit mobile version