Animirani tortni grafikon s jquery postocima. Izrada animiranog tortnog grafikona s jQueryjem

Iako su tortni dijagrami najčešći način predstavljanja informacija, u rasponu od jednostavnih statistika do traka napretka i mjerača vremena, čak i u svom najjednostavnijem obliku u dvije boje, tradicionalno su se stvarali na bilo koji način osim jednostavne metode koristeći web tehnologije. Obično su implementirani bilo vanjskim grafički urednik za stvaranje više slika za više vrijednosti u kružnom dijagramu ili JavaScript okvire za stvaranje složenijih grafikona.

Iako se zadatak sada ne čini nemogućim kao nekada, još uvijek nema jednostavnog, jasnog rješenja. Međutim, danas postoji mnogo boljih (u usporedbi s gore navedenim metodama), podržanijih načina za implementaciju tortnih grafikona.

transformirano rješenje

Ovo rješenje je najbolje u pogledu izgleda: potreban mu je samo jedan element, a sve ostalo se radi pomoću pseudoelemenata, transformacija i CSS gradijentima. Počnimo s jednostavnim elementom:

Sada pretpostavimo da želimo tortni grafikon koji prikazuje tvrdo kodiranih 20%. Kasnije ćemo raditi na tome da ga učinimo fleksibilnim. Prvo stiliziramo element kao krug, koji će biti naša pozadina (slika 1):

Slika 1 - Naša početna točka (tortni grafikon prikazuje 0%). pita (širina: 100 px; visina: 100 px; radijus granice: 50%; pozadina: žutozelena; )

Naš će tortni grafikon biti zelen (točnije, žutozelen) sa smeđim rezom (#655) koji prikazuje udio kao postotak. Možda ćemo doći u iskušenje da upotrijebimo nagnute transformacije za postotni dio, ali malo eksperimentiranja pokazuje da bi to bilo prilično traljavo rješenje. Umjesto toga, obojat ćemo lijevu i desnu stranu našeg kruga u dvije boje i koristiti rotaciju pseudoelemenata da bismo otkrili samo onaj dio kruga koji nam je potreban.

Da obojimo desnu stranu našeg kruga u smeđu boju, upotrijebit ćemo jednostavan linearni gradijent:

Pozadinska slika: linearni gradijent (desno, prozirno 50%, #655 0); Slika 2 - Bojanje desne strane našeg kruga u smeđu boju jednostavnim linearnim gradijentom

Kao što možete vidjeti na slici 2, to je sve što nam je trebalo. Sada možemo početi stilizirati pseudoelement koji će djelovati kao maska:

Pie::before ( content: ""; display: block; margin-left: 50%; height: 100%; ) Slika 3 - Pseudoelement koji djeluje kao maska ​​ovdje je istaknut točkastim rubom

Na slici 3 možete vidjeti kako ovaj trenutak Naš pseudoelement nalazi se u odnosu na element tortne karte. Sada još nije stiliziran i ne obavlja nikakve funkcije. To je samo nevidljivi pravokutnik. Prije nego što ga počnemo stilizirati, napravimo nekoliko napomena:

• budući da želimo sakriti smeđi dio našeg kruga, moramo primijeniti na pseudo element zelena pozadina, koristeći boju pozadine: naslijediti kako bi se izbjeglo dupliciranje kada mu se daje ista boja pozadine kao roditeljski element;
• želimo da se rotira oko središta kruga, koji je u sredini lijeve strane pseudo-elementa, tako da moramo postaviti transform-origin na 0 50% ili samo lijevo;
• Ne želimo da bude pravokutnik jer bi se protezao izvan rubova tortnog grafikona, pa moramo ili primijeniti overflow: hidden na .pie ili mu dati granični radijus kako bi postao polukrug.

Spajajući sve ovo zajedno, dobivamo sljedeći stil za naš pseudoelement;

Pie::before ( content: ""; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: lijevo; ) Slika 4 - Naš pseudoelement (prikazan s točkastim obrubom) nakon dovršetka oblikovanja

Napomena: Nemojte koristiti background: inherit; umjesto backround-color: inherit;, jer će to također naslijediti gradijent!

Naš tortni grafikon sada izgleda kao Slika 4. Ovdje počinje zabava! Možemo započeti rotirati pseudo-element primjenom rotate() transformacije. Za 20% koje pokušavamo implementirati možemo upotrijebiti vrijednost od 72 stupnja (0,2 × 360 = 72) ili 0,2 okreta, što je čitljivije. Na slici 5 možete vidjeti kako to izgleda za nekoliko drugih vrijednosti.

Slika 5 - Naš jednostavni kružni dijagram prikazuje različite postotke, slijeva nadesno: 10% (36 stupnjeva ili .1 okreta), 20% (72 stupnja ili .2 okretaja), 40% (144 stupnja ili .4 okretaja)

Možda mislite da je posao gotov, ali, nažalost, nije tako jednostavno. Naš je tortni grafikon odličan za prikaz postotaka od 0 do 50%, ali ako pokušamo prikazati rotaciju od 60% (koristeći .6turn), izgledat će kao na slici 6. Ali ne gubite nadu, možemo to popraviti i učinimo to!

Slika 6 - Naš tortni grafikon raščlanjuje se za udjele veće od 50% (ovdje prikazano za 60%)

Ako prikaz udjela 50%-100% smatramo zasebnim problemom, onda možemo vidjeti da za njih možemo koristiti inverznu verziju prethodnog rješenja: smeđi pseudoelement koji se rotira, redom, od 0 do .5turn . Dakle, za 60% udjela kod pseudo elementa bi izgledao ovako:

Pie::before ( content: ""; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background: #655; transform-origin: lijevo ; transform: rotate(.1turn); ) Slika 7 - Naš sada točan tortni grafikon s vrijednošću od 60%

Na slici 7 možete vidjeti kod na djelu. Budući da smo sada razvili način za prikaz bilo kojeg postotka, možemo animirati kružni graf od 0% do 100% sa koristeći CSS animacija, stvarajući neku vrstu indikatora napretka:

@keyframes spin ( to ( transform: rotate(.5turn); ) ) @keyframes bg ( 50% ( background: #655; ) ) .pie::before ( content: ""; display: block; margin-left: 50 %; visina: 100%; radijus obruba: 0 100% 100% 0 / 50%; boja pozadine: nasljeđivanje; porijeklo transformacije: lijevo; animacija: spin 3s linearno beskonačno, bg 6s step-end beskonačno; )

Sve je to lijepo i dobro, ali kako stilizirati višestruke statične tortne grafikone s različitim postocima, što je najviše opći slučaj pomoću dijagrama? U idealnom slučaju, želimo biti u mogućnosti ispisati nešto poput ovoga:

20% 60%

I nabavite dva tortna grafikona, jedan prikazuje 20%, a drugi 60%. Prvo ćemo pogledati kako to možemo učiniti pomoću ugrađenih stilova, a zatim uvijek možemo napisati kratku skriptu za analizu sadržaj teksta i dodajte određene inline stilove za eleganciju koda, enkapsulaciju, mogućnost održavanja i možda najvažnije, pristupačnost.

Poteškoća u kontroliranju postotka tortnog grafikona s ugrađenim stilovima je u tome što je CSS kod koji je odgovoran za postavljanje postotka postavljen na pseudoelement. Kao što već znate, ne možemo postaviti ugrađene stilove na pseudo elemente, pa ćemo morati biti kreativniji.

Napomena: Za korištenje vrijednosti iz spektra boja bez ponavljanja i složene kalkulacije možete koristiti donju metodu. Istu metodu možete koristiti iu drugim slučajevima. Ispod je jednostavan, izolirani primjer korištenja ove metode.

Rješenje dolazi s jednog od najneočekivanijih mjesta. Koristit ćemo animaciju koja je već prikazana, ali koja će biti pauzirana. Umjesto da je izvodimo kao normalnu animaciju, koristit ćemo negativna kašnjenja animacije kako bismo postavili položaj u bilo kojoj točki animacije i tamo ostali. Iznenađen? Da, negativne vrijednosti odgode animacije nisu dopuštene samo u specifikaciji, već su i vrlo korisne u ovakvim slučajevima.

Budući da je naša animacija pauzirana, bit će prikazan samo prvi kadar (određen našim negativna vrijednost animacija-odgoda). Postotak prikazan u tortnom grafikonu bit će jednak postotku koji naše kašnjenje animacije doprinosi ukupnom trajanju. Na primjer, s trenutnim trajanjem od 6 s, potrebna nam je vrijednost odgode animacije od -1,2 s za prikaz udjela od 20%. Kako bismo pojednostavili izračune, postavit ćemo trajanje na 100 s. Imajte na umu da budući da je animacija zauvijek zaustavljena, vrijednost trajanja koju smo postavili nema nikakav drugi učinak.

Posljednje pitanje: animacija se primjenjuje na pseudoelement, ali želimo postaviti inline stil na .pie element. Međutim, iako nema animacije, možemo postaviti animation-delay za njega kao ugrađeni stil i zatim koristiti animation-delay: inherit; za pseudo element. Kad sve ovo stavimo zajedno, naš izgled za tortne grafikone od 20% i 60% izgledao bi ovako:

A CSS kod za ovu animaciju postat će sljedeći (pravila za .pie nisu prikazana jer ostaju ista):

@keyframes spin ( to ( transform: rotate(.5turn); ) ) @keyframes bg ( 50% ( background: #655; ) ) .pie::before ( /* [ostali stilovi nepromijenjeni] */ animacija: spin 50s linearno beskonačno, bg 100s step-end beskonačno; animation-play-state: paused; animation-delay: inherit; )

U ovom trenutku možemo pretvoriti oznake da koriste postotke kao sadržaj, kao što smo izvorno namjeravali, i dodati ugrađene stilove odgode animacije putem jednostavne skripte:

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

Imajte na umu da smo tekst ostavili netaknut jer nam je potreban radi pristupačnosti i jednostavnosti korištenja. Trenutačno naši tortni dijagrami izgledaju kao Slika 8. Moramo sakriti tekst, koji može biti dostupan putem color: transparent, tako da ga je moguće odabrati i ispisati. Za dodatni sjaj, možemo postaviti postotne vrijednosti u središte tortnog grafikona tako da nisu u slučajno mjesto kada ih korisnik pokuša odabrati. Da bismo to učinili potrebno nam je:

Slika 8 - Naš tekst prije nego što ga sakrijemo

• pretvorite vrijednost visine grafikona u visinu linije (ili dodajte vrijednost visine linije jednaku visini, ali to bi bilo besmisleno dupliciranje koda jer bi visina linije bila postavljena na izračunatu vrijednost visine, što je u redu);
• postavite veličinu i položaj pseudoelementa pomoću apsolutnog pozicioniranja tako da ne gura tekst prema dolje;
• dodaj poravnanje teksta: središte; za vodoravno centriranje teksta.

Konačni kod izgleda ovako:

Tortni grafikon (položaj: relativan; širina: 100 px; visina linije: 100 px; radijus granice: 50%; pozadina: žutozelena; pozadinska slika: linearni gradijent (desno, prozirno 50%, #655 0); boja: prozirna ; text-align: center; ) @keyframes spin ( to ( transform: rotate(.5turn); ) ) @keyframes bg ( 50% ( background: #655; ) ) .pie::before ( content: ""; pozicija : apsolutno; vrh: 0; lijevo: 50%; širina: 50%; visina: 100%; radijus obruba: 0 100% 100% 0 / 50%; boja pozadine: nasljeđivanje; izvor transformacije: lijevo; animacija: spin 50s linearno beskonačno, bg 100s step-end beskonačno; animation-play-state: paused; animation-delay: inherit; )

Rješenje temeljeno na SVG-u

SVG je rješenje za mnoge grafički zadaci jednostavniji, a tortni grafikoni nisu iznimka. Međutim, umjesto stvaranja kružnog grafikona pomoću putanja, što bi zahtijevalo složenu matematiku, poslužit ćemo se malim trikom.

Počnimo s krugom:

Sada primijenimo neke osnovne stilove na to:

Krug (ispuna: žutozelena; potez: #655; širina poteza: 30; )

Napomena: kao što znate, ova CSS svojstva također su dostupna kao atributi SVG elementa, što bi moglo biti zgodno ako je prijenos problematičan.

Slika 9 - Naša početna točka: zeleni SVG krug s debelim potezom #655

Naš ocrtani krug možete vidjeti na slici 9. Potez u SVG-u sastoji se od više od samih svojstava poteza i širine poteza. Postoje mnoga druga, manje popularna svojstva povezana s potezima koja vam omogućuju fino podešavanje njihovog izgleda. Jedan od njih je stroke-dasharray, dizajniran za stvaranje točkastih poteza. Na primjer, mogli bismo ga koristiti za ovo:

Stroke-dasharray: 20 10; Slika 10 - Jednostavan točkasti potez stvoren pomoću stroke-dasharray

To znači da želimo crtice duljine 20 s razmacima duljine 10, poput onih prikazanih na slici 10. U ovom trenutku, mogli biste se iznenaditi da ovaj SVG primjer ima nešto zajedničko s kružnim grafikonima. Ali stvari postaju jasnije kada primijenimo crtu s duljinom crtice od 0 i razmacima dužim ili jednakim opsegu našeg kruga (C = 2πr, ili u našem slučaju C = 2π × 30 ≈ 189):

Stroke-dasharray: 0 189; Slika 11 - Nekoliko stroke-dasharray vrijednosti i njihov rezultat; slijeva na desno: 0 189 ; 40 189; 95 189; 150 189

Kao što možete vidjeti u prvom krugu na slici 11, ovo potpuno uklanja potez i ostaje nam samo zeleni krug. Međutim, zabava počinje kada počnemo povećavati prvu vrijednost (Slika 11): zbog tako velikog razmaka više nećemo dobiti točkasti potez, ali potez koji pokriva postotak opsega kruga koji smo odredili.

Možda ste već shvatili kamo smo krenuli: ako dovoljno smanjimo radijus našeg kruga tako da ga u potpunosti prekrije obris, dobit ćemo nešto što jako liči na tortni grafikon. Na primjer, na slici 12 možete vidjeti kako bi to izgledalo kada bi se primijenilo na krug polumjera 25 i širine poteza 50:

Slika 12 - Naša SVG slika počinje nalikovati kružnom grafikonu

Zapamtite: SVG potezi uvijek su pola unutar, a pola izvan elementa na koji se primjenjuju. U budućnosti ćemo moći kontrolirati ovo ponašanje.

krug ( ispuna: žutozelena; potez: #655; širina poteza: 50; potez-dasharray: 60 158; /* 2π × 25 ≈ 158 */ )

Sada je pretvaranje ove slike u tortni grafikon poput onih koje smo stvorili u prethodnom rješenju vrlo jednostavno: samo trebate dodati veći zeleni krug ispod poteza i zakrenuti ga za 90° u smjeru suprotnom od kazaljke na satu tako da počinje na vrhu u sredini. Budući da je element također HTML element, možemo ga jednostavno stilizirati:

Svg (transformacija: rotacija(-90deg); pozadina: žutozelena; granični radijus: 50%; ) Slika 13 - Konačni tortni grafikon sa SVG

Konačni rezultat možete vidjeti na slici 13. Ova metoda također ima lakša animacija tortni grafikon od 0% do 100%. Samo trebamo stvoriti CSS animaciju koja mijenja stroke-dasharray s 0 158 na 158 158:

@keyframes fillup ( to ( stroke-dasharray: 158 158; ) ) krug ( fillup: yellowgreen; stroke: #655; stroke-width: 50; stroke-dasharray: 0 158; animacija: fillup 5s linear infinite; )

Kao dodatno poboljšanje, možemo postaviti određeni radijus kruga tako da njegov opseg bude (beskonačno blizu) 100, i tako možemo odrediti duljine stroke-dasharray kao postotke bez ikakvih izračuna. Budući da je opseg kruga 2πr, potreban nam je radijus od 100 ÷ 2π ≈ 15.915494309, koji se za naše potrebe može zaokružiti na 16. Također ćemo umjesto toga postaviti dimenzije SVG-a u atributu viewBox atributi širine i visinu kako biste promijenili veličinu prema veličini spremnika.

Nakon ovih izmjena, izgled tortnog grafikona prikazanog na slici 13 postat će sljedeći:

I CSS će postati ovakav:

Svg (width: 100px; height: 100px; transform: rotate(-90deg); background: yellowgreen; border-radius: 50%; ) krug ( fill: yellowgreen; stroke: #655; stroke-width: 32; stroke-dasharray : 38.100; /* za 38% */ )

Primijetite kako je sada jednostavno promijeniti postotak. Iako čak i uz ovo pojednostavljenje, ne želimo ponavljati sve te SVG oznake za svaki tortni grafikon. Vrijeme je da nam JavaScript pomogne s malo automatizacije. Napisat ćemo malu skriptu koja će biti jednostavna HTML označavanje kao ovo...

20% 60%

I dodajte ugrađeni SVG unutar svakog elementa.pita sa svim potrebni elementi i atributi. Također će dodati element pristupačnosti kako bi korisnici čitači zaslona mogli saznati koji su postoci prikazani. Konačna skripta će izgledati ovako:

$$(".pie").forEach(function(pie) ( var p = parseFloat(pie.textContent); var NS = "http://www.w3.org/2000/svg"; var svg = dokument. createElementNS(NS, "svg"); var circle = document.createElementNS(NS, "circle"); var title = document.createElementNS(NS, "title"); circle.setAttribute("r", 16); krug. 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(title); svg.appendChild(krug); pie.appendChild(svg); ));

Evo ga! Mogli biste to pomisliti CSS metoda bolji jer je njegov kod jednostavniji i poznatiji. Međutim, SVG metoda ima određene prednosti prije čistog CSS rješenja:

• Lakše je dodati treću boju: samo dodajte još jedan iscrtani krug i pomaknite njegov potez koristeći stroke-dashoffset. Ili dodajte duljinu njegovog poteza duljini poteza prethodnog kruga prije (ispod) njega. Kako točno dodati treću boju tortnom grafikonu stvorenom prvom metodom?
• ne moramo ulagati nikakav dodatni napor u ispis jer se SVG elementi tretiraju kao sadržaj i ispisuju kao elementi . Prvo rješenje ovisi o pozadini i stoga neće biti ispisano;
• možemo mijenjati boje pomoću ugrađenih stilova, što znači da ih možemo jednostavno mijenjati kroz skripte (tj. na temelju korisničkog unosa). Prvo rješenje se oslanja na pseudo-elemente, koji ne mogu prihvatiti ugrađene stilove osim putem nasljeđivanja, što nije uvijek zgodno.
pozadina: conic-gradient(#655 attr(data-value %), yellowgreen 0);

Također čini nevjerojatno lakim dodavanje treće boje. Na primjer, za tortni grafikon, slično dijagramu iznad, jednostavno bismo dodali još dva graničnika u boji:

Pozadina: stožasti gradijent (duboružičasta 20%, #fb3 0, #fb3 30%, žutozelena 0);

To je sve! Ostavite komentare!

Vjerojatno ste vidjeli takve indikatore učitavanja, posebno na Flash stranicama. Ovo je dio kruga koji postaje sve veći i veći dok ne postane potpuni krug.

Na prvi pogled zadatak se čini jednostavan: napravite krug, zarotirajte ga i sakrijte dio iza maske. Ali u stvarnosti sve se ispostavlja nešto kompliciranije. CSS nije spreman za rješavanje takvih zadataka, čak ni kada koristi predprocesore kao što su SASS & Compass. Uvijek se mučimo kada moramo napraviti različite oblike, a posebno kada određujemo stilove i animacije za njih. Na to trošim većinu svog radnog vremena. da bi nešto radilo, žrtvuje se semantika koda i njegova podrška.

Zašto to radimo?

Najvjerojatnija upotreba takvih elemenata su mjerači vremena. Ali ovaj koncept može se koristiti za izradu kružnog grafikona samo sa CSS-om.

Iako postoje neki nevjerojatni alati dostupni za manipuliranje tortnim grafikonima (uglavnom u JavaScriptu), i dalje ćemo napraviti takav element koristeći samo CSS i čak ga animirati uz nekoliko trikova.

Semantika koda će biti tako-tako! Ali pratnja se može učiniti prilično zgodnom.

HTML

Potrebna su nam 3 različita elementa:

• spinner: polovica kruga koji će se vrtjeti;
• maska: ovaj element skriva krug koji se vrti tijekom prvih 50% animacije;
• punilo: Ovaj element ispunjava krug tijekom zadnjih 50% animacije.

I sva tri elementa moraju imati istog roditelja za apsolutno pozicioniranje:

Budući da su spinner i filler dvije polovice istog kruga, za njih ćemo koristiti klasu .pie.

CSS

Roditeljski element dobiva dimenzije i apsolutno pozicioniranje kontekst za tajmer:

Omotač (širina: 250 px; visina: 250 px; položaj: relativan; pozadina: bijela; )

Važno je da su širina i visina jednake da dobijete krug i sve funkcionira.

Elementi "spinner" i "filler" koriste ovaj kod CSS:

Tortni dijagram (širina: 50%; visina: 100%; pozicija: apsolutna; pozadina: #08C; obrub: 10px čvrsti rgba(0,0,0,0.4); )

Njihova širina je jednaka 50% nadređenog elementa, tako da su dva dijela jednog kruga, a visina im je jednaka visini nadređenog elementa. Također im definiramo istu boju i okvir.

"spinner" element

Spinner (radijus granice: 125px 0 0 125px; z-index: 200; granica-desno: ništa; animacija: rota 10s linearno beskonačno; )

Neka bude polukrug pomoću svojstva border-radius u gornjem lijevom i donjem lijevom kutu. Također definiramo pozitivnu vrijednost za z-indeks kako bismo ga postavili na vrh elementa za popunjavanje, ali ispod maske.

Zatim dodajte animaciju u trajanju od 10 sekundi. O animaciji ćemo kasnije.

element "punilo".

Ispuna (radijus obruba: 0 125 px 125 px 0; z-indeks: 100; obrub lijevo: ništa; animacija: ispuni 10 s koraka (1, kraj) beskonačno; lijevo: 50%; neprozirnost: 0; )

Za ovog elementa postaviti border-radius i z-index, ukloniti border-left i napraviti animaciju od 10 sekundi. Za dati element, animation-timing-function ne postaje linearna, već steps(1, end) . To znači da će se animacija odmah izvršiti.

Budući da element ispune ne bi trebao biti vidljiv tijekom prve polovice animacije, njegova neprozirnost bit će 0, a njegov će položaj biti 50% širine nadređenog elementa.

element "maske".

Maska (širina: 50%; visina: 100%; pozicija: apsolutna; z-indeks: 300; neprozirnost: 1; pozadina: naslijediti; animacija: maska ​​10 s koraka (1, kraj) beskonačno; )

Maska je prisutna od početka animacije, tako da je njezina neprozirnost postavljena na 1, a pozadina je naslijeđena od nadređenog elementa (pa je nevidljiva). Kako bi se pokrio rotirajući element, on će imati iste dimenzije, a svojstvo z-index bit će postavljeno na 300.

Okviri za animaciju

@keyframes rota ( 0% ( transform: rotate(0deg); ) 100% ( transform: rotate(360deg); ) ) @keyframes fill ( 0% ( neprozirnost: 0; ) 50%, 100% ( neprozirnost: 1; ) ) Maska @keyframes ( 0% ( neprozirnost: 1; ) 50%, 100% ( neprozirnost: 0; ) )

Prva animacija (rotacija) koristi se za element spinner. Postupno se okreće od 0 do 360 stupnjeva u 10 sekundi.

Druga animacija (ispuna) koristi se za element popune. Odmah mijenja neprozirnost s 0 na 1 nakon 5 sekundi.

Posljednja animacija (maska) koristi se za element maske. Odmah mijenja neprozirnost s 1 na 0 nakon 5 sekundi.

Animacija izgleda ovako:

• T0 - spinner element s lijeve strane, skriven maskom. Element za punjenje je skriven.
• T1 - element vrtnje počinje se okretati u smjeru kazaljke na satu i polako se pojavljuje iza maske.
• T2 - element vrtilice r je zakrenut pod kutom od 360/10*2 = 72° i nastavlja se okretati.
• T3 - element spinnera je zakrenut pod kutom od 360/10*3 = 108° i nastavlja se okretati.
• T4 - element spinnera je zakrenut pod kutom od 360/10*4 = 144° i nastavlja se okretati.
• T5 - element spinnera je zakrenut pod kutom od 360/10*5 = 180° i nastavlja se okretati. U ovom trenutku element za punjenje odmah postaje vidljiv, a maska ​​je skrivena.
• T6 - element vrtilice je zakrenut pod kutom od 360/10*6 = 216° i nastavlja se okretati.
• T7 - element vrtilice je zakrenut pod kutom od 360/10*7 = 252° i nastavlja se okretati.
• T8 - element spinnera je zakrenut pod kutom od 360/10*8 = 288° i nastavlja se okretati.
• T9 - element spinnera je zakrenut pod kutom od 360/10*9 = 324° i dalje se okreće.
• T10 - element spinera je zakrenut za 360°. Vratili smo se na početnu točku. Ponovno postavljamo animaciju. Pojavljuje se maska, a element ispune je skriven.

Bonus

Nekoliko dodatnih trikova.

Pauza pri lebdenju

Wrapper:hover .filler, .wrapper:hover .spinner, .wrapper:hover .mask ( animation-play-state: paused; )

Pomoću ovog koda možete zaustaviti sve animacije kada prijeđete pokazivačem iznad nadređenog elementa.

Umetanje sadržaja

Zahvaljujući svojstvu z-index, možemo jednostavno dodati nešto sadržaja spinner elementu i natjerati ga da se vrti. Pokušajte sa sljedećim kodom:

Spinner:after ( content: ""; pozicija: apsolutna; širina: 10px; visina: 10px; radijus granice: 50%; vrh: 10px; desno: 10px; pozadina: #fff; granica: 1px solid rgba(0,0) ,0,0.4); box-shadow: umetnuti 0 0 3px rgba(0,0,0,0.2); )

Pretprocesor odn CSS varijable

Trenutno je kod vrlo teško održavati. Ali ako koristimo varijable (u predprocesoru ili očekivane interne CSS varijable), stvari mogu postati znatno jednostavnije. Na primjer, možete dodati varijable za kontrolu trajanja umjesto da morate uređivati ​​kod u 3 definicije animacije.

Ako želite poboljšati mogućnost održavanja koda bez upotrebe pretprocesora, možete stvoriti klasu s jednom kontrolom trajanja animacije i dodati je u 3 podređena elementa. Na primjer ovako:

Trajanje animacije ( trajanje animacije: 10s; )

Mane

Ova tehnika ima brojne nedostatke:

• Gradijenti nisu podržani.
• Sjene nisu podržane.
• Nema prilagodljivosti. Ako se veličina nadređenog elementa promijeni, tada će sve biti u redu, osim polumjera zakrivljenosti okvira. Morat će se promijeniti ručno.
• Nema semantike (4 elementa za jednu animaciju).

Podrška za preglednik

Budući da koristimo CSS animacije, tada je podrška u preglednicima prilično oskudna:

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

• Prijevod
• Tutorial

Obrasci su dobar način da elementima na vašoj web-stranici dodate štih. Krugovi su posebno dobri u tom smislu jer su kohezivni, jednostavni i poput pita. Sada ozbiljno, tko ne voli pitu?

Kao što ste mogli primijetiti iz vlastitog dugogodišnjeg iskustva korištenja interneta, većina elemenata na web stranicama zapravo su kvadrati ili pravokutnici. Stoga, u nekim slučajevima, zanimljivi elementi poput krugova i trokuta u vašem dizajnu mogu biti vrlo korisni. Ovaj će vodič pokazati kako izraditi animirani tortni grafikon poput onih koje obično vidite na stranicama s portfeljima. To može pomoći u vizualnom isticanju vaših vještina, kao i pokazati s kojim zadacima se možete nositi. Pogledajte demo kako biste vidjeli konačni rezultat.

Dakle, počnimo! Prilikom pisanja ovog vodiča radit ću s Circlifulom. Slobodno je jQuery dodatak otvoreni izvor. Glavnu datoteku možete preuzeti s Githuba. Uključuje .js datoteku zajedno s odgovarajućim CSS tablica stilovi. Stranica mora sadržavati oboje kako bi se postigao efekt kruga.

Statistika animiranog kruga - demonstracija čudovišta predloška

Moja stranica sadrži sličnu tablicu stilova styles.css za moje osobne CSS stilovi. Također morate napraviti kopiju jQuery biblioteke. Neophodno je da dodatak radi ispravno.
Samu stranicu je prilično lako strukturirati. Kružni elementi sadržani su unutar div oznaka koje koriste HTML5 atribute za manipuliranje podacima. Alternativno, mogu se pohraniti u jQuery funkcije, ali ako želite bolju kontrolu nad svakim elementom, onda je lakše raditi u HTML-u.

Photoshop ilustrator After Effects

Ovo je kopija prvog reda krugova koji se sastoji od 3 animirane jedinice. Svi ovi atributi podataka dodatno su objašnjeni u dokumentaciji dodatka. Svaki predstavlja opciju koja određuje učinak animacije. citiram ispod Kratki opis opcije koje koristim:

• data-dimension – ukupna veličina širine/visine kruga;
• data-text – tekst koji se pojavljuje u središtu svakog kruga;
• data-width – debljina rotirajućeg podatkovnog luka;
• data-fontsize – centriran veličina fonta teksta;
• data-percent – ​​broj od 0-100 koji prikazuje postotak u vašem krugu;
• data-fgcolor – boja prvi plan krug;
• data-bgcolor – boja pozadine kruga;
• data-fill – ispunjava boju pozadine unutarnjeg kruga.

CSS izgled stranice Ne inzistiram da izravno uredite jquery.circliful.css, osim ako ne želite prilagoditi dodatak. Većina boja može se promijeniti izravno iz atributa podataka HTML5, a ako stvarno želite prebrisati bilo koji od stilova Kružno, preporučio bih da to učinite u vlastitoj tablici stilova.
Rekavši vam ovo, stvorio sam vlastitu tablicu stilova za ovog projekta, a ne prepisivati ​​stilove Kružno. Sama web stranica treba zadani izgled, koji je doista lako dizajnirati. Područje sadržaja centrirano je u malom dijelu za tortni grafikon. Svako područje slobodno pluta unutar spremnika retka unutar izvornog #stats div.

/** struktura stranice **/ .wrap ( display: block; margin: 0 auto; max-width: 800px; ) #intro ( display: block; margin-bottom: 25px; text-align: center; ) #intro p (veličina fonta: 1.8em; visina linije: 1.35em; boja: #616161; stil fonta: kurziv; margina-dno: 25px; ) #stats (prikaz: blok; širina: 100%; ispuna: 15px 0; pozadina: #f8f8f8; border-top: 4px solid #c3c3c3; border-bottom: 4px solid #c3c3c3; ) #stats .row ( display: block; ) .circle-container ( display: block; float: lijevo; margin-desno : 55px; margin-bottom: 45px; ) .circle-container h3 ( display: block; text-align: center; font-size: 2.25em; line-height: 1.4em; color: #363636; text-shadow: 1px 1px 0 #fff; )

Unutar svakog odjeljka sadržaj se nalazi unutar .wrap diva kako bi ostao centriran. Također, kružni elementi koji se slobodno kreću trebaju dodatni spremnik .clearfix kako bi se osiguralo da sve ostane ispravno poravnato.

/** clearfix **/ .clearfix:after ( sadržaj: "."; prikaz: blok; jasno: oboje; vidljivost: skriveno; visina linije: 0; visina: 0; ) .clearfix ( prikaz: inline-blok; ) html .clearfix ( prikaz: blok; ) * html .clearfix ( visina: 1%; )

Ova klasa clearfix godinama je poznata kao rješenje za spremnik sa slobodno pokretnim elementima. Obično se uklanjaju iz teksta dokumenta i njihova izvorna širina/visina se ne zadržava. Ali ovo održava širinu #stats spremnika konstantnom i ostavlja mjesta za više sadržaj koji će se nalaziti niže na stranici.

Završne obrade Dakle, umijesili smo tijesto, napunili kalup za pitu, stavili ga u pećnicu i gotovo smo spremni za uzimanje uzorka. Ako sve izgleda dovoljno dobro, koji je posljednji korak? Trebamo jQuery kod za ukrašavanje ovog projekta.
Otvorite novu oznaku skripte na dnu ovoga HTML stranice. Sadržavat će mali dio JavaScripta. Budući da sam upotrijebio sve HTML5 atribute podataka, ne moramo pozivati ​​opcije jQuery. Skripta samo treba pokrenuti funkciju Kružno na svakom krugu div. Korištenje duplikata naziva klase kao što je .circlestat čini proces vrlo jednostavnim.

$(funkcija())( $(".circlestat").circliful(); ));

Za one koji nisu upoznati sa strukturom jQuery sintakse, dat ću kratak opis. Nakon učitavanja dokumenta pokrećemo novu funkciju. Naš interni cilj je svaki element koji koristi klasu .circlestat i pokreće funkciju circliful(). Ovo vodi dodatak Kružno, koji stvara efekte animacije u akciju i primjenjuje dodatni sadržaj/boje.

Ne mogu reći da će ti krugovi uvijek biti tu najbolje rješenje. Vidio sam puno portfelja koji su se temeljili na riječima i brojevima, ali ne i na samom radu. Razmislite o korištenju ovih krugova u rijetkim prilikama i pokušajte ih posuditi za druge svrhe izvan jednostavnih vještina. Vaše statistike ne moraju se mjeriti u postocima - one mogu pokazati koliko godina poslujete, ukupan broj projekata koje imate ili druge slične brojeve. Možete preuzeti besplatnu kopiju mog vodiča i eksperimentirati s kodom kako bi bolje odgovarao vašim projektima.

Za front-end programere postoji veliki iznos načini na koje možete izgraditi tortni grafikon - razne biblioteke, dodaci, nevjerojatne značajke SVG grafika itd. Međutim, možda je vrijedno razmotriti najjednostavniji način za izradu "tortnog" grafikona, koji može biti koristan kada je zadatak postavljen što jednostavnije i nema potrebe ili prilike za korištenje dodatni alati. Zatim ćemo govoriti o primjeru takve implementacije.

Pretpostavimo da imamo izvorne podatke u obliku polja koje je potrebno prikazati na kružnom grafikonu:

Var skup podataka = [ ( vrijednost: 5, boja: "#dc3912" ), ( vrijednost: 40, boja: "#ff9900" ), ( vrijednost: 30, boja: "#109618" ), ( vrijednost: 25, boja: "#990099" ) ];

vrijednost je postotna vrijednost, boja je boja sektora.

Prvo, kreirajmo spremnik koji će postati krug dijagrama i sadržavat će elemente sektora:

Dodijelimo mu i stilove:

Spremnik (širina: 300 px; visina: 300 px; preljev: skriven; radijus granice: 50%; položaj: relativan; )

Rezultat je ovakav krug. Sve što izlazi izvan njegovih granica (prikazano kao isprekidana linija) bit će skriveno.

Zatim se prirodno postavlja pitanje - kako transformirati pravokutnik div elementi na sektore kruga i kako im postaviti željeni kut? Zapravo, za prvu svrhu, svojstvo overflow:hidden postavljeno je na spremnik, jer to nam omogućuje da sakrijemo dio elementa, čineći ga zaobljenim, a za drugi će nam pomoći CSS transformacije. Ispod je primjer za jedan sektor.

Dodajmo div sa sektorskom klasom unutar spremnika.

CSS:

Sektor ( širina: 50%; visina: 50%; pozicija: apsolutna; lijevo: 50%; vrh: 0; transformacija-ishodište: lijevo dolje; pozadina: #000; )

Dakle, imamo sektor s vrijednošću od 90 stupnjeva, počevši od 0 stupnjeva.

Kako biste postavili željeni kut za ovaj sektor, primijenite skewY CSS transformaciju. Ova transformacija pomiče desni rub kvadrata duž y osi tako da nastaju vodoravni rubovi navedeni kut s izvornim položajem:

Vrijednost u prvom elementu niza skupa podataka je 5, pretvarajući se u stupnjeve, dobivamo 18. Da bi se nagib dogodio u željenom smjeru, dodat ćemo 90 stupnjeva svim kutovima.

Dakle, kut transformacije = 90 + 18 = 108.

transformacija: skewY(108deg);

Za rotaciju za zadani kut koristit ćemo rotacijsku transformaciju. Važno je da se prvo primijeni transformacija rotacije, a tek onda transformacija nagiba.

Transformacija: rotacija (45 stupnjeva) skewY (108 stupnjeva);

Ova metoda ima jedan nedostatak - kao što se može vidjeti na slici koja prikazuje vrijednosti skewY transformacije, na ovaj način možete ispravno prikazati sektore čija vrijednost nije veća od 90 stupnjeva. Stoga, da biste prikazali vrijednosti veće od 90, morat ćete nacrtati nekoliko sektora iste boje. Na primjer, ako je vrijednost kuta 100 stupnjeva, prikazat ćemo 2 sektora: 90 stupnjeva i 10. Ako je vrijednost 200 stupnjeva, dobit ćemo 3 sektora - 90, 90 i 20 stupnjeva svaki, itd.

Kao rezultat toga, dobivamo sljedeći kod za dinamičko dodavanje sektora:

Var maxValue = 25; var kontejner = $(".kontejner"); var addSector = function(data, startAngle, collapse) ( var sectorDeg = 3.6 * data.value; var skewDeg = 90 + sectorDeg; var rotateDeg = startAngle; if (collapse) ( skewDeg++; ) var sector = $("", ( "class": "sector" )).css(( "background": data.color, "transform": "rotate(" + rotateDeg + "deg) skewY(" + skewDeg + "deg)" )); kontejner. dodati(sektor); vratiti startAngle + sektorDeg; ); dataset.reduce(function (prev, curr) ( return (function addPart(data, angle) ( if (data.value)