Diagramă animată cu procente jquery. Construirea unei diagrame circulare animate cu jQuery

Deși diagramele circulare sunt cel mai obișnuit mod de a prezenta informații, variind de la simple statistici la bare de progres și cronometre, chiar și în cea mai simplă formă cu două culori, acestea au fost create în mod tradițional în orice fel, cu excepția metode simple folosind tehnologii web. De obicei, acestea au fost implementate folosind fie extern editor grafic pentru a crea mai multe imagini pentru mai multe valori într-o diagramă circulară sau cadre JavaScript pentru a crea diagrame mai complexe.

Deși sarcina acum nu pare la fel de imposibilă ca odinioară, încă nu există o soluție simplă și clară. Cu toate acestea, astăzi există multe modalități mai bune (comparativ cu metodele de mai sus) și mai acceptate de a implementa diagramele circulare.

soluție bazată pe transformare

Această soluție este cea mai bună în ceea ce privește aspectul: are nevoie doar de un element, iar orice altceva se face folosind pseudo-elemente, transformări și gradienți CSS. Să începem cu un element simplu:

Acum să presupunem că vrem o diagramă circulară care să afișeze 20%. Vom lucra la flexibilizarea acestuia mai târziu. Mai întâi, stilăm elementul ca un cerc, care va fi fundalul nostru (Figura 1):

Figura 1 - Punctul nostru de plecare (diagrama circulară care afișează 0%).pie ( lățime: 100 px; înălțime: 100 px; chenar-radius: 50 %; fundal: galbenverde; )

