Share
Niets op het web gebeurt direct. Het enige verschil is de tijd die nodig is om een proces te voltooien. Sommige processen kunnen binnen enkele milliseconden plaatsvinden, terwijl andere enkele seconden of minuten kunnen duren. U kunt bijvoorbeeld een zeer grote afbeelding bewerken die is geüpload door uw gebruikers, en dit proces kan enige tijd duren. In dergelijke gevallen is het een goed idee om de bezoekers te laten weten dat de website ergens niet vastzit, maar het werkt in feite aan uw imago en maakt enige vooruitgang.
Een van de meest gebruikelijke manieren om lezers te laten zien hoe ver een proces is gevorderd, is door voortgangsbalken te gebruiken. In deze zelfstudie leert u hoe u de bibliotheek ProgressBar.js gebruikt om verschillende voortgangsbalkjes te maken met eenvoudige en complexe vormen.
Nadat u de bibliotheek in uw project hebt opgenomen, is het maken van een voortgangsbalk met deze bibliotheek eenvoudig. ProgressBar.js wordt ondersteund in alle belangrijke browsers, inclusief IE9 +, wat betekent dat u het met vertrouwen kunt gebruiken op elke website die u aan het maken bent. Je kunt de nieuwste versie van de bibliotheek downloaden via GitHub of rechtstreeks een CDN-link gebruiken om deze in je project toe te voegen.
Om onverwacht gedrag te voorkomen, moet u ervoor zorgen dat de container van de voortgangsbalk dezelfde beeldverhouding heeft als de voortgangsbalk. In het geval van een cirkel moet de beeldverhouding van de container zijn 1: 1 omdat de breedte gelijk is aan de hoogte. In het geval van een halve cirkel moet de beeldverhouding van de container zijn 2: 1 omdat de breedte het dubbele zal zijn van de hoogte. Evenzo moet de container in het geval van een eenvoudige regel een beeldverhouding van 100: streepbreedte voor de lijn.
Wanneer u voortgangsbalken maakt met een lijn, cirkel of halve cirkel, kunt u eenvoudig de ProgressBar.Shape () methode om de voortgangsbalk te maken. In dit geval, de Vorm kan een zijn Cirkel, Lijn, of Halve cirkel. U kunt twee parameters doorgeven aan de Vorm() methode. De eerste parameter is een selector of DOM-knooppunt om de container van de voortgangsbalk te identificeren. De tweede parameter is een object met sleutel / waarde-paren dat het uiterlijk van de voortgangsbalk bepaalt.
U kunt de kleur van de voortgangsbalk opgeven met behulp van de kleur eigendom. Elke voortgangsbalk die u maakt, heeft standaard een donkergrijze kleur. De dikte van de voortgangsbalk kan worden opgegeven met behulp van de streekbreedte eigendom. Houd er rekening mee dat de breedte hier niet in pixels is maar in termen van een percentage van de canvasgrootte. Als het canvas bijvoorbeeld 200 px breed is, streekbreedte waarde van 5 maakt een lijn die 10px dik is.
Naast de hoofdvoortgangsbalk, kunt u met de bibliotheek ook een volglijn tekenen die de lezer het pad toont waarop de voortgangsbalk zich zal verplaatsen. De kleur van de sleeplijn kan worden opgegeven met behulp van de trailColor eigenschap, en de breedte kan worden opgegeven met behulp van de trailWidth eigendom. Net als streekbreedte, de trailWidth property berekent ook de breedte in procenten.
De totale tijd die de voortgangsbalk nodig heeft om van de beginstatus naar de uiteindelijke status te gaan, kan worden opgegeven met behulp van de looptijd eigendom. Standaard voltooit een voortgangsbalk de animatie in 800 milliseconden.
U kunt de versoepeling eigenschap om op te geven hoe een voortgangsbalk tijdens de animatie moet bewegen. Alle voortgangsbalkjes worden verplaatst met een lineair snelheid standaard. Om de animatie aantrekkelijker te maken, kunt u deze waarde instellen op iets anders zoals easeIn, easeOut, easeInOut, of stuiteren.
Nadat u de initiële parameterwaarden hebt opgegeven, kunt u de voortgangsbalk animeren met behulp van de animeren () methode. Deze parameter accepteert drie parameters. De eerste parameter is de hoeveelheid tot welke u de voortgangslijn wilt animeren. De twee andere parameters zijn optioneel. De tweede parameter kan worden gebruikt om alle waarden van animatiewerken die u tijdens de initialisatie instelt te overschrijven. De derde parameter is een callback-functie om iets anders te doen zodra de animatie eindigt.
In het volgende voorbeeld heb ik drie verschillende voortgangsbalkjes gemaakt met alle eigenschappen die we tot nu toe hebben besproken.
Accentsconagua
var lineBar = nieuwe ProgressBar.Line ('# line-container', color: 'orange', strokeWidth: 2, trailWidth: 0.5); lineBar.animate (1, duration: 1000); var circleBar = new ProgressBar.Circle ('# circle-container', color: 'white', strokeWidth: 2, trailWidth: 10, trailColor: 'black', easing: 'easeInOut'); circleBar.animate (0.75, duration: 1500); var semiBar = nieuwe ProgressBar.SemiCircle ('# semi-container', color: 'violet', strokeWidth: 2, trailWidth: 0.5, easing: 'bounce'); semiBar.animate (1, duration: 3000);Het enige dat verandert met de animatie van de voortgangsbalk in het bovenstaande voorbeeld is de lengte. Met ProgressBar.js kunt u echter ook andere fysieke kenmerken wijzigen, zoals de breedte en kleur van de streklijn. In dergelijke gevallen moet u de beginwaarden opgeven voor de voortgangsbalk binnen de van parameter en de laatste waarden in de naar parameter bij het initialiseren van de voortgangsbalken.
U kunt de bibliotheek ook vertellen om een begeleidend tekstelement te maken met de voortgangsbalk om tekstuele informatie aan uw gebruikers te tonen. De tekst kan van alles zijn, van een statische waarde tot een numerieke waarde die de voortgang van de animatie aangeeft. De tekst parameter accepteert een object als waarde.
Dit object kan een hebben waarde parameter om de initiële tekst op te geven die in het element moet worden weergegeven. U kunt ook een klassenaam opgeven die aan het tekstelement moet worden toegevoegd met behulp van de naam van de klasse parameter. Als u enkele inline stijlen op het tekstelement wilt toepassen, kunt u ze allemaal als een waarde van de stijl parameter. Alle standaardstijlen kunnen worden verwijderd door de waarde in te stellen stijl naar nul. Het is belangrijk om te onthouden dat de standaardwaarden alleen van toepassing zijn als u geen aangepaste waarde hebt ingesteld voor CSS-eigenschappen binnenin stijl.
De waarde in het tekstelement blijft hetzelfde tijdens de hele animatie als u deze niet zelf bijwerkt. Gelukkig biedt ProgressBar.js ook een stap parameter die kan worden gebruikt om een functie te definiëren die bij elke animatiestap moet worden aangeroepen. Aangezien deze functie meerdere keren per seconde wordt aangeroepen, moet je voorzichtig zijn met het gebruik en de berekeningen daarin eenvoudig houden.
var lineBar = nieuwe ProgressBar.Line ("# line-container", strokeWidth: 4, trailWidth: 0.5, from: color: "# FF9900", to: color: "# 00FF99", text: value : '0', className: 'voortgangstekst', stijl: kleur: 'zwart', positie: 'absoluut', top: '-30px', opvulling: 0, marge: 0, transform: null, stap : (toestand, vorm) => shape.path.setAttribute ("stroke", state.color); shape.setText (Math.round (shape.value () * 100) + '%');); lineBar.animate (1, duration: 4000); var circleBar = new ProgressBar.Circle ("# circle-container", color: "white", strokeWidth: 2, trailWidth: 25, trailColor: "black", easing: "easeInOut", from: color: "# FF9900 ", width: 1, to: color:" # FF0099 ", width: 25, text: value: '0', className: 'progress-text', style: color: 'black', position: 'absoluut', top: '45% ', links: '42%', opvulling: 0, marge: 0, transformatie: null, stap: (toestand, vorm) => shape.path.setAttribute ("stroke ", state.color); shape.path.setAttribute (" stroke-width ", state.width); shape.setText (Math.round (shape.value () * 100) + '%');); circleBar.animate (0.75, duration: 1500); var semiBar = nieuwe ProgressBar.SemiCircle ("# semi-container", color: "violet", strokeWidth: 2, trailWidth: 8, trailColor: "black", easing: "bounce", from: color: "# FF0099 ", width: 1, to: color:" # FF9900 ", width: 2, text: value: '0', className: 'progress-text', style: color: 'black', position: 'absoluut', top: '45% ', links: '50%', opvulling: 0, marge: 0, transform: null, stap: (toestand, vorm) => shape.path.setAttribute ("stroke ", state.color); shape.path.setAttribute (" stroke-width ", state.width); shape.setText (Math.round (shape.value () * 100) + '%');); semiBar.animate (0.75, duration: 2000); Soms wilt u misschien voortgangsbalken maken met verschillende vormen die overeenkomen met het algemene thema van uw website. Met ProgressBar.js kunt u voortgangsbalken maken met aangepaste vormen met behulp van de Pad() methode. Deze methode werkt als Vorm() maar biedt minder parameters om de voortgangsbalk-animatie aan te passen. U kunt nog steeds een looptijd en versoepeling waarde voor de animatie. Als u de kleur en breedte van de streek wilt animeren die wordt gebruikt voor het tekenen van het aangepaste pad, kunt u dit doen in de van en naar parameters.
De bibliotheek biedt geen manier om een spoor voor het aangepaste pad te tekenen, zoals bij eenvoudige lijnen en cirkels. Je kunt het parcours echter vrij gemakkelijk zelf maken. In het volgende voorbeeld heb ik een driehoekige voortgangsbalk gemaakt met behulp van de Pad() methode.
Voordat we de JavaScript-code schrijven, moeten we ons aangepaste SVG-pad in HTML definiëren. Hier is de code die ik heb gebruikt om een eenvoudige driehoek te maken:
Het is je misschien opgevallen dat ik twee verschillende padelementen heb gemaakt. Het eerste pad heeft een lichtgrijze kleur die lijkt op het spoor dat we hebben gezien met eenvoudige voortgangsbalkjes in het vorige gedeelte. Het tweede pad is het pad dat we animeren met onze code. We hebben het een gegeven ID kaart die wordt gebruikt om het te identificeren in de JavaScript-code hieronder.
var path = new ProgressBar.Path ("# triangle", duration: 6000, from: color: "# ff0000", width: 2, to: color: "# 0099ff", width: 10, strokeWidth: 4, easing: "easeInOut", step: (state, shape) => shape.path.setAttribute ("stroke", state.color); shape.path.setAttribute ("stroke-width", state.width); ); path.animate (1); Zoals je in deze tutorial hebt gezien, kun je met ProgressBar.js eenvoudig verschillende soorten voortgangsbalkjes maken. Het geeft je ook de mogelijkheid om verschillende kenmerken van de voortgangsbalk te animeren, zoals de breedte en kleur.
Niet alleen dat, maar u kunt deze bibliotheek ook gebruiken om de waarde van een begeleidend tekstelement te wijzigen om de voortgang in tekstuele vorm te tonen. Deze tutorial behandelt alles dat je moet weten om eenvoudige voortgangsbalkjes te maken. U kunt echter de documentatie doornemen voor meer informatie over de bibliotheek.
.
