Crearea unei infografice interactive cu Vue.js

Acest articol prezintă o abordare modernă a construirii unui infografic interactiv. Cu siguranță puteți avea o infografică simplă cu toate informațiile disponibile în avans - fără nicio interacțiune a utilizatorului. Dar, gândirea la construirea unei experiențe interactive - schimbă peisajul tehnologic pe care îl alegem. Prin urmare, să înțelegem mai întâi de ce Vue.js? Și veți vedea de ce GSAP (GreenSock Animation Platform) și SVG (Scalable Vector Graphics) devin alegeri evidente.

Vue.js oferă modalități practice de a construi interfețe de utilizator dinamice, bazate pe componente, unde puteți manipula și gestiona elementele DOM în moduri puternice. În acest caz, va fi SVG. Puteți actualiza și gestiona cu ușurință diferite elemente SVG - dinamic - folosind doar un mic subset de caracteristici disponibile în Vue.js - unele dintre caracteristicile de bază care se potrivesc aici, sunt legarea de date, randarea listei, legarea dinamică a clasei, pentru a numi un putini. Acest lucru vă permite, de asemenea, să grupați elementele SVG relevante și să le componentați.

Vue.js se joacă frumos cu bibliotecile externe fără a-și pierde gloria, adică GSAP aici. Există multe alte beneficii ale utilizării Vue.js, dintre care unul este că Vue.js vă permite să izolați șabloane, scripturi și stiluri asociate pentru fiecare componentă. În acest fel, Vue.js promovează structura modulară a aplicației.

Lectură recomandată : Înlocuirea jQuery cu Vue.js: nu este necesar niciun pas de construcție

Vue.js vine, de asemenea, cu cârlige puternice pentru ciclul de viață, care vă permit să accesați diferitele etape ale aplicației pentru a modifica comportamentul aplicației. Configurarea și întreținerea aplicațiilor Vue.js nu necesită un angajament mare, ceea ce înseamnă că puteți adopta o abordare treptată pentru a vă scala proiectul pe măsură ce mergeți.

Infograficul este foarte ușor în sens vizual, deoarece scopul principal al acestui articol este să înveți cum să gândești în termeni de date, elemente vizuale și, desigur, Vue.js - cadrul care face posibilă toată interactivitatea. În plus, vom folosi GreenSock, o bibliotecă pentru animarea elementelor SVG. Înainte de a ne scufunda, aruncați o privire la demo.

Vom începe cu:

1. Prezentare generală a datelor pentru infografic;
2. pregătirea imaginii SVG;
3. O prezentare generală a componentelor Vue în contextul lucrării de artă SVG;
4. Exemple de cod și diagrame ale interactivității cheie.

Infograficul pe care îl vom construi este despre Turul Franței, evenimentul anual de curse de biciclete desfășurat în Franța.

Prezentare generală a datelor Turului Franței

În designul infografic, datele conduc la designul infograficului dvs. Prin urmare, atunci când vă planificați designul infografic, este întotdeauna o idee bună să aveți toate datele, informațiile și statisticile disponibile pentru subiectul respectiv.

În timpul Turului Franței din 2017, am aflat totul despre acest cel mai mare eveniment de ciclism pe care l-am putut în 21 de zile de joc în iulie și m-am familiarizat cu subiectul.

Entitățile de bază ale cursei pe care m-am hotărât să merg în designul meu sunt:

• Etape,
• echipe,
• trasee,
• Câștigători,
• Lungimea și clasificările fiecărei rute.

Această parte următoare a procesului depinde de stilul tău de gândire, așa că poți fi creativ aici.

Am creat două seturi de date, unul pentru etape și altul pentru echipe. Aceste două seturi de date au mai multe rânduri de date (dar within limit ) - care se potriveau cu două roți ale bicicletei cu mai multe spițe în fiecare. Și asta a definit elementul cheie al designului, The Bicycle Art , pe care ați văzut-o la început - unde fiecare spiță va fi interactivă și responsabilă pentru a conduce informațiile dezvăluite pe ecran.

Am menționat within limits de mai sus, pentru că ceea ce ne propunem în acest caz nu este o vizualizare completă a datelor în contextul datelor mari, ci mai degrabă un infografic cu date la nivel înalt.