Diagrama noastră va fi verde (mai precis, galbenverde) cu o felie maro (#655) care arată cota ca procent. Am putea fi tentați să folosim transformări oblice pentru partea procentuală, dar puțină experimentare arată că aceasta ar fi o soluție destul de neglijentă. În schimb, vom colora părțile stânga și dreaptă ale cercului nostru în două culori și vom folosi rotația pseudo-elementului pentru a dezvălui doar porțiunea de cerc de care avem nevoie.

Pentru a colora partea dreaptă a cercului nostru maro, vom folosi un simplu gradient liniar:

Imagine de fundal: gradient liniar (la dreapta, transparent 50%, #655 0); Figura 2 - Colorarea părții drepte a cercului nostru maro cu un gradient liniar simplu

După cum puteți vedea în Figura 2, de asta ne trebuia. Acum putem începe să stilăm pseudo-elementul care va acționa ca o mască:

Pie::before (conținut: ""; afișare: bloc; margine-stânga: 50%; înălțime: 100%; ) Figura 3 - Pseudo-elementul care acționează ca o mască este evidențiat aici cu un chenar punctat

În figura 3 puteți vedea cum acest moment Pseudo-elementul nostru este situat în raport cu elementul diagramei circulare. Acum nu este încă stilizat și nu îndeplinește nicio funcție. Este doar un dreptunghi invizibil. Înainte de a începe să-l modelăm, să facem câteva note:

• deoarece dorim să ascundem partea maro a cercului nostru, trebuie să aplicăm pseudoelementului fundal verde, folosind background-color: inherit pentru a evita duplicarea atunci când îi dăm aceeași culoare de fundal ca și elementul părinte;
• dorim ca acesta să se rotească în jurul centrului cercului, care se află în mijlocul părții stângi a pseudo-elementului, așa că trebuie să setăm transform-origin la 0 50% sau doar la stânga;
• Nu vrem să fie dreptunghi pentru că s-ar extinde dincolo de marginile diagramei circulare, așa că trebuie fie să aplicăm overflow: hidden to .pie, fie să îi dăm o rază de margine pentru a-l face un semicerc.

Punând toate acestea împreună, obținem următorul stil pentru pseudo-elementul nostru;

Pie::before (conținut: ""; afișare: bloc; margine-stânga: 50%; înălțime: 100%; chenar-rază: 0 100% 100% 0 / 50%; fundal-culoare: moștenire; transformare-origine: stânga; ) Figura 4 - Pseudo-elementul nostru (prezentat cu un chenar punctat) după ce stilul este complet

Notă: nu utilizați background: inherit; în loc de backround-color: inherit;, deoarece acest lucru va moșteni și gradientul!

Diagrama noastră circulară arată acum ca Figura 4. Aici începe distracția! Putem începe rotirea pseudo-elementului prin aplicarea transformării rotate(). Pentru cei 20% pe care încercăm să îl implementăm, putem folosi o valoare de 72deg (0,2 × 360 = 72) sau .2turn, care este mai ușor de citit. În Figura 5 puteți vedea cum arată aceasta pentru mai multe alte valori.

Figura 5 - Diagrama noastră circulară simplă care arată diferitele procente, de la stânga la dreapta: 10% (36deg sau .1turn), 20% (72deg sau .2turn), 40% (144deg sau .4turn)

Ai putea crede că treaba este gata, dar, din păcate, nu este atât de simplu. Diagrama noastră circulară este excelentă pentru afișarea procentelor de la 0 la 50%, dar dacă încercăm să afișăm o rotație de 60% (prin folosirea .6turn), va arăta ca în Figura 6. Dar nu vă pierdeți speranța, putem remedia acest lucru și hai să o facem!

Figura 6 - Graficul nostru se defalcă pentru acțiuni mai mari de 50% (afișat aici pentru 60%)

Dacă considerăm afișarea acțiunilor 50%-100% ca o problemă separată, atunci putem vedea că pentru acestea putem folosi o versiune inversată a soluției anterioare: un pseudo-element maro care se rotește, respectiv, de la 0 la .5turn . Deci, pentru o cotă de 60%, codul pseudo-elementului ar arăta astfel:

Pie::before (conținut: ""; afișare: bloc; margine-stânga: 50%; înălțime: 100%; chenar-rază: 0 100% 100% 0 / 50%; fundal: #655; transform-origine: stânga ; transformare: rotire(.1turn); ) Figura 7 - Diagrama noastră acum corectă, cu o valoare de 60%

În Figura 7 puteți vedea codul în acțiune. Deoarece acum am dezvoltat o modalitate de a afișa orice procent, putem anima Graficul proporțiilor de la 0% la 100% cu folosind CSS animație, creând un fel de indicator de progres:

@keyframes rotesc ( la ( transforma: rotiți(.5turn); ) ) @keyframes bg ( 50% ( fundal: #655; ) ) .pie::before ( conținut: ""; afișare: bloc; margine-stânga: 50 %; înălțime: 100%; rază de margine: 0 100% 100% 0 / 50%; culoarea de fundal: moștenire; originea transformării: stânga; animație: rotire 3s liniar infinit, bg 6s pas-sfârșit infinit; )

Totul este bine și bine, dar cum stilăm mai multe diagrame statice cu procente diferite, care este cel mai caz general folosind diagrame? În mod ideal, dorim să putem imprima ceva de genul acesta:

20% 60%

Și obțineți două diagrame circulare, unul care arată 20% și celălalt indicând 60%. În primul rând, ne vom uita la modul în care putem face acest lucru folosind stiluri inline și apoi putem întotdeauna să scriem un script scurt pentru a analiza continutul textuluiși adăugați stiluri inline specificate pentru eleganța codului, încapsulare, mentenanță și, poate cel mai important, accesibilitate.

Dificultatea de a controla procentul unei diagrame circulare cu stiluri inline este că codul CSS care este responsabil pentru setarea procentului este setat la un pseudo-element. După cum știți deja, nu putem seta stiluri inline pe pseudo elemente, așa că va trebui să fim mai creativi.

Notă: Pentru a utiliza valori din spectrul de culori fără repetare și calcule complexe puteți folosi metoda de mai jos. Puteți utiliza aceeași metodă în alte cazuri. Mai jos este un exemplu simplu, izolat de utilizare a acestei metode.

Soluția vine din unul dintre cele mai neașteptate locuri. Vom folosi o animație care a fost deja afișată, dar care va fi întreruptă. În loc să o rulăm ca o animație normală, vom folosi întârzieri negative ale animației pentru a seta o poziție în orice punct al animației și a rămâne acolo. Uimit? Da, valorile negative ale întârzierii animației nu sunt permise numai în specificații, ci sunt și foarte utile în cazuri ca acesta.

Deoarece animația noastră este întreruptă, va fi afișat doar primul cadru al acesteia (determinat de programul nostru valoare negativă animație-întârziere). Procentul afișat în diagrama circulară va fi egal cu procentul pe care întârzierea animației noastre contribuie la durata totală. De exemplu, cu o durată curentă de 6 secunde, avem nevoie de o valoare de întârziere a animației de -1,2 secunde pentru a afișa o fracție de 20%. Pentru a simplifica calculele, vom seta durata la 100 de secunde. Rețineți că, deoarece animația este oprită pentru totdeauna, valoarea duratei pe care o setăm nu are alt efect.

O ultimă întrebare: animația este aplicată pseudo-elementului, dar vrem să setăm stilul inline la elementul .pie. Cu toate acestea, deși nu există animație, putem seta animation-delay pentru aceasta ca stil inline și apoi folosim animation-delay: inherit; pentru pseudo-elementul. Punând toate acestea cap la cap, aspectul nostru pentru diagramele cu 20% și 60% ar arăta astfel:

Și codul CSS pentru această animație va deveni următorul (regulile pentru .pie nu sunt afișate, deoarece rămân aceleași):

@keyframes rotesc ( la ( transforma: rotiți(.5turn); ) ) @keyframes bg ( 50% ( fundal: #655; ) ) .pie::before ( /* [alte stiluri neschimbate] */ animație: rotație liniară 50s infinit, bg 100s step-end infinit; animație-stare de redare: întreruptă; animație-întârziere: moștenire; )

În acest moment, putem converti marcajul pentru a utiliza procente ca conținut, așa cum ne-am propus inițial, și putem adăuga stiluri de întârziere de animație prin intermediul unui script simplu:

$$(".pie").forEach(function(pie) ( var p = parseFloat(pie.textContent); pie.style.animationDelay = "-" + p + "s"; ));

Vă rugăm să rețineți că am lăsat textul intact deoarece avem nevoie de el pentru accesibilitate și ușurință în utilizare. În acest moment diagramele noastre circulare arată ca Figura 8. Trebuie să ascundem textul, care poate fi accesibil prin culoare: transparent, astfel încât să rămână selectabil și imprimabil. Pentru un plus de luciu, putem plasa valorile procentuale în centrul diagramei circulare, astfel încât acestea să nu fie în loc aleatoriu când utilizatorul încearcă să le selecteze. Pentru a face acest lucru avem nevoie de:

Figura 8 - Textul nostru înainte de a-l ascunde

• convertiți valoarea înălțimii diagramei în înălțimea liniei (sau adăugați o valoare a înălțimii liniei egală cu înălțimea , dar aceasta ar fi o duplicare a codului inutilă, deoarece înălțimea liniei ar fi setată la valoarea înălțimii calculate, ceea ce este bine);
• setați dimensiunea și poziția pseudo-elementului folosind poziționarea absolută, astfel încât să nu împingă textul în jos;
• adăugați text-align: center; pentru a centra textul pe orizontală.

Codul final arată astfel:

Placintă (poziție: relativă; lățime: 100 px; înălțimea liniei: 100 px; raza marginii: 50%; fundal: galbenverde; imaginea de fundal: gradient liniar (la dreapta, transparent 50%, #655 0); culoare: transparent ; text-align: center; ) @keyframes rotesc ( la ( transforma: rotiți(.5turn); ) ) @keyframes bg ( 50% ( fundal: #655; ) ) .pie::before ( conținut: ""; poziție : absolut; sus: 0; stânga: 50%; lățime: 50%; înălțime: 100%; chenar-rază: 0 100% 100% 0 / 50%; fundal-culoare: moștenire; transform-origine: stânga; animație: rotire 50 s liniar infinit, bg 100 s step-end infinit; animație-stare de redare: întreruptă; animație-întârziere: moștenire; )

Soluție bazată pe SVG

SVG este soluția pentru mulți sarcini grafice mai simple, iar diagramele circulare nu fac excepție. Cu toate acestea, în loc să creăm o diagramă circulară folosind căi, care ar necesita matematică complexă, vom folosi un mic truc.

Să începem cu un cerc:

Acum să-i aplicăm câteva stiluri de bază:

Cerc (umplere: galbenverde; contur: #655; lățimea conturului: 30; )

Notă: După cum știți, aceste proprietăți CSS sunt disponibile și ca atribute ale elementelor SVG, ceea ce ar putea fi util dacă portarea ar fi o problemă.

Figura 9 - Punctul nostru de plecare: un cerc SVG verde cu o contur groasă #655

Puteți vedea cercul nostru conturat în Figura 9. Stroke în SVG constă din mai mult decât proprietățile cursei și lățimii stroke-ului. Există multe alte proprietăți, mai puțin populare, asociate cu loviturile, care vă permit să le reglați fin aspectul. Unul dintre ele este stroke-dasharray, conceput pentru a crea linii punctate. De exemplu, l-am putea folosi pentru asta:

Stroke-dasharray: 20 10; Figura 10 - Un simplu stroke punctat creat cu stroke-dasharray

Aceasta înseamnă că vrem liniuțe de lungime 20 cu spații de lungime 10, precum cele prezentate în Figura 10. În acest moment, s-ar putea să fii surprins că acest exemplu SVG are ceva în comun cu diagramele circulare. Dar lucrurile devin mai clare atunci când aplicăm o contur cu o lungime de liniuță de 0 și spații mai mari sau egale cu circumferința cercului nostru (C = 2πr, sau în cazul nostru C = 2π × 30 ≈ 189):

Stroke-dasharray: 0 189; Figura 11 - Mai multe valori stroke-dasharray și rezultatul acestora; de la stânga la dreapta: 0 189 ; 40 189; 95 189; 150 189

După cum puteți vedea în primul cerc din Figura 11, aceasta elimină complet cursa și rămânem doar cu cercul verde. Cu toate acestea, distracția începe atunci când începem să creștem prima valoare (Figura 11): din cauza unui decalaj atât de lung, nu vom mai obține cursă punctată, ci un accident vascular cerebral care acoperă un procent din circumferința cercului pe care îl specificăm noi.

Poate ți-ai dat seama deja încotro ne îndreptăm: dacă reducem suficient de mult raza cercului nostru, astfel încât acesta să fie acoperit complet de conturul său, vom ajunge la ceva care seamănă mult cu o diagramă circulară. De exemplu, în Figura 12 puteți vedea cum ar arăta atunci când este aplicat unui cerc cu o rază de 25 și o lățime a cursei de 50:

Figura 12 - Imaginea noastră SVG începe să semene cu o diagramă circulară

Rețineți: liniile SVG sunt întotdeauna jumătate în interiorul și jumătate în afara elementului la care sunt aplicate. În viitor, vom putea controla acest comportament.

cerc ( umplere: galbenverde; contur: #655; lățimea conturului: 50; stroke-dasharray: 60 158; /* 2π × 25 ≈ 158 */ )

Acum, transformarea acestei imagini într-o diagramă circulară precum cele pe care le-am creat în soluția anterioară este destul de ușoară: trebuie doar să adăugați un cerc verde mai mare sub cursă și să îl rotiți cu 90° în sens invers acelor de ceasornic, astfel încât să înceapă în partea de sus, la mijloc. Deoarece elementul este de asemenea element HTML, îl putem stila pur și simplu:

Svg (transformare: rotire(-90deg); fundal: galbenverde; chenar-rază: 50%; ) Figura 13 - Diagramă circulară finală cu SVG

Puteți vedea rezultatul final în Figura 13. Această metodă o face, de asemenea animație mai ușoară diagramă circulară de la 0% la 100%. Trebuie doar să creăm o animație CSS care schimbă stroke-dasharray de la 0 158 la 158 158:

@keyframes umplere ( la ( stroke-dasharray: 158 158; ) ) cerc ( umplere: galbenverde; stroke: #655; stroke-width: 50; stroke-dasharray: 0 158; animație: umplere 5s liniar infinit; )

Ca o îmbunătățire suplimentară, putem seta o rază specifică a cercului, astfel încât circumferința sa să fie (infinit aproape de) 100 și astfel putem specifica lungimile stroke-dasharray ca procente fără niciun calcul. Deoarece circumferința unui cerc este 2πr, avem nevoie de o rază de 100 ÷ 2π ≈ 15,915494309, care poate fi rotunjită la 16 pentru nevoile noastre. În schimb, vom seta dimensiunile SVG-ului în atributul viewBox. atribute de lățimeși înălțimea pentru a-l face să se redimensioneze la dimensiunea containerului său.

După aceste modificări, aspectul diagramei circulare prezentat în Figura 13 va deveni după cum urmează:

Și CSS-ul va deveni așa:

Svg ( lățime: 100 px; înălțime: 100 px; transformare: rotire(-90 grade); fundal: galbenverde; rază chenar: 50%; ) cerc ( umplere: galbenverde; contur: #655; lățime stroke: 32; stroke-dasharray : 38.100; /* pentru 38% */ )

Observați cât de ușor este acum să schimbați procentul. Deși, chiar și cu această simplificare, nu dorim să repetăm ​​toate aceste markupuri SVG pentru fiecare diagramă circular. Este timpul ca JavaScript să ne ajute cu puțină automatizare. Vom scrie un mic script pentru a lua un simplu Marcaj HTML ca aceasta...

20% 60%

Și adăugați SVG inline în interiorul fiecărui element.pie cu toate elementele necesare si atribute. De asemenea, va adăuga un element de accesibilitate pentru ca utilizatorii cititoare de ecran ar putea afla și ce procente sunt afișate. Scriptul final va arăta astfel:

$$(".pie").forEach(function(pie) ( var p = parseFloat(pie.textContent); var NS = "http://www.w3.org/2000/svg"; var svg = document. createElementNS(NS, "svg"); var circle = document.createElementNS(NS, "cercle"); var title = document.createElementNS(NS, "title"); circle.setAttribute("r", 16); circle. setAttribute("cx", 16); circle.setAttribute("cy", 16); circle.setAttribute("stroke-dasharray", p + "100"); svg.setAttribute ("viewBox", "0 0 32 32" "); title.textContent = pie.textContent; pie.textContent = ""; svg.appendChild(titlu); svg.appendChild(cercle); pie.appendChild(svg); ));

Iată-l! Ai putea crede că Metoda CSS mai bine pentru că codul său este mai simplu și mai familiar. Cu toate acestea, metoda SVG are anumite avantajeînainte de soluția CSS pură:

• Este mai ușor să adaugi o a treia culoare: trebuie doar să adaugi un alt cerc trasat și să-i muți cursa folosind stroke-dashoffset . Sau adăugați lungimea cursei sale la lungimea cursei cercului anterior (dedesubt). Cum adaugi exact o a treia culoare diagramei circulare create prin prima metodă?
• nu trebuie să depunem niciun efort suplimentar în tipărire, deoarece elementele SVG sunt tratate ca conținut și tipărite la fel ca elemente . Prima soluție depinde de fundal și astfel nu va fi tipărită;
• putem schimba culorile folosind stiluri inline, ceea ce înseamnă că le putem schimba cu ușurință prin intermediul scripturilor (adică, pe baza intrării utilizatorului). Prima soluție se bazează pe pseudo-elemente, care nu pot accepta stiluri inline decât prin moștenire, ceea ce nu este întotdeauna convenabil.
fundal: conic-gradient(#655 attr(data-valoare %), galbenverde 0);

De asemenea, face incredibil de ușor să adăugați o a treia culoare. De exemplu, pentru o diagramă circulară, similar cu diagrama mai sus, am adăuga pur și simplu încă două opriri de culoare:

Fundal: conic-gradient (roz intens 20%, #fb3 0, #fb3 30%, galbenverde 0);

Asta e tot! Lasă comentarii!

Probabil ați văzut astfel de indicatori de încărcare, mai ales pe site-urile Flash. Acesta este un sector al unui cerc care devine din ce în ce mai mare până devine un cerc complet.

La prima vedere, sarcina pare simplă: faceți un cerc, rotiți-l și ascundeți o parte din el în spatele unei măști. Dar, în realitate, totul se dovedește a fi ceva mai complicat. CSS nu este pregătit să se ocupe de astfel de sarcini, chiar și atunci când folosesc preprocesoare precum SASS și Compass. Ne luptăm mereu când trebuie să facem diferite forme și mai ales când stabilim stilurile și animațiile pentru acestea. Majoritatea timpului meu de lucru îl petrec pe asta. pentru ca ceva să funcționeze, semantica codului și suportul acestuia sunt sacrificate.

De ce o facem?

Cea mai probabilă utilizare pentru astfel de elemente este temporizatoarele. Dar acest concept poate fi folosit pentru a face o diagramă circulară doar cu CSS.

Deși există câteva instrumente uimitoare disponibile pentru manipularea diagramelor circulare (mai ales în JavaScript), vom crea în continuare un astfel de element folosind doar CSS și chiar îl vom anima cu câteva trucuri.

Semantica codului va fi așa-așa! Dar escortarea poate fi făcută destul de convenabilă.

HTML

Avem nevoie de 3 elemente diferite:

• spinner: jumătate de cerc care se va învârti;
• masca: acest element ascunde cercul de rotire in timpul primelor 50% din animatie;
• umplere: Acest element umple cercul în ultimele 50% din animație.

Și toate cele trei elemente trebuie să aibă același părinte pentru poziționarea absolută:

Deoarece spinner și filler sunt două jumătăți ale aceluiași cerc, vom folosi clasa .pie pentru ele.

CSS

Elementul părinte primește dimensiunile și poziționare absolută context pentru cronometru:

Wrapper ( lățime: 250px; înălțime: 250px; poziție: relativă; fundal: alb; )

Este important ca lățimea și înălțimea să fie egale pentru a obține un cerc și totul funcționează.

Elementele „spinner” și „filler” folosesc acest cod CSS:

Placintă ( lățime: 50%; înălțime: 100%; poziție: absolut; fundal: #08C; chenar: 10px rgba solid(0,0,0,0.4); )

Au o lățime egală cu 50% din elementul părinte, deci sunt două părți ale unui cerc, iar înălțimea lor este egală cu înălțimea elementului părinte. De asemenea, definim aceeași culoare și cadru pentru ele.

element „învârtitor”.

Spinner ( chenar-rază: 125px 0 0 125px; z-index: 200; chenar-dreapta: niciunul; animație: rotație 10s liniar infinit; )

Faceți-l un semicerc folosind proprietatea border-radius din colțurile din stânga sus și din stânga jos. De asemenea, definim o valoare pozitivă pentru indexul z pentru a-l plasa deasupra elementului de umplutură, dar sub mască.

Apoi adăugați o animație care durează 10 secunde. Despre animație vom vorbi mai târziu.

element „de umplere”.

Filler ( chenar-rază: 0 125px 125px 0; z-index: 100; chenar-stânga: niciunul; animație: umpleți pași de 10 s(1, sfârșit) infinit; stânga: 50%; opacitate: 0; )

Pentru a acestui element setați raza marginii și indexul z, eliminați marginea stângă și faceți o animație care durează 10 secunde. Pentru un element dat, funcția de sincronizare a animației nu devine liniară, ci steps(1, end) . Aceasta înseamnă că animația va fi executată instantaneu.

Deoarece elementul de umplere nu ar trebui să fie vizibil în prima jumătate a animației, opacitatea sa va fi 0 și poziția sa va fi de 50% din lățimea elementului părinte.

element „mască”.

Mască ( lățime: 50%; înălțime: 100%; poziție: absolut; index z: 300; opacitate: 1; fundal: moștenire; animație: masca pași 10s (1, sfârșit) infinit; )

Masca este prezentă de la începutul animației, deci opacitatea sa este setată la 1, iar fundalul este moștenit de la elementul părinte (deci este invizibil). Pentru a acoperi elementul rotativ, acesta va avea aceleași dimensiuni și proprietatea z-index va fi setată la 300.

Cadre de animație

@keyframes rotație ( 0% ( transformare: rotire(0deg); ) 100% ( transformare: rotire(360deg); ) ) @keyframes umple ( 0% ( opacitate: 0; ) 50%, 100% ( opacitate: 1; ) ) @keyframes mask ( 0% ( opacitate: 1; ) 50%, 100% ( opacitate: 0; ) )

Prima animație (rota) este folosită pentru elementul spinner. Se rotește treptat de la 0 la 360 de grade în 10 secunde.

A doua animație (umplere) este utilizată pentru elementul de umplere. Schimbă imediat opacitatea de la 0 la 1 după 5 secunde.

Ultima animație (mască) este folosită pentru elementul mască. Schimbă imediat opacitatea de la 1 la 0 după 5 secunde.

Animația arată astfel:

• T0 - element rotativ din stânga, ascuns de o mască. Elementul de umplere este ascuns.
• T1 - elementul rotativ începe să se rotească în sensul acelor de ceasornic și apare încet din spatele măștii.
• T2 - elementul spinner r este rotit la un unghi de 360/10*2 = 72° și continuă să se rotească.
• T3 - elementul rotativ este rotit la un unghi de 360/10*3 = 108° și continuă să se rotească.
• T4 - elementul rotativ este rotit la un unghi de 360/10*4 = 144° și continuă să se rotească.
• T5 - elementul rotativ este rotit la un unghi de 360/10*5 = 180° continuă să se rotească. În acest moment, elementul de umplere devine instantaneu vizibil și masca este ascunsă.
• T6 - elementul rotativ este rotit la un unghi de 360/10*6 = 216° continuă să se rotească.
• T7 - elementul rotativ este rotit la un unghi de 360/10*7 = 252° continuă să se rotească.
• T8 - elementul rotativ este rotit la un unghi de 360/10*8 = 288° și continuă să se rotească.
• T9 - elementul rotativ este rotit la un unghi de 360/10*9 = 324° continuă să se rotească.
• T10 - elementul rotativ este rotit la 360°. Ne-am întors la punctul de plecare. Resetăm animația. Apare masca și elementul de umplere este ascuns.

Primă

Câteva trucuri în plus.

Pauză la hover

Wrapper:hover .filler, .wrapper:hover .spinner, .wrapper:hover .mask (animație-play-state: întrerupt; )

Cu acest cod puteți opri toate animațiile când treceți cu mouse-ul peste elementul părinte.

Inserarea conținutului

Datorită proprietății z-index, putem adăuga cu ușurință conținut la elementul spinner și îl putem face să se rotească. Încercați următorul cod:

Spinner:după (conținut: ""; poziție: absolut; lățime: 10px; înălțime: 10px; raza chenar: 50%; sus: 10px; dreapta: 10px; fundal: #fff; chenar: 1px rgba solid(0,0) ,0,0.4); casetă-umbră: inset 0 0 3px rgba(0,0,0,0.2); )

Preprocesor sau variabile CSS

În prezent, codul este foarte greu de întreținut. Dar dacă folosim variabile (în preprocesor sau variabile interne CSS așteptate), lucrurile pot deveni semnificativ mai simple. De exemplu, puteți adăuga variabile pentru a controla durata în loc să trebuiască să editați codul în 3 definiții de animație.

Dacă doriți să îmbunătățiți menținerea codului fără a utiliza preprocesoare, puteți crea o clasă cu un control al duratei animației și o puteți adăuga la 3 elemente copil. De exemplu astfel:

Durata animației ( durata animației: 10s; )

Defecte

Această tehnică are o serie de dezavantaje:

• Gradienele nu sunt acceptate.
• Umbrele nu sunt acceptate.
• Fără adaptabilitate. Dacă dimensiunea elementului părinte se schimbă, atunci totul va fi bine, cu excepția razei de curbură a cadrului. Va trebui schimbat manual.
• Fără semantică (4 elemente pentru o animație).

Suport pentru browser

Din moment ce folosim Animații CSS, atunci suportul în browsere este destul de limitat:

• Internet Explorer 10
• Firefox 12+
• Crom
• Safari 5+
• Opera 12+
• iOS Safari 3+
• Android 2+

• Traducere
• Tutorial

Formularele sunt o modalitate bună de a adăuga un pic de fler elementelor de pe pagina dvs. web. Cercurile sunt deosebit de bune în această privință, deoarece sunt coezive, simple și asemănătoare plăcintei. Acum serios, cui nu iubește plăcinta?

După cum poate ați observat din anii de experiență în utilizarea internetului, majoritatea elementelor de pe paginile web sunt, de fapt, fie pătrate, fie dreptunghiuri. Prin urmare, în unele cazuri, elemente interesante, cum ar fi cercurile și triunghiurile din designul dvs., pot fi destul de utile. Acest tutorial va demonstra cum să creați o diagramă circulară animată precum cele pe care le vedeți de obicei pe site-urile de portofoliu. Acest lucru vă poate ajuta să vă evidențiați vizual abilitățile, precum și să vă demonstrați ce sarcini vă puteți ocupa. Aruncă o privire la demo pentru a vedea rezultatul final.

Deci, să începem! Când scriu acest tutorial, voi lucra cu Circliful. Este gratis plugin jQuery sursa deschisa. Puteți descărca fișierul principal de pe Github. Include fișierul .js împreună cu fișierul corespunzător Tabel CSS stiluri. Pagina trebuie să conțină ambele pentru a obține efectul de cerc.

Statistici cerc animate - Demo de monstru șablon

Pagina mea conține o foaie de stil similară styles.css pentru personalul meu Stiluri CSS. De asemenea, trebuie să faceți o copie a bibliotecii jQuery. Este necesar ca pluginul să funcționeze corect.
Pagina în sine este destul de ușor de structurat. Elementele cerc sunt conținute în etichetele div, care folosesc atribute HTML5 pentru a manipula datele. Alternativ, acestea pot fi stocate în Funcții jQuery, dar dacă doriți un control mai bun asupra fiecărui element, atunci este mai ușor să lucrați în HTML.

Photoshop Illustrator Dupa efecte

Aceasta este o copie a primului rând de cercuri, constând din 3 unități animate. Toate aceste atribute de date sunt explicate în continuare în documentația pluginului. Fiecare reprezintă o opțiune care specifică un efect de animație. Citez mai jos scurta descriere opțiuni pe care le folosesc:

• data-dimension – dimensiunea totală a lățimii/înălțimii cercului;
• data-text – textul care apare în centrul fiecărui cerc;
• data-width – grosimea arcului de date rotativ;
• data-fontsize – dimensiunea fontului text centrat;
• date-percent – ​​un număr de la 0 la 100 care afișează procentul din cercul tău;
• data-fgcolor – culoare prim plan cerc;
• data-bgcolor – culoarea de fundal a cercului;
• data-fill – umple culoarea de fundal a cercului interior.

Aspectul CSS al paginii Nu insist să editați jquery.circliful.css direct, decât dacă doriți să personalizați pluginul. Majoritatea culorilor pot fi schimbate direct din atributele de date HTML5 și, dacă doriți cu adevărat să suprascrieți oricare dintre stiluri Circliful, aș recomanda să faceți acest lucru în propria foaie de stil.
După ce ți-am spus asta, mi-am creat propria foaie de stil pentru a acestui proiect, și nu pentru a rescrie stiluri Circliful. Pagina web în sine are nevoie de un aspect implicit, care este foarte ușor de proiectat. Zona de conținut este centrată într-o secțiune mică pentru diagrama circulară. Fiecare zonă plutește liber într-un container de rând în cadrul #stats div original.

/** structura paginii **/ .wrap ( display: block; margin: 0 auto; max-width: 800px; ) #intro ( display: block; margin-bottom: 25px; text-align: center; ) #intro p ( dimensiunea fontului: 1.8em; înălțimea liniei: 1.35em; culoarea: #616161; stilul fontului: cursiv; margin-bottom: 25px; ) #stats ( afișare: bloc; lățime: 100%; umplutură: 15px 0; fundal: #f8f8f8; chenar-sus: 4px solid #c3c3c3; chenar-jos: 4px solid #c3c3c3; ) #stats .row ( afișare: bloc; ) .circle-container ( afișare: bloc; float: stânga; margine-dreapta : 55px; margin-bottom: 45px; ) .circle-container h3 (afișare: bloc; text-align: center; font-size: 2.25em; line-height: 1.4em; culoare: #363636; text-shadow: 1px 1px 0 #fff; )

În fiecare secțiune, conținutul este păstrat într-un div .wrap pentru a-l menține centrat. De asemenea, elementele circulare care se mișcă liber au nevoie de un container suplimentar .clearfix pentru a se asigura că totul rămâne aliniat corespunzător.

/** clearfix **/ .clearfix:după (conținut: "."; afișare: bloc; clar: ambele; vizibilitate: ascuns; line-height: 0; înălțime: 0; ) .clearfix ( display: inline-block; ) html .clearfix ( afișare: bloc; ) * html .clearfix ( înălțime: 1%; )

Această clasă clearfix este cunoscută de ani de zile ca o soluție pentru un container cu elemente care se mișcă liber. De obicei, acestea sunt eliminate din textul documentului și lățimea/înălțimea lor inițială nu este reținută. Dar acest lucru menține constantă lățimea containerului #stats și lasă loc pentru Mai mult conținut care va fi situat mai jos pe pagină.

Aspecte finale Așa că am frământat aluatul, am umplut tava de plăcintă, am introdus-o la cuptor și suntem aproape gata să luăm o probă. Dacă totul arată suficient de bine, care este pasul final? Avem nevoie de cod jQuery pentru a decora acest proiect.
Deschideți o nouă etichetă de script în partea de jos a acesteia Pagini HTML. Acesta va conține o mică bucată de JavaScript. Deoarece am folosit toate atributele de date HTML5, nu trebuie să apelăm nicio opțiune jQuery. Scriptul trebuie doar să ruleze funcția Circliful pe fiecare cerc divs. Folosirea unui nume de clasă duplicat, cum ar fi .circlestat, face procesul foarte simplu.

$(funcție())( $(".circlestat").circliful(); ));

Pentru cei care nu sunt familiarizați cu structura de sintaxă jQuery, voi oferi o scurtă descriere. După ce documentul este încărcat, lansăm o nouă funcție. Ținta noastră internă este fiecare element care utilizează clasa .circlestat și rulează funcția circliful(). Aceasta conduce pluginul Circliful, care creează efecte de animație în acțiune și aplică conținut/culori suplimentare.

Nu pot spune că aceste cercuri vor fi mereu acolo cea mai bună soluție. Am văzut o mulțime de portofolii care s-au bazat pe cuvinte și numere, dar nu pe lucrarea în sine. Luați în considerare utilizarea acestor cercuri în rare ocazii și încercați să le împrumutați în alte scopuri în afara abilităților simple. Statisticile dvs. nu trebuie să fie măsurate ca procente - ele pot arăta câți ani ați lucrat în afaceri, numărul total de proiecte pe care le aveți sau alte cifre similare. Puteți descărca o copie gratuită a tutorialului meu și puteți experimenta cu codul pentru a se potrivi mai bine proiectelor dvs.

Pentru dezvoltatorul front-end există o cantitate mare moduri în care puteți construi o diagramă circulară - diverse biblioteci, pluginuri, caracteristici uimitoare Grafică SVG etc. Cu toate acestea, poate merită să luați în considerare cel mai simplu mod de a crea o diagramă „placă”, care poate fi utilă atunci când sarcina este stabilită cât mai simplu posibil și nu este nevoie sau oportunitate de a utiliza instrumente suplimentare. În continuare vom vorbi despre un exemplu de astfel de implementare.

Să presupunem că avem date sursă sub forma unui tablou care trebuie prezentat pe o diagramă circulară:

Set de date Var = [ ( valoare: 5, culoare: "#dc3912" ), ( valoare: 40, culoare: "#ff9900" ), ( valoare: 30, culoare: "#109618" ), ( valoare: 25, culoare: „#990099” ) ];

valoare este valoarea procentuală, culoarea este culoarea sectorului.

Mai întâi, să creăm un container care va deveni cercul diagramei și va conține elemente ale sectoarelor:

Să-i dăm și stiluri:

Container ( lățime: 300 px; înălțime: 300 px; preaplin: ascuns; rază-chenar: 50%; poziție: relativă; )

Rezultatul este un cerc ca acesta. Tot ceea ce depășește limitele sale (afișat ca o linie punctată) va fi ascuns.

În continuare, apare în mod natural întrebarea - cum transformăm dreptunghiulare elemente divîn sectoare ale unui cerc și cum le setăm unghiul dorit? De fapt, pentru primul scop, proprietatea overflow:hidden a fost setată la container, deoarece acest lucru ne permite să ascundem o parte din element, făcându-l astfel rotunjit, iar pentru a doua, transformările CSS ne vor ajuta. Mai jos este un exemplu pentru un sector.

Să adăugăm un div cu clasa de sector în interiorul containerului.

CSS:

Sector ( lățime: 50%; înălțime: 50%; poziție: absolut; stânga: 50%; sus: 0; originea transformării: stânga jos; fundal: #000; )

Astfel, avem un sector cu o valoare de 90 de grade, începând de la 0 grade.

Pentru a seta unghiul dorit pentru acest sector, aplicați transformarea skewY CSS. Această transformare deplasează marginea dreaptă a pătratului de-a lungul axei y, astfel încât să se formeze marginile orizontale unghiul specificat cu poziția inițială:

Valoarea din primul element al matricei setului de date este 5, conversia în grade, obținem 18. Pentru ca înclinarea să apară în direcția dorită, vom adăuga 90 de grade la toate unghiurile.

Astfel, unghiul de transformare = 90 + 18 = 108.

transforma: skewY(108deg);

Pentru a roti cu un unghi dat, vom folosi transformarea de rotire. Este important ca mai întâi să se aplice transformarea de rotație, abia apoi transformarea de înclinare.

Transformare: rotire(45deg) skewY(108deg);

Această metodă are un dezavantaj - așa cum se poate vedea în figura care ilustrează valorile transformării skewY, astfel puteți descrie corect sectoare cu o valoare de cel mult 90 de grade. Prin urmare, pentru a reprezenta valori mai mari de 90, va trebui să desenați mai multe sectoare de aceeași culoare. De exemplu, dacă valoarea unghiului este de 100 de grade, vom afișa 2 sectoare: 90 de grade și 10. Dacă valoarea este de 200 de grade, vom obține 3 sectoare - 90, 90 și 20 de grade fiecare etc.

Ca rezultat, obținem următorul cod pentru adăugarea dinamică a sectoarelor:

Var maxValue = 25; var container = $(".container"); var addSector = function(data, startAngle, collapse) ( var sectorDeg = 3,6 * data.value; var skewDeg = 90 + sectorDeg; var rotateDeg = startAngle; if (colapse) ( skewDeg++; ) var sector = $("", ( „clasă”: „sector” )).css(( „fond”: data.culoare, „transform”: „rotire(” + rotireDeg + „grade) skewY(” + skewDeg + „grade)” )); container. append(sector); return startAngle + sectorDeg; ); dataset.reduce(function (prev, curr) ( return (function addPart(data, angle)) ( if (data.value)