Share
Ingenting på nettet skjer umiddelbart. Den eneste forskjellen er i tiden det tar for en prosess å fullføre. Noen prosesser kan skje om noen få millisekunder, mens andre kan ta opptil flere sekunder eller minutter. For eksempel kan du redigere et veldig stort bilde lastet opp av brukerne, og denne prosessen kan ta litt tid. I slike tilfeller er det en god ide å la besøkende vite at nettsiden ikke sitter fast et sted, men det fungerer faktisk på bildet ditt og gjør litt fremgang.
En av de vanligste måtene å vise leserne hvor mye prosessen har utviklet seg er å bruke fremdriftsfelt. I denne opplæringen lærer du hvordan du bruker ProgressBar.js-biblioteket til å lage forskjellige fremdriftslinjer med enkle og komplekse former.
Når du har tatt med biblioteket i prosjektet ditt, er det enkelt å lage en fremdriftslinje ved hjelp av dette biblioteket. ProgressBar.js støttes i alle de store nettleserne, inkludert IE9 +, som betyr at du kan bruke den på et hvilket som helst nettsted du oppretter med selvtillit. Du kan få den nyeste versjonen av biblioteket fra GitHub eller direkte bruke en CDN-lenke for å legge den til i prosjektet.
For å unngå uventet oppførsel, må du kontrollere at beholderen på fremdriftslinjen har samme størrelsesforhold som fremdriftslinjen. I tilfelle av en sirkel bør aspektforholdet til beholderen være 1: 1 fordi bredden vil være lik høyden. I tilfelle av en halvcirkel bør aspektforholdet til beholderen være 2: 1 fordi bredden vil være dobbelt høyde. På samme måte, i tilfelle av en enkel linje, bør beholderen ha et aspektforhold på 100: strokeWidth for linjen.
Når du lager fremdriftsfelt med en linje, sirkel eller halvcirkel, kan du bare bruke ProgressBar.Shape () metode for å lage fremdriftslinjen. I dette tilfellet er det Form kan være en Sirkel, Linje, eller Halvsirkel. Du kan sende to parametere til Form() metode. Den første parameteren er en velger eller DOM-node for å identifisere beholderen i fremdriftslinjen. Den andre parameteren er et objekt med nøkkelverdier som bestemmer fremvisningen av fremdriftslinjen.
Du kan angi fargen på fremdriftslinjen ved hjelp av farge eiendom. Enhver fremdriftslinje som du oppretter, vil ha en mørk grå farge som standard. Tykkelsen på fremdriftslinjen kan spesifiseres ved hjelp av strokeWidth eiendom. Du bør huske på at bredden her ikke er i piksler, men i prosent av lerretets størrelse. For eksempel, hvis lerretet er 200px bredt, a strokeWidth verdien på 5 vil skape en linje som er 10 px tykk.
I tillegg til hovedlinjens fremdriftslinje kan biblioteket også tegne en baklinje som vil vise leserne banen der fremdriftslinjen vil bevege seg. Fargene på stien kan spesifiseres ved hjelp av trailColor eiendom, og dens bredde kan spesifiseres ved hjelp av trailWidth eiendom. Akkurat som strokeWidth, de trailWidth Eiendommen beregner også bredden i prosent.
Den totale tiden som fremdriftslinjen tar for å gå fra sin opprinnelige tilstand til sin endelige tilstand, kan spesifiseres ved hjelp av varighet eiendom. Som standard vil en fremdriftslinje fullføre animasjonen på 800 millisekunder.
Du kan bruke lettelser egenskap for å angi hvordan en fremdriftslinje skal bevege seg under animasjonen. Alle fremdriftslinjer vil bevege seg med a lineær hastighet som standard. For å gjøre animasjonen mer tiltalende, kan du sette denne verdien til noe annet som easeIn, easeOut, easeInOut, eller sprette.
Etter å ha angitt de innledende parameterverdiene, kan du animere fremdriftslinjene ved hjelp av animere () metode. Denne parameteren godtar tre parametere. Den første parameteren er hvor mye du vil animere fremdriftslinjen. De to andre parametrene er valgfrie. Den andre parameteren kan brukes til å overstyre alle animasjonsegenskapsverdier du angir under initialiseringen. Den tredje parameteren er en tilbakeringingsfunksjon for å gjøre noe annet når animasjonen avsluttes.
I det følgende eksemplet har jeg opprettet tre forskjellige fremdriftsfelt ved å bruke alle egenskapene vi har diskutert hittil.
Accentsconagua
var lineBar = ny ProgressBar.Line ('# line-container', color: 'orange', strokeWidth: 2, trailWidth: 0.5); lineBar.animate (1, varighet: 1000); var circleBar = ny ProgressBar.Circle ('# circle-container', color: 'white', strokeWidth: 2, trailWidth: 10, trailColor: 'black', easing: 'easeInOut'); circleBar.animate (0.75, duration: 1500); var semiBar = ny ProgressBar.SemiCircle ('# semi-container', color: 'violet', strokeWidth: 2, trailWidth: 0.5, easing: 'bounce'); semiBar.animate (1, varighet: 3000);Det eneste som endres med animasjonen av fremdriftsfeltene i eksemplet ovenfor, er deres lengde. Imidlertid tillater ProgressBar.js deg også å endre andre fysiske attributter som strekkbreddenes bredde og farge. I slike tilfeller må du angi startverdiene for fremdriftslinjen i fra parameter og sluttverdiene inne i til parameter når du initialiserer fremdriftslinjene.
Du kan også fortelle biblioteket å lage et tilhørende tekstelement med fremdriftslinjen for å vise litt tekstinformasjon til brukerne. Teksten kan være alt fra en statisk verdi til en numerisk verdi som indikerer utviklingen av animasjonen. De tekst parameteren vil akseptere et objekt som dets verdi.
Dette objektet kan ha en verdi parameter for å spesifisere den opprinnelige teksten som skal vises inne i elementet. Du kan også gi et klassenavn som skal legges til tekstelementet ved hjelp av klassenavn parameter. Hvis du vil bruke noen inline-stiler til tekstelementet, kan du angi dem alle som en verdi av stil parameter. Alle standardstilene kan fjernes ved å sette verdien av stil til null. Det er viktig å huske at standardverdiene bare gjelder hvis du ikke har angitt en egendefinert verdi for en hvilken som helst CSS-egenskap inni stil.
Verdien inne i tekstelementet vil forbli den samme under hele animasjonen hvis du ikke oppdaterer det selv. Heldigvis gir ProgressBar.js også en skritt parameter som kan brukes til å definere en funksjon som skal kalles med hvert animasjonstrinn. Siden denne funksjonen blir kalt flere ganger hvert sekund, må du være forsiktig med bruk og holde beregningene inne i det enkle.
var lineBar = ny ProgressBar.Line ("# line-container", strokeWidth: 4, trailWidth: 0.5, fra: color: "# FF9900", til: color: "# 00FF99", tekst: value : '0', className: 'progress-text', stil: farge: 'svart', posisjon: 'absolutt', topp: '-30px', polstring: 0, margin: 0, transform: null : (tilstand, form) => shape.path.setAttribute ("slag", state.color); shape.setText (Math.round (shape.value () * 100) + '%');); lineBar.animate (1, varighet: 4000); var circleBar = ny ProgressBar.Circle ("# sirkelbeholder", color: "white", strokeWidth: 2, trailWidth: 25, trailColor: "black", lettelse: "easeInOut", fra: color: "# FF9900 ", bredde: 1 til: farge:" # FF0099 ", bredde: 25, tekst: verdi: '0', klassenavn: 'fremgangstekst' 'absolutt', topp: '45% ', venstre: '42%', polstring: 0, margin: 0, transform: null, trinn: (tilstand, form) => shape.path.setAttribute ", state.color); shape.path.setAttribute (" slagbredde ", state.width); shape.setText (Math.round (shape.value () * 100) + '%');); circleBar.animate (0.75, duration: 1500); var semiBar = ny ProgressBar.SemiCircle ("# semi-container", color: "violet", strokeWidth: 2, trailWidth: 8, trailColor: "black", lettelse: "sprette", fra: color: "# FF0099 ", bredde: 1 til: farge:" # FF9900 ", bredde: 2, tekst: verdi: '0', klassenavn: 'fremgangstekst', stil: farge: 'svart' 'absolut', topp: '45% ', venstre: '50%', polstring: 0, margin: 0, transform: null, trinn: (tilstand, form) => shape.path.setAttribute ", state.color); shape.path.setAttribute (" slagbredde ", state.width); shape.setText (Math.round (shape.value () * 100) + '%');); semiBar.animate (0,75, varighet: 2000); Noen ganger kan det være lurt å lage fremdriftsfelt med forskjellige former som samsvarer med det overordnede temaet for nettstedet ditt. ProgressBar.js lar deg lage fremdriftsfelt med tilpassede figurer ved hjelp av Sti() metode. Denne metoden fungerer som Form() men gir færre parametere for å tilpasse fremdriftslinjens animasjon. Du kan fortsatt gi en varighet og lettelser verdi for animasjonen. Hvis du vil animere fargen og bredden på slaget som brukes til å tegne den tilpassede banen, kan du gjøre det inne i fra og til parametere.
Biblioteket gir ingen måte å tegne en sti for den tilpassede banen, som det gjorde for enkle linjer og sirkler. Du kan imidlertid lage stien selv ganske enkelt. I følgende eksempel har jeg opprettet en trekantet fremdriftslinje ved hjelp av Sti() metode.
Før du skriver JavaScript-koden, må vi definere vår egendefinerte SVG-bane i HTML. Her er koden jeg pleide å lage en enkel trekant:
Du har kanskje lagt merke til at jeg opprettet to forskjellige veielementer. Den første stien har en lysegrå farge som virker som stien vi så med enkle fremdriftsfelt i den forrige delen. Den andre banen er den som vi animerer med vår kode. Vi har gitt det en id som brukes til å identifisere det i JavaScript-koden nedenfor.
var-sti = ny ProgressBar.Path ("# triangel", varighet: 6000, fra: farge: "# ff0000", bredde: 2, til: farge: "# 0099ff", bredde: 10, strekkbredde: 4, lette: "easyInOut", trinn: (tilstand, form) => shape.path.setAttribute ("slag", state.color); shape.path.setAttribute ("slagbredde", state.width); ); path.animate (1); Som du så i denne opplæringen, gjør ProgressBar.js det enkelt å lage forskjellige typer fremdriftslinjer. Det gir deg også muligheten til å animere forskjellige attributter av fremdriftslinjen som bredden og fargen.
Ikke bare det, men du kan også bruke dette biblioteket til å endre verdien av et tilhørende tekstelement for å vise fremdriften i tekstform. Denne opplæringen dekker alt du trenger å vite for å lage enkle fremdriftslinjer. Du kan imidlertid gå gjennom dokumentasjonen for å lære mer om biblioteket.
.