Prin urmare, petreceți timp de calitate cu date și căutați asemănări, diferențe, ierarhii sau tendințe care vă pot ajuta să transmiteți o poveste vizuală. Și nu uitați de combinația uimitoare de SVG și Vue.js în timp ce sunteți la ea, deoarece vă va ajuta să obțineți echilibrul potrivit între informații (date), interactivitate (Vue.js) și elemente de design (SVG Artwork). ) din infografic.

Iată fragmentul unui obiect de date de etapă:

 { "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"
}

Și fragment de obiect de date ale echipei, după cum urmează:

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

Acest infografic este operat după o logică foarte simplă.

UCI_CODE (Union Cycliste Internationale) este cheia de legătură între scenă și obiectul echipei. Când se face clic pe o etapă, mai întâi vom activa etapa respectivă, dar vom folosi și tasta UCI_CODE pentru a activa echipa câștigătoare corespunzătoare.

Pregătire SVG

Având câteva seturi de date și un concept brut de artă a bicicletei gata, iată SVG CodePen static al infograficului cu care am venit.

Am creat o singură spiță pentru fiecare roată, deoarece vom crea în mod dinamic restul spițelor folosind un număr de înregistrări găsite în setul de date și le vom anima folosind Biblioteca GreenSock.

Fluxul de lucru pentru a crea acest cod SVG este, de asemenea, foarte simplu. Creați-vă ilustrația infografică în Adobe Illustrator și salvați-l ca SVG. Asigurați-vă că numiți fiecare group și layer în timp ce lucrați în Illustrator, deoarece veți avea nevoie de acele id-uri pentru a separa părțile codului SVG care vor popula în cele din urmă zona <template> a componentelor Vue. Amintiți-vă că numele straturilor date în Illustrator devin coduri de element ids în marcajul SVG.

De asemenea, puteți utiliza SVGOMG și puteți optimiza în continuare codul SVG exportat din Adobe Illustrator.

Notă importantă: Dacă utilizați SVGOMG pentru a optimiza marcajul SVG, codul dvs. va arăta cu siguranță bine, dar rețineți că va converti toate elementele <rect> în <cale> cu atributul d . Acest lucru duce la pierderea valorilor x și y ale dreptunghiului, în cazul în care doriți să ajustați manual câțiva pixeli mai târziu.

În al doilea rând, asigurați-vă că debifați opțiunea Clean Id (opțiuni din partea dreaptă în interfața SVGOMG), acest lucru va ajuta la menținerea intacte a tuturor grupurilor și ID-urilor care au fost create în Illustrator.

Prezentare generală a componentelor Vue

Chiar dacă interactivitatea și fluxul de date în proiectul dvs. infografic este destul de simplă în natură, ar trebui să vă acordați întotdeauna un moment pentru a crea o diagramă arborescentă a componentelor.

Acest lucru vă va ajuta în special în cazul în care nu utilizați niciun mecanism de date partajate, în care componentele secundare depind de valorile trimise de componenta părinte (adică prin elemente de recuzită) sau invers (adică this.$emit events). Aceasta este șansa ta să faci brainstorming aceste valori de prop, să emiti evenimente și date locale - și să le documentezi înainte de a începe să scrii codul.

Diagrama de mai sus este instantaneul componentelor Vue care este parțial derivat din cerințele de interactivitate și parțial bazat pe marcajul SVG. Ar trebui să puteți vedea cum va fi împărțit marcajul SVG pe baza acestei structuri arborescente. Este destul de explicit din punct de vedere al ierarhiei.

1. Roata de lanț va imita rotirea spițelor.
2. Componenta de etapă este roata din spate care va enumera toate cele 21 de trepte.
3. Componenta de detaliu a scenei va afișa informații aferente pe o cale curbă (partea stângă).
4. Componenta echipei este roata din față care va enumera toate echipele participante pe spițe.
5. Componenta de detaliu al echipei va afișa informații aferente pe o cale curbă (partea dreaptă).
6. Navigarea va include butonul înapoi și următorul pentru a accesa etapele.

