Vue.js ile Etkileşimli Bir İnfografik Oluşturma

Bu makale, etkileşimli bir infografik oluşturmaya yönelik modern bir yaklaşım sunar. Herhangi bir kullanıcı etkileşimi olmadan, önceden sunulan tüm bilgileri içeren sade bir infografik elde edebilirsiniz. Ancak etkileşimli bir deneyim oluşturmayı düşünmek, seçtiğimiz teknoloji ortamını değiştirir. Bu nedenle, önce neden Vue.js'yi anlayalım? Ve GSAP (GreenSock Animasyon Platformu) ve SVG'nin (Ölçeklenebilir Vektör Grafikleri) neden bariz seçenekler haline geldiğini göreceksiniz.

Vue.js, DOM öğelerini güçlü yollarla değiştirebileceğiniz ve yönetebileceğiniz bileşen tabanlı, dinamik kullanıcı arabirimleri oluşturmak için pratik yollar sağlar. Bu durumda, SVG olacak. Vue.js'de bulunan özelliklerin yalnızca küçük bir alt kümesini kullanarak farklı SVG öğelerini dinamik olarak kolayca güncelleyebilir ve yönetebilirsiniz. az. Bu ayrıca ilgili SVG öğelerini birlikte gruplandırmanıza ve bunları bileşenleştirmenize olanak tanır.

Vue.js, görkemini kaybetmeden harici kitaplıklarla iyi çalışır, yani burada GSAP. Vue.js kullanmanın başka birçok faydası vardır, bunlardan biri de Vue.js'nin her bir bileşen için ilgili şablonları, komut dosyalarını ve stilleri ayırmanıza izin vermesidir. Bu şekilde, Vue.js modüler uygulama yapısını destekler.

Önerilen okuma : jQuery'yi Vue.js ile Değiştirmek: Derleme Adımı Gerekmiyor

Vue.js ayrıca uygulama davranışını değiştirmek için uygulamanın farklı aşamalarından yararlanmanıza izin veren güçlü yaşam döngüsü kancalarıyla birlikte gelir. Vue.js uygulamalarını kurmak ve sürdürmek büyük bir taahhüt gerektirmez, yani projenizi ilerledikçe ölçeklendirmek için aşamalı bir yaklaşım benimseyebilirsiniz.

İnfografik görsel anlamda çok hafiftir, çünkü bu makalenin temel amacı veriler, görsel öğeler ve tabii ki Vue.js - tüm etkileşimi mümkün kılan çerçeve açısından nasıl düşünüleceğini öğrenmektir. Ek olarak, SVG öğelerini canlandırmak için bir kitaplık olan GreenSock'u kullanacağız. Dalmadan önce, demoya bir göz atın.

Şununla başlayacağız:

1. İnfografik için verilere genel bakış;
2. SVG görüntü hazırlama;
3. SVG resmi bağlamında Vue bileşenlerine genel bakış;
4. Anahtar etkileşimin kod örnekleri ve diyagramları.

Oluşturacağımız infografik, Fransa'da düzenlenen yıllık bisiklet yarışı etkinliği olan Tour De France ile ilgili.

Tour De France Verilerine Genel Bakış

İnfografik tasarımında veriler, infografik tasarımınızı yönlendirir. Bu nedenle, infografik tasarımınızı planlarken, verilen konu için tüm verilerin, bilgilerin ve istatistiklerin mevcut olması her zaman iyi bir fikirdir.

2017 yılının Tour De France sırasında, Temmuz ayındaki 21 günlük oyunda bulabildiğim bu en büyük bisiklet etkinliği hakkında her şeyi öğrendim ve konuya aşina oldum.

Tasarımımda gitmeye karar verdiğim yarışın temel varlıkları,

• Aşamalar,
• takımlar,
• Rotalar,
• kazananlar,
• Her rotanın uzunluğu ve sınıflandırmaları.

Sürecin bundan sonraki kısmı sizin düşünme tarzınıza bağlıdır, yani burada yaratıcı olabilirsiniz.

Biri aşamalar için diğeri ekipler için olmak üzere iki veri seti oluşturdum. Bu iki veri kümesi, her birinde birden fazla konuşmacı bulunan bisikletin iki tekerleğiyle eşleşen birden fazla veri satırına (ancak within limit ) sahiptir. Ve bu, tasarımın temel öğesini tanımladı, başlangıçta gördüğünüz The Bicycle Art - burada her bir konuşmacı etkileşimli ve ekranda hangi bilgilerin ortaya çıktığını yönlendirmekten sorumlu olacak.

Yukarıda within limits bahsettim, çünkü bu örnekte hedeflediğimiz şey, büyük veri bağlamında tam bir veri görselleştirme değil, daha çok yüksek seviyeli veri içeren bir infografik.

Bu nedenle, verilerle kaliteli zaman geçirin ve görsel bir hikaye aktarmanıza yardımcı olabilecek benzerlikler, farklılıklar, hiyerarşi veya trendler arayın. Bu sırada bilgi (veri), etkileşim (Vue.js) ve tasarım öğeleri (SVG Artwork) arasında doğru dengeyi kurmanıza yardımcı olacağından, SVG ve Vue.js'nin harika kombinasyonunu da unutmayın. ) infografik.

İşte bir aşama veri nesnesinin pasajı:

 { "ID": 1, "NAME": "STAGE 01", "DISTANCE": "14", "ROUTE": "KMDUSSELDORF / DUSSELDORF", "WINNER": "THOMAS G.",
    "UCI_CODE": "SKY",
    "TYPE": "Individual Time Trial",
    "DATE": "Saturday July 1st",
    "KEY_MOMENT": " Geraint Thomas takes his first win at 32"
}

Ve aşağıdaki gibi ekip veri nesnesi parçacığı:

 { "ID": 1,
    "UCI_CODE": "SKY",
    "NAME": " TEAM SKY",
    "COUNTRY": "Great Britain",
    "STAGE_VICTORIES": 1,
    "RIDERS": 8
}

Bu infografik çok basit bir mantıkla işletilmektedir.

UCI_CODE (Union Cycliste Internationale), sahne ile takım nesnesi arasındaki bağlantı anahtarıdır. Bir aşamaya tıklandığında, önce o aşamayı etkinleştireceğiz, ancak ilgili kazanan takımı etkinleştirmek için UCI_CODE anahtarını da kullanacağız.

SVG Hazırlığı

Birkaç veri setine ve kaba bir bisiklet sanatı konseptine sahip olmak, işte oluşturduğum infografikin statik SVG CodePen'i.

Her tekerlek için yalnızca bir jant teli oluşturduk, bunun nedeni, veri kümesinde bulunan bir dizi kaydı kullanarak tellerin geri kalanını dinamik olarak oluşturacağımız ve GreenSock Kitaplığı kullanarak onları canlandıracağımızdır.

Bu SVG kodunu oluşturmak için iş akışı da çok basittir. Infographic resminizi Adobe Illustrator'da oluşturun ve SVG olarak kaydedin. Illustrator'da çalışırken her group ve layer adlandırdığınızdan emin olun, çünkü sonunda Vue bileşenlerinin <template> alanını dolduracak SVG kodunun bölümlerini ayırmak için bu kimliklere ihtiyacınız olacaktır. Illustrator'da verilen katman adlarının SVG işaretlemesinde element ids olduğunu unutmayın.

Ayrıca SVGOMG'yi kullanabilir ve Adobe Illustrator'dan dışa aktarılan SVG kodunu daha da optimize edebilirsiniz.

Önemli Not: SVG işaretlemesini optimize etmek için SVGOMG kullanırsanız, kodunuz kesinlikle düzgün görünecektir, ancak tüm <rect> öğelerini d özniteliği ile <path> öğesine dönüştüreceğini unutmayın. Bu, daha sonra birkaç pikseli manuel olarak ayarlamak istemeniz durumunda, dikdörtgenin x ve y değerlerinin kaybolmasına neden olur.

İkinci olarak, Clean Id seçeneğinin (SVGOMG arayüzünde sağ taraftaki seçenekler) işaretini kaldırdığınızdan emin olun, bu, Illustrator'da oluşturulan tüm grupların ve kimliklerin bozulmadan korunmasına yardımcı olacaktır.

Vue Bileşenine Genel Bakış

İnfografik projenizdeki etkileşim ve veri akışı doğası gereği oldukça basit olsa bile, bileşenlerin ağaç diyagramını çizmek için her zaman biraz zaman ayırmalısınız.

Bu, özellikle, alt bileşenlerin ana bileşenden gönderilen değerlere bağlı olduğu (yani aksesuarlar aracılığıyla) veya tam tersi (yani, this.$emit olayları) herhangi bir paylaşılan veri mekanizması kullanmıyorsanız yardımcı olacaktır. Bu, bu destek değerleri üzerinde beyin fırtınası yapma, olayları ve yerel verileri yayma ve kodu yazmaya başlamadan önce bunları belgeleme şansınızdır.

Yukarıdaki şema, kısmen etkileşim gereksinimlerinden türetilen ve kısmen SVG işaretlemesine dayanan Vue bileşenlerinin anlık görüntüsüdür. Bu ağaç yapısına göre SVG işaretlemesinin nasıl bölüneceğini görebilmeniz gerekir. Hiyerarşi açısından oldukça açıklayıcı.

1. Zincir çarkı, konuşmacıların dönüşünü taklit edecektir.
2. Sahne bileşeni, 21 aşamanın tümünü listeleyecek olan arka tekerlektir.
3. Aşama ayrıntısı bileşeni, ilgili bilgileri eğri bir yolda (sol taraf) görüntüler.
4. Takım bileşeni, tüm katılan takımları konuşmacılarda listeleyen ön tekerlektir.
5. Takım detayı bileşeni, ilgili bilgileri eğri bir yolda (sağ taraf) gösterecektir.
6. Navigasyon, aşamalara erişmek için geri ve ileri butonlarını içerecektir.

Aşağıdaki şema, yukarıda görülenle aynı Vue bileşenlerini temsil eder, ancak infografik tasarım bağlamında.

Az daha çoktur — benzer projeler üzerinde çalışırken izlemeniz gereken yaklaşım bu olmalıdır. TweenMax yerine TweenLite kullanmaktan kurtulabiliyorsanız, sahip olduğunuz animasyon ve geçiş gereksinimlerini düşünün - bunu yapın. Karmaşık şekiller yerine temel şekilleri ve daha basit yolları seçme seçeneğiniz varsa - elbette, herhangi bir performans cezası olmadan, canlandırması kolay hafif öğeleri seçmeye çalışın.

Sonraki bölüm sizi GreenSock animasyonu ve Vue.js ile heyecan verici bir bölüme götürecek.

GreenSock Animasyon

Daha yakından bakalım:

1. Eğri bir yolda metin animasyonu;
2. Bir tekerlek üzerinde animasyon konuştu.

Bisiklet tekerleğinin çevresinde görülen eğri yolunu hatırlayın, bu eğri yol bisiklet tekerleğinin yarıçapından biraz daha büyüktür. Bu nedenle, bu yol üzerinde metne animasyon uyguladığımızda, tekerleğin şeklini takip ediyormuş gibi görünecektir.

path ve textPath , xlink:href özniteliğini kullanarak herhangi bir yolda metin ayarlamanıza izin veren SVG öğelerinin tatlı bir birleşimidir.

 <pathlanguage-javascript">curvedPath " stroke="none" fill="none" d="..."/>

<text>
  <textPath xlink:href=" #curvedPath "
          class="stageDetail"
          startOffset="0%">
          {{ stage.KEY_MOMENT }}
   </textPath>
</text>

Metni yol boyunca canlandırmak için GreenSock kullanarak startOffset niteliğini canlandıracağız.

 tl.fromTo( ".stageDetail", 1, { opacity: 0,
  attr: { startOffset: "0%" }
},
{

  opacity: 1,
  attr: { startOffset: "10%" }

}, 0.5 );

startOffset yüzdesini artırdıkça, metin daire çevresinde daha da ilerleyecektir.

Son projemizde, bu animasyon, herhangi bir konuşmacıya her tıklandığında tetiklenir. Şimdi, animasyonun daha heyecan verici bir bölümüne geçelim.

Tekerleğin İçindeki Sahneleri/Dilekleri Canlandırma

stage ve team bileşenlerinin doğaları gereği birkaç küçük farkla benzer olduğu demodan görülebilir. Öyleyse, bisikletin sadece bir tekerleğine odaklanalım.

Aşağıdaki CodePen örneği, yalnızca üç temel fikri yakınlaştırır:

1. Aşama verilerini getir;
2. Verilere dayalı olarak konuşmacıları dinamik olarak düzenleyin;
3. Sahne (konuştu) tıklandığında konuşmacıları yeniden düzenleyin.

Yukarıdaki statik SVG CodePen'de, konuşmacıların birlikte gruplandırılmış SVG dikdörtgenleri ve metinden başka bir şey olmadığını fark etmiş olabilirsiniz. Animasyon amacıyla hem metin hem de dikdörtgen seçmek istediğim için bunları gruplandırdım.

 <g v-for="stage in stages" class="stage">

    <rect x="249" y="250" width="215" height="1" stroke="#3F51B5" stroke-width="1"/>

    <text transform="translate(410 245)" fill="#3F51B5" >
      {{ stage.NAME }}
    </text>

</g>

Veri kaynağından alınan değerleri kullanarak bunları Vue bileşeninin <template> alanında oluşturacağız.

21 aşamanın tümü ekranda mevcut olduğunda, başlangıç ​​konumlarını, diyelim ki setSpokes() çağırarak ayarlayacağız.

 // setSpokes() let stageSpokes = document.querySelectorAll(".stage") let stageAngle = 360/this.stages.length _.map(stageSpokes, (item, index) => { TweenMax.to(item, 2, { rotation: stageAngle*index, transformOrigin: "0% 100%" }, 1) }

Sahneyi kurmanın üç temel unsuru şunlardır:

1. döndürme
   Telleri döndürmek için, className stage ile tüm öğeleri basitçe eşleştireceğiz ve her jant teli için hesaplanan dinamik rotation değerini ayarlayacağız.
2. Kökeni Dönüştür
   Yukarıdaki kodda, index değeri kadar önemli olan transformOrigin değerine dikkat edin, çünkü “0% 100%” her bir jant telinin tekerleğin merkezinden dönmesini sağlar.
3. sahne açısı
   Bu, 360 dereceye bölünmüş toplam aşama sayısı kullanılarak hesaplanır. Bu, her konuşmacıyı 360 derecelik bir daire içinde eşit şekilde yerleştirmemize yardımcı olacaktır.

ETKİLEŞİM EKLEME

Sonraki adım, etkileşimli ve veri değişikliklerine tepkisel hale getirmek için her aşamaya tıklama olayı eklemek olacaktır - bu nedenle, bir SVG görüntüsüne daha fazla hayat verecektir!

Stage/spoke tıklandığında, stageId parametresini kullanarak tıklanan sahne alanını etkinleştirmek ve döndürmekten sorumlu olan goAnimate() çalıştırdığını varsayalım.

 goAnimate (stageId) { // activate stage id this.activeId = stageId // rotate spokes }

Bu etkileşim için önemli bir bileşen olan DirectionalRotationPlugin…'i kullanacağız. Ve evet, TweenMax'a dahildir.

Bu eklentiyi kullanmanın üç farklı yolu vardır. Hedefe hesaplanan en kısa mesafede 1) saat yönünde, 2) saat yönünün tersinde ve 3) döndürme özelliğini canlandırır.

Şimdiye kadar tahmin ettiğiniz gibi, mevcut etap ile yeni etap arasındaki en kısa mesafeyi döndürmek için üçüncü seçeneği kullanıyoruz.

Yukarıdaki CodePen'i gözden geçirin ve Stage 01'in sürekli olarak daire etrafında nasıl hareket ettiğini ve orijinal noktasını yeni aktif sahne için 0 derecelik açıyla bıraktığını göreceksiniz.

İlk olarak, tıklanan bir sahnenin açısını bulmalı ve dönüşünü Stage 01 ile değiştirmeliyiz. Peki tıklanan sahnenin dönüş değerini nasıl bulacağız? Aşağıdaki diyagramı inceleyin.

Örneğin, Aşama 05 tıklanırsa (yukarıda görebileceğiniz gibi), Aşama 01'den Aşama 05'e yolculuk 4 x açı değeri gerektirir.

Ve bu nedenle, (Active stage Id - 1) * 17 degree, ardından yönlü döndürme eklentisini tetiklemek için '_short' string postfix kullanarak doğru açıyı elde edebiliriz.

 angle = 360/21 stages = 17 activeId = 5
new angle = ( (activeId-1) *angle)+'_short'
          = ((5-1)\*17)+'_short'
          = 68

Son goAnimate() işlevi aşağıdaki gibi görünecektir:

 _.map(spokes, (item, index) => { if(activeId == index+1) { // active stage TweenMax.to(item, 2, { rotation: 0+'_short', transformOrigin: "0 100%" }) } else if (index == 0) { // first stage TweenMax.to(item, 2,
    { rotation: (activeId*angle)-angle+'_short',
      transformOrigin: "0 100%"
    })

  } else {
    TweenMax.to(item, 2, 
    { rotation: index*angle+'_short', 
      transformOrigin: "0 100%"
    })
  }

}) // end of map

Arka tekerleği hazır hale getirdiğimizde, ön tekerlek (ekip için) birkaç ince ayar ile aynı mantığı izlemelidir.

Sahne alanı yerine ekip verilerini getireceğiz ve sahne tekerleğinden farklı kayıt noktasından konuşmacı oluşturmayı etkinleştirmek için transformOrigin özniteliğinin kayıt noktasını güncelleyeceğiz.

 // set team spokes map(teamSpokes, (index, key) => { TweenMax.to(index, 2, { rotation: angle*key, transformOrigin: "100% 100%" }, 1) })

Bitirme projesi

Benim gibi, Vue bileşenlerinin kendisinde tüm animasyon ve verilerle ilgili işlevleri yazdıysanız. Vuex ve Mixins kullanarak onları temizlemenin zamanı geldi.

VUEX

Vuex, bileşenler arasında paylaşılan verilerin yönetimini kolaylaştırır ve daha da önemlisi, methods ve data() 'yı temiz ve düzenli tutarak kodunuzu düzene sokar, bileşenleri işlemek için değil, yalnızca verileri işlemek için bırakır.

Yaşam döngüsü kancaları, herhangi bir HTTP isteğini gerçekleştirmek için çok uygun bir yerdir. Vue uygulaması başlatıldığında, ancak henüz DOM'ye bağlanmadığında, created kancadaki ilk verileri alırız.

Boş durum değişkenleri, stages ve teams bu aşamada mutasyonlar kullanılarak güncellenir. Ardından, bu iki değişkeni takip etmek için izleyiciyi (sadece bir kez) kullanırız ve bunlar güncellenir güncellenmez animasyon komut dosyasını çağırırız ( mixin.js ).

Kullanıcı, sahne veya ekip bileşeniyle her etkileşimde bulunduğunda, Vuex deposuyla iletişim kurar, setActiveData yürütür ve mevcut aşamayı ve mevcut ekip değerlerini günceller. Aktif verileri bu şekilde ayarlıyoruz.

Durum güncellemesinden sonra etkin veriler ayarlandığında, goAnimate , güncellenmiş değerleri kullanarak parmak uçlarını canlandırmak (yön döndürme) için devreye girer.

Önerilen okuma : Vue.js ile Özel Girişler Oluşturma

karışımlar

Artık veriler Vuex tarafından işlendiğine göre, GreenSock animasyonlarını ayıracağız. Bu, Vue bileşenlerimizin uzun animasyon komut dosyalarıyla karışmasını önleyecektir. Tüm GreenSock işlevleri, mixin.js dosyasında birlikte gruplandırılmıştır.

Mixins içinde Vuex Store'a erişiminiz olduğundan, tüm GSAP işlevleri, SVG öğelerini canlandırmak için state değişkenlerini kullanır. Buradaki CodeSandbox örneğinde tamamen işlevsel store.js ve mixin.js görebilirsiniz.

Çözüm

Etkileşimli ve ilgi çekici infografikler oluşturmak, verilerle analitik, görsellerle yaratıcı ve kullandığınız teknoloji ile verimli olmanızı gerektirir, bu durumda Vue.js. Bu kavramları projenizde daha fazla kullanabilirsiniz. Kapanış notu olarak, sizi bu makalede tartıştığımıza benzer bir fikir kullanan bu dairesel etkileşimli renk çarkıyla baş başa bırakacağım.

Şüphesiz, Vue.js'nin birçok harika özelliği vardır; izleyiciler, hesaplanmış özellikler, karışımlar, yönerge (renk çarkı örneğine bakın) ve diğer birkaç yöntem gibi yalnızca birkaç şeyle etkileşimli bilgi grafikleri oluşturabiliyoruz. Vue.js, hem SVG hem de GreenSock animasyonunu verimli bir şekilde bir arada tutan ve aynı anda istediğiniz sayıda konu ve özel etkileşimle yaratıcı olmanız için bolca fırsat sunan bir yapıştırıcıdır.