Share
Het animeren van de slag van een SVG is perfect voor het simuleren van handschriften. In de loop van twee tutorials gaan we CSS-animaties gebruiken om een handtekening netjes te laten lijken om te worden geschreven, alsof je de pagina zelf ondertekent.
Dit is wat we gaan bouwen:
Voordat we in een code duiken, hebben we een SVG-versie van uw handtekening nodig. Het maakt niet uit welke software u gebruikt om dit te maken, maar probeer de lijnen en curven zo glad mogelijk te houden voor het beste effect.
Hier is de mijne, die je kunt zien is getekend met drie verschillende paden:
Eerste pad
Tweede pad
Derde padZorg ervoor dat uw tekengebied strak is bijgesneden tot de handtekening en sla het bestand vervolgens op als een SVG.
Het openen van het bestand in een code-editor zal de XML-structuur van de SVG onthullen. Afhankelijk van de applicatie die je hebt gebruikt om het te ontwerpen, plus hoe je het hebt opgeslagen of geëxporteerd, heb je een element met wat mumbo jumbo ervoor. De mumbo jumbo kan worden verwijderd.
In dit geval zien de elementen waar we achter staan er ongeveer zo uit:
Binnen ons hoofd we hebben een
We zullen deze vectoren afzonderlijk iets later met CSS moeten targeten, dus zorg ervoor dat ze elk een geschikte klassenaam hebben. De element heeft waarschijnlijk al een id die de naam van de laag weergeeft in de applicatie waarmee het is ontworpen.
Ik heb de klassennamen van mijn vectoren gegeven, afhankelijk van wat ze zijn (de eerste is bijvoorbeeld de "I" in mijn naam).
In alle eerlijkheid ziet uw SVG er niet zo netjes uit. Elk van deze vectoren zal een lading coördinaten bevatten, plus verschillende attributen die erin liggen. De coördinaten moeten blijven, maar we kunnen enkele veelgebruikte attributen verwijderen en deze plaatsen in onze CSS in plaats daarvan, dingen netjes houden en DROOG.
Ik ga dit bouwen met CodePen, maar je kunt alleenstaande HTML- en CSS-documenten gebruiken als je dat wilt. Plak de SVG-code rechtstreeks in uw HTML-document. Verwijder vervolgens de kenmerken die elk van de pad- en lijnelementen gemeen hebben, plaats ze in plaats daarvan in het CSS-document. U zult bijvoorbeeld kenmerken als:
Accentsconagua
vullen = "none" stroke = "# 0F436D" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" stroke-miterLimit = "10"Deze kunnen in plaats daarvan via CSS worden verwijderd en toegepast, zoals:
pad, regel invullen: geen; beroerte: # 2a3745; slagbreedte: 2; stroke-linecap: rond; stroke-linejoin: round; beroerte-versteklimiet: 10;
Veel schoner!
Om de streken van deze SVG te animeren, gebruiken we een techniek die voor het eerst is besproken door Jake Archibald. Het idee is als volgt: elk van deze vectoren krijgt een gestippelde beroerte. We doen dit door een stroke-dasharray waarde binnen de CSS:
Voor elk van deze vectoren maken we de stroke-dasharray precies de lengte van het pad, dus elke balk heeft een streepje over de hele lengte ervan. Dit vergt een beetje vallen en opstaan, maar in ons geval zien de waarden er als volgt uit:
.stroke-I stroke-dasharray: 80; .stroke-an stroke-dasharray: 360; .stroke-flourish stroke-dasharray: 40;
Om deze streken te animeren, moeten we nu elk streepje verschuiven zodat het kloof dekt de vector, niet de vector scheutje. Slaat dat ergens op? Deze illustraties kunnen helpen. Stel je in deze eerste voor dat de stippellijn wordt gebruikt om de bloei aan het einde van de handtekening te dekken.
Nu in deze hebben we het streepje gecompenseerd, dus het is de kloof die boven de bloei uitsteekt:
Nu is alles wat we moeten doen CSS gebruiken om van de offset naar de andere te animeren.
CSS-animatie is afhankelijk van eerste definiërende keyframes. Elk hoofdframe vertegenwoordigt staten langs een tijdlijn en onze browsers geven de animaties daartussen weer.
Laten we eerst eens kijken hoe dit streepjes-offset kan worden geanimeerd. We gebruiken de eerste streek, de 'I', en bewegen tussen twee toestanden. Begin met het instellen van enkele hoofdframes:
@keyframes write1 0% stroke-dashoffset: 80; 100% stroke-dashoffset: 0;
Hier geven we de keyframes een naam (Write1) en met de syntaxis voor shorthand geeft u dat op aan het begin van de tijdlijn (0%) we willen de stroke-dashoffset zijn 80. Met andere woorden: het streepje, dat exact 80 px lang is, wordt volledig verschoven.
Aan het einde van de tijdlijn (op 100%) we willen de stroke-dashoffset zijn 0, dus het streepje bedekt de vector nogmaals.
Nu hebben we onze keyframes, laten we ze koppelen aan een animatie. We voegen een nieuwe verklaring toe aan onze stroke-I regel:
.stroke-I stroke-dasharray: 80; animatie: write1 3s oneindig lineair;
Hier, met behulp van de animatie eigendom, we zeggen dat we het willen gebruiken Write1 keyframes gedefinieerd een moment geleden, we willen dat het hele ding precies hetzelfde blijft 3 seconden, we willen dat de animatie oneindig loopt en we willen dat de snelheid is lineair (zodat er geen versnelling of vertraging is).
Dit is wat we krijgen:
Notitie: Ik gebruik Autoprefixer in CodePen waardoor ik geen voorvoegsels van de browser hoef te gebruiken bij het maken van de animatie.
We moeten nog twee sets keyframes definiëren (write2 en write3) voor de resterende vectoren in de handtekening - en we moeten compenseren door de juiste streeplengte die we eerder hebben ontdekt:
@keyframes write2 0% stroke-dashoffset: 360; 100% stroke-dashoffset: 0; @keyframes write3 0% stroke-dashoffset: 40; 100% stroke-dashoffset: 0;
Vervolgens moeten we die animaties toepassen op de resterende twee vectoren:
.stroke-a stroke-dasharray: 360; animatie: write2 3s oneindig lineair; .stroke-flourish stroke-dasharray: 40; animatie: write3 3s oneindig rechtlijnig;
Dit is wat we krijgen:
Nu komen we ergens! Elke vector animeert perfect, in een lineaire beweging van 3 seconden.
Volgende stap? Om ze te laten animeren achter elkaar.
Momenteel hebben we drie streken die tegelijkertijd animeren. We willen echter idealiter dat het 'ik' bezielt, dan het 'an', en dan uiteindelijk de bloei aan het einde. Als we dat in een tijdlijn zouden visualiseren, zou het er als volgt uit kunnen zien:
We kunnen deze secties van de tijdlijn perfect weergeven in onze CSS-keyframes. De eerste sectie (van 0% tot 33,3%) is bijvoorbeeld wanneer we willen dat onze 'I' wordt geanimeerd, dus we veranderen de hoofdframes om te eindigen op 33,3% in plaats van 100%:
@keyframes write1 0% stroke-dashoffset: 80; 33,3% stroke-dashoffset: 0;
Aangezien alle drie onze animaties dezelfde lengte hebben (3 seconden), kunnen we ervoor zorgen dat de tweede niet begint tot 33,3%, als de eerste animatie is voltooid:
@keyframes write2 0%, 33.3% stroke-dashoffset: 360; 100% stroke-dashoffset: 0;
Dit is wat ons dat geeft:
De eerste twee animaties lopen mooi over, dus laten we de dingen verbeteren door de tweede te laten eindigen op 66,6%, waarna de laatste animatie kan beginnen. Onze keyframes zien er als volgt uit:
@keyframes write1 0% stroke-dashoffset: 80; 33,3% stroke-dashoffset: 0; @keyframes write2 0%, 33.3% stroke-dashoffset: 360; 66,6% stroke-dashoffset: 0; @keyframes write3 0%, 66.6% stroke-dashoffset: 40; 100% stroke-dashoffset: 0;
En de volgorde ziet er als volgt uit:
Wat we hebben is goed, maar het is niet perfect - zeker niet ver van een realistische penbeweging. Elk van deze drie vectoren wordt in de loop van een seconde getekend, ongeacht de lengte. De middelste vector is langer dan de vorige, dus het zou logischerwijs langer duren om te tekenen. Een betere tijdlijn kan er ongeveer zo uitzien:
Voor extra realisme is er zelfs een opening tussen de eerste vectorafwerking en het tweede begin. Dus laten we onze keyframe-waarden wijzigen om dat te weerspiegelen:
@keyframes write1 0% stroke-dashoffset: 80; 20% stroke-dashoffset: 0; @keyframes write2 0%, 25% stroke-dashoffset: 360; 90% stroke-dashoffset: 0; @keyframes write3 0%, 90% stroke-dashoffset: 40; 100% stroke-dashoffset: 0;
Eindelijk, laten we de dingen versnellen door alle 3s waarden voor 2s. We kunnen de animatieverklaringen ook bijwerken, zodat ze allemaal één keer worden uitgevoerd, niet oneindig in een lus:
animatie: write1 2s 1 lineair;
Misschien wil je ook spelen met de lineair waarde, in plaats daarvan wat versnelling toevoegen zoals gemak-in, gemak-in-out, gemak-out enz. om de beweging minder uniform te maken. Wat geeft ons dat allemaal??
We hebben grote vooruitgang geboekt en hebben onderweg veel geleerd! In de volgende zelfstudie gaan we een stap verder en gebruiken we Waypoints.js om ons te helpen bepalen wanneer de animatie plaatsvindt. ik zie je daar!