Diagrama de mai jos reprezintă aceleași componente Vue văzute mai sus, dar în contextul designului infografic.

Less is more — ar trebui să fie abordarea pe care ar trebui să încercați să o adoptați în timp ce lucrați la proiecte similare. Gândiți-vă la cerințele de animație și tranziție pe care le aveți, dacă puteți scăpa folosind TweenLite în loc de TweenMax - faceți-o. Dacă aveți opțiunea de a alege forme elementare și căi mai simple în detrimentul celor complexe, încercați prin toate mijloacele să vă înscrieți pentru elemente ușoare care sunt ușor de animat, fără nicio penalizare de performanță.

Următoarea secțiune vă va conduce printr-o parte interesantă cu animația GreenSock și Vue.js.

Animație GreenSock

Să aruncăm o privire mai atentă la:

1. Animație text pe o cale curbă;
2. Animație cu spițe pe o roată.

Amintiți-vă căile curbei văzute în jurul roții bicicletei, acea cale curbă este puțin mai mare decât raza roții bicicletei. Prin urmare, atunci când animam text pe această cale, va arăta ca și cum ar urma forma roții.

path and textPath este o combinație dulce de elemente SVG care vă permite să setați text pe orice cale folosind atributul xlink:href .

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

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

Pentru a anima textul de-a lungul căii, vom anima pur și simplu atributul startOffset folosind GreenSock.

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

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

}, 0.5 );

Pe măsură ce creșteți procentajul startOffset , textul va călători mai departe prin perimetrul cercului.

În proiectul nostru final, această animație este declanșată de fiecare dată când se face clic pe orice spiță. Acum, să trecem la o parte mai interesantă a animației.

Animarea scenelor/spițelor din interiorul roții

Este vizibil din demonstrație că componentele stage și ale team sunt de natură similară, cu câteva mici diferențe. Deci, să ne concentrăm doar pe o singură roată a bicicletei.

Exemplul CodePen de mai jos mărește doar cele trei idei cheie:

1. Preluare date de etapă;
2. Aranjați dinamic spițele pe baza datelor;
3. Rearanjați spițele atunci când faceți clic pe scena (spița).

Este posibil să fi observat în SVG CodePen static de mai sus că spițele nu sunt altceva decât dreptunghiuri SVG și text grupate împreună. Le-am grupat împreună, deoarece am vrut să aleg atât text, cât și dreptunghi în scopul animației.

 <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>

Le vom reda în zona <template> a componentei Vue folosind valori preluate din sursa de date.

Când toate cele 21 de etape sunt disponibile pe ecran, le vom seta pozițiile inițiale apelând, să spunem, setSpokes() .

 // 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) }

Trei elemente cheie ale pregătirii scenei sunt:

1. Rotație
   Pentru a roti spițele, vom mapa pur și simplu toate elementele cu stage className și vom stabili valoarea rotation dinamică care este calculată pentru fiecare spiță.
2. Transformă Originea
   Observați valoarea transformOrigin din codul de mai sus, care este la fel de importantă ca valoarea index , deoarece „0% 100%” permite fiecărei spițe să se rotească din centrul roții.
3. stageAngle
   Acesta este calculat folosind numărul total de etape împărțit la 360 de grade. Acest lucru ne va ajuta să așezăm fiecare spițe în mod egal într-un cerc de 360 ​​de grade.

Adăugarea interactivității

Următorul pas ar fi adăugarea unui eveniment de clic pe fiecare etapă pentru a-l face interactiv și reactiv la modificările datelor - prin urmare, va da mai multă viață unei imagini SVG!

Să presupunem că, dacă se face clic pe stage/spoke, acesta execută goAnimate() , care este responsabil să activeze și să rotească scena pe care se face clic folosind parametrul stageId .

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

Vom folosi DirectionalRotationPlugin... care este un ingredient cheie pentru această interactivitate. Și da, este inclus în TweenMax.

Există trei moduri diferite de a utiliza acest plugin. Acesta animă proprietatea de rotație în 1) în sensul acelor de ceasornic, 2) în sens invers acelor de ceasornic și 3) pe cea mai scurtă distanță calculată până la destinație.

După cum ați fi ghicit până acum, folosim a treia opțiune pentru a roti cea mai scurtă distanță dintre etapa actuală și etapa nouă.

Examinați CodePen-ul de mai sus și veți vedea cum Etapa 01 se mișcă constant în jurul cercului, lăsând locul inițial pentru noua etapă activă la un unghi de 0 grade.

Mai întâi, trebuie să găsim unghiul unei etape pe care se face clic și să schimbăm rotația acesteia cu Etapa 01 . Deci, cum găsim valoarea de rotație a etapei pe care se face clic? Consultați diagrama de mai jos.

De exemplu, dacă se face clic pe Etapa 05 (după cum puteți vedea mai sus), călătoria de la Etapa 01 la Etapa 05 — necesită 4 x valoarea unghiului.

Și, prin urmare, putem obține unghiul corect folosind, (Active stage Id - 1) * 17 degree, urmat de „_short” șir postfix pentru a declanșa pluginul de rotație direcțională.

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

Funcția finală goAnimate() va arăta mai jos:

 _.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

Odată ce avem roata din spate pregătită, roata din față (pentru echipă) ar trebui să urmeze aceeași logică cu câteva modificări.

În loc de scenă, vom prelua datele echipei și vom actualiza punctul de înregistrare al atributului transformOrigin pentru a permite generarea de spițe din punctul de înregistrare opus decât roata scenei.

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

Proiect final

La fel ca mine, dacă ați scris toate funcțiile legate de animație și date în componentele Vue în sine. Este timpul să le curățați folosind Vuex și Mixins.

VUEX

Vuex ușurează gestionarea datelor partajate între componente și, mai important, vă simplifică codul, păstrând methods și data() curate și ordonate, lăsând componentele doar pentru a reda datele, nu pentru a le gestiona.

Cârligele ciclului de viață sunt un loc foarte potrivit pentru a efectua orice solicitări HTTP. Preluăm datele inițiale în hook-ul created , când aplicația Vue s-a inițializat, dar nu a fost încă montată în DOM.

Variabilele de stare goale, stages și teams sunt actualizate folosind mutații în această etapă. Apoi, folosim watcher (o singură dată) pentru a ține evidența acestor două variabile și, imediat ce sunt actualizate, apelăm la un script de animație (de la mixin.js ).

De fiecare dată când utilizatorul interacționează cu etapa sau componenta echipei, acesta va comunica cu magazinul Vuex, va executa setActiveData și va actualiza etapa curentă și valorile echipei curente. Așa setăm datele active.

Și atunci când datele active sunt setate după actualizarea stării, goAnimate va activa pentru a anima (rotire direcțională) spițele folosind valori actualizate.

Lectură recomandată : Crearea intrărilor personalizate cu Vue.js

Mixine

Acum că datele sunt gestionate de Vuex, vom separa animațiile GreenSock. Acest lucru va împiedica componentele noastre Vue să fie aglomerate cu scripturi de animație lungi. Toate funcțiile GreenSock sunt grupate împreună în fișierul mixin.js .

Deoarece aveți acces la Magazinul Vuex din Mixins, toate funcțiile GSAP folosesc variabile de state pentru a anima elementele SVG. Puteți vedea store.js și mixin.js complet funcțional în exemplul CodeSandbox de aici.

Concluzie

Crearea de infografice interactive și captivante necesită să fii analitic cu datele, creativ cu elementele vizuale și eficient cu tehnologia pe care o folosești, care în acest caz este Vue.js. Puteți utiliza în continuare aceste concepte în proiectul dvs. Ca o notă de încheiere, vă las mai jos această roată circulară interactivă de culori care folosește o idee similară cu cea despre care am discutat în acest articol.

Fără îndoială, Vue.js are multe caracteristici grozave; putem crea infografice interactive cu doar câteva lucruri, cum ar fi observatori, proprietăți calculate, mixuri, directive (vezi exemplul roții de culori) și alte câteva metode. Vue.js este lipiciul care ține laolaltă atât animația SVG, cât și animația GreenSock, oferindu-vă multe oportunități de a fi creativ cu orice subiect și interactivitate personalizată în același timp.