Een constant bewegend favicon is zeker vervelend voor de meeste gebruikers en schaadt de toegankelijkheid, maar wanneer het slechts korte tijd geanimeerd is in reactie op een gebruikersactie of een achtergrondgebeurtenis , zoals het laden van een pagina, kan het extra visuele informatie bieden. de gebruikerservaring verbeteren.
1. Maak de
element Eerst moeten we een canvasanimatie maken die een volledige cirkel tekent, 100 procent in totaal (dit is belangrijk wanneer we de boog moeten verhogen).
Laden Ik gebruik de standaard favicon-afmeting, 16 * 16 pixels, voor het canvas. U kunt desgewenst een grotere grootte gebruiken dan dat u wilt, maar houd er rekening mee dat de canvasafbeelding wordt verkleind naar het 16 2 pixelgebied wanneer deze wordt toegepast als een favicon.
2. Controleer of is ondersteund In de gebeurtenishandler onload() krijgen we een verwijzing voor het canvaselement [ cv ] met behulp van de methode querySelector() en verwijzen we naar het 2D-tekeningcontextobject [ ctx ] met behulp van de methode getContext() .
onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) {/ * ... * /}}; We moeten ook controleren of het canvas wordt ondersteund door de UA door ervoor te zorgen dat het tekencontextobject [ ctx ] bestaat en niet ongedefinieerd is . We zullen alle code die bij de laadgebeurtenis hoort in deze toestand plaatsen.
3. Maak de beginvariabelen Laten we drie meer globale variabelen maken , s voor de beginhoek van de boog , tc voor de id voor de setInterval() timer en pct voor de percentagewaarde van dezelfde timer . De code tc = pct = 0 wijst 0 toe als de beginwaarde voor de tc en pct variabelen.
onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) {s = 1.5 * Math.PI, tc = pct = 0; }}; Om te laten zien hoe de waarde van s werd berekend, kan ik snel uitleggen hoe booghoeken werken.
Arc hoeken De ingesloten hoek (de hoek die bestaat uit de twee stralen die een boog definiëren) van de omtrek van een cirkel is 2π rad , waarbij rad het radiale eenheidsymbool is. Dit maakt de hoek voor een kwart boog gelijk aan 0.5π rad .
visualiseren van de voortgang van het laden , willen we dat de cirkel op het canvas wordt getekend vanaf de bovenste positie in plaats van de standaard rechts.Met de klok mee (standaardrichtingboog wordt op het canvas getekend) vanaf de rechterpositie , wordt het toppunt na driekwart bereikt , dat wil zeggen met een hoek van 1, 5π rad . Daarom heb ik de variabele s = 1.5 * Math.PI om later de s = 1.5 * Math.PI aan te duiden voor de bogen s = 1.5 * Math.PI op het canvas moet worden getekend.
4. Geef de cirkel een stijl Voor het tekencontextobject definiëren we de eigenschappen lineWidth en strokeStyle van de cirkel die we in de volgende stap gaan tekenen. De eigenschap strokeStyle staat voor de kleur.
onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) {s = 1.5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; }}; 5. Teken de cirkel We voegen een #lbtn aan de knop Load [ #lbtn ] waarmee een setInterval-timer van 60 milliseconden wordt #lbtn, die de functie uitvoert die verantwoordelijk is voor het tekenen van de cirkel [ updateLoader() ] om de 60 ms totdat de cirkel volledig is getekend.
De methode setInterval() retourneert een timer-id om de timer te identificeren die is toegewezen aan de tc variabele.
onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) {s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('klik', functie () {tc = setInterval (updateLoader, 60);}); }}; 6. Maak de aangepaste functie updateLoader() Het is tijd om de aangepaste updateLoader() -functie te maken die moet worden aangeroepen door de methode setInterval() wanneer op de knop wordt geklikt (de gebeurtenis wordt geactiveerd). Laat me je eerst de code tonen, dan kunnen we de uitleg volgen.
function updateLoader () {ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); if (pct === 100) {clearInterval (tc); terug te keren; } pct ++; } Met de methode clearRect() verwijdert u het rechthoekige gebied van het canvas dat wordt gedefinieerd door de bijbehorende parameters: de (x, y) -coördinaten van de linkerbovenhoek. De clearRect(0, 0, 16, 16) regel wist alles in het canvas van 16 * 16 pixels dat we hebben gemaakt.
De methode beginPath() maakt een nieuw pad voor de tekening en de methode stroke() schildert op dat nieuw gemaakte pad .
Aan het einde van de updateLoader() -functie wordt het percentagetelling [ pct ] met 1 opgehoogd en voorafgaand aan het verhogen controleren we of het gelijk is aan 100 . Wanneer het 100 procent is, wordt de setInterval() timer (geïdentificeerd door de timer-id, tc ) gewist met behulp van de methode clearInterval() .
De eerste drie parameters van de arc() -methode zijn de (x, y) -coördinaten van het middelpunt van de boog en de straal . De vierde en vijfde parameter vertegenwoordigen de begin- en eindhoeken waarop de boogtekening begint en eindigt.
We hebben al het startpunt van de ladercirkel bepaald, die zich onder de hoek s, en deze zal in alle iteraties hetzelfde zijn .
De eindhoek neemt echter toe met het percentage , we kunnen de grootte van de verhoging op de volgende manier berekenen. Zeg 1% (de waarde 1 op 100) is gelijk aan hoek α uit 2π in een cirkel (2π = hoek van de hele omtrek), dan kan hetzelfde worden geschreven als de volgende vergelijking:
1/100 = α / 2π Over het herschikken van de vergelijking:
α = 1 * 2π / 100 α = 2π / 100 Dus 1% is gelijk aan de hoek 2π / 100 in een cirkel. De eindhoek tijdens elke procentuele toename wordt dus berekend door 2π / 100 te vermenigvuldigen met de procentuele waarde . Vervolgens wordt het resultaat toegevoegd aan s (starthoek) , zodat de bogen telkens vanuit dezelfde startpositie worden getekend . Daarom hebben we de formule pct * 2 * Math.PI / 100 + s gebruikt om de eindhoek in het bovenstaande codefragment te berekenen.
7. Voeg het favicon toe Laten we een favicon-linkelement in de HTML plaatsen
sectie, hetzij rechtstreeks of via JavaScript.In de functie updateLoader() halen we eerst het favicon op met behulp van de methode querySelector() en wijzen we het toe aan de variabele querySelector() . Vervolgens moeten we de canvasafbeelding exporteren telkens wanneer een boog in een gecodeerde afbeelding wordt getekend met behulp van de methode toDataURL() en die gegevens URI-inhoud toewijzen als de faviconafbeelding . Hiermee wordt een geanimeerd favicon gemaakt dat hetzelfde is als de canvaslader .
onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) {s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector ('# lbtn'), lnk = document.querySelector ('link [rel = "icon"]') ; ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; btn.addEventListener ('klik', functie () {tc = setInterval (updateLoader, 60);}); }}; function updateLoader () {ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png'); if (pct === 100) {clearTimeout (tc); terug te keren; } pct ++; } U kunt de volledige code op Github bekijken .
Bonus: gebruik de loader voor async-evenementen Wanneer u deze updateLoader() in combinatie met een updateLoader() op een webpagina wilt gebruiken, wijst u de updateLoader() -functie toe als gebeurtenishandler voor de progress() -gebeurtenis van de actie .
Onze JavaScript zal bijvoorbeeld zo veranderen in AJAX :
onload = function () {cv = document.querySelector ('# cvl'), ctx = cv.getContext ('2d'); if (!! ctx) {s = 1.5 * Math.PI, lnk = document.querySelector ('link [rel = "icon"]'); ctx.lineWidth = 2; ctx.strokeStyle = 'fuchsia'; } var xhr = nieuwe XMLHttpRequest (); xhr.addEventListener ('progress', updateLoader); xhr.open ('GET', 'https://xyz.com/abc'); xhr.send (); }; function updateLoader (evt) {ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (evt.loaded * 2 * Math.PI / evt.total + s)); ctx.stroke (); lnk.href = cv.toDataURL ('image / png'); } Vervang in de arc() -methode de percentagewaarde [ pct ] door de loaded eigenschap van de gebeurtenis100 de total eigenschap van ProgressEvent
In dergelijke gevallen is setInterval() niet nodigprogress() automatisch wordt geactiveerd naarmate het laden vordert.
HTML5-meter gebruiken en stylen [Guide]
Als u bekend bent met de HTML-voortgangsbalk, die aangeeft hoeveel van een activiteit is uitgevoerd, zult u merken dat het meterelement vergelijkbaar is met dat - beide tonen een huidige waarde van een maximale waarde . Maar in tegenstelling tot de voortgangsbalk, moet de meterbalk niet worden gebruikt om de voortgang weer te geven
(Technische en ontwerptips)
Maak stroomschema's in Sketch met User Flows plugin
Interface-ontwerpers werden al snel verliefd op Sketch als een UI / UX-ontwerptool. Direct uit de verpakking kan het veel sneller interfaces rappen dan Photoshop of Illustrator.Een leuke functie ontbreekt in Sketch is de mogelijkheid om tekengebieden te koppelen aan stroomdiagrammen . Maar met de plug-in User Flows kunt u precies dat doen
(Technische en ontwerptips)
nl.hideout-lastation.com
1. Maak de 
