Teken op de Stippellijn: Animeer Je Eigen SVG-handtekening

Dutch (Nederlands) translation by Martine Reyners (you can also view the original English article)

Een lijn van een SVG-bestand animeren is de perfecte oplossing om een handschrift na te bootsen. Met twee tutorials zullen we CSS-animatie gebruiken om een handtekening netjes uitgeschreven te laten verschijnen, alsof je de pagina zelf ondertekent.

Dit is wat we zullen maken:

1. SVG-bestand

Vooraleer we in de code duiken, hebben we een SVG-versie van je handtekening nodig. Het maakt niet uit wat voor software je gebruikt om dit te doen, maar tracht de lijnen en bogen zo gelijkmatig mogelijk te houden voor een optimaal effect.

Hier zie je mijn versie, die getekend is met drie afzonderlijke pads:

Zorg ervoor dat je tekengebied netjes afgesneden is rond de handtekening, en sla het bestand daarna op als een SVG-bestand.

2. De SVG-code opkuisen

Wanneer je het bestand in een code-editor opent, dan zal die de XML-structuur van het SVG-bestand weergeven. Afhankelijk van welke toepassing je gebruikt voor je ontwerp en rekening houdend met de manier waarop je het bestand hebt bewaard en geëxporteerd, zal dit resulteren in een <svg> element met wat abracadabra ervoor. Je mag de abracadabra verwijderen.

In dit geval zullen de elementen die overblijven er ongeveer zo uitzien:

<svg>
    <line/>
    <path/>
    <line/>
</svg>

Binnen de <svg> tags zien we <line> tags, daarna <path> tags en tenslotte opnieuw <line> tags. Dit zijn de drie vectoren die we hebben getekend. Ze verschillen enkel van elkaar omdat technisch gezien een lijn geen kromming heeft. Een lijn wordt dus op een andere manier gedefinieerd dan een pad in SVG.

3. Voeg Class-attributen toe

We moeten de drie vectoren straks nog apart in CSS aanspreken. Zorg er dus voor dat ze elk een gepaste class-naam krijgen. Het <svg> element zal in de meeste gevallen reeds een ID-attribuut bevatten, dat overeenstemt met de naam van de laag die gegeven werd in de toepassing die je hebt gebruikt voor je ontwerp.

<svg id="signature">
    <line class="stroke-I" />
    <path class="stroke-an" />
    <line class="stroke-flourish" />
</svg>

Ik heb mijn vectoren class-namen gegeven afhankelijk van wat ze zijn (de eerste class “stroke-I” komt hier bijvoorbeeld overeen met de letter “I” van mijn naam).

4. Alle andere SVG-attributen

Eerlijk gezegd, je SVG-bestand zal er op dit moment niet zo netjes uitzien. Elk van deze vectoren zal tal van coördinaten bevatten, met daarin ook nog verschillende attributen. De coördinaten laten we zoals ze zijn, maar we kunnen wel enkele vaak gebruikte attributen uit het bestand knippen en ze plakken in ons CSS-bestand, zodat alles netjes en DRY blijft.

Nieuw Project

Ik zal hiervoor gebruik maken van CodePen, maar zelf kan je natuurlijk ook gewoon HTML- en CSS-bestanden gebruiken als je daar de voorkeur aan geeft. Plak de SVG-code rechtstreeks in je HTML-document. Daarna verwijder je hieruit de attributen die de pad- en lijnelementen gemeenschappelijk hebben. Plaats ze in het CSS-document. Je zal bijvoorbeeld attributen vinden zoals:

fill="none"
stroke="#0F436D"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"

Deze kunnen verwijderd worden en in het CSS-bestand gezet worden, op deze manier:

path,
line {
  fill: none;
  stroke: #2a3745;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

Veel overzichtelijker!

5. Start de Animatie

Om de lijnen van dit SVG-bestand te animeren zullen we een techniek gebruiken die als eerst werd besproken door Jake Archibald. Het idee is het volgende: elk van deze vectoren zal een onderbroken lijn krijgen. Dit doen we door een stroke-dasharray waarde toe te voegen in het CSS-bestand:

Streeplengte

Voor elk van deze vectoren zorgen we ervoor dat de stroke-dasharray exact dezelfde lengte heeft als die van het pad, zodat elke vector bedekt wordt door één enkele streep over de volledige lengte. Dit vegt een beetje oefening, maar in ons geval zien de waarden er zo uit:

.stroke-I {
  stroke-dasharray: 80;
}

.stroke-an {
  stroke-dasharray: 360;
}

.stroke-flourish {
  stroke-dasharray: 40;
}

Om deze lijnen vervolgens te kunnen animeren, moeten we voor elke streep een offset creëren zodat de lege tussenruimte bovenop de vector terechtkomt, en niet de streep. Is dit duidelijk geformuleerd? De illustraties hieronder kunnen misschien helpen. Wanneer je naar de eerste tekening kijkt, probeer je dan voor te stellen dat de onderbroken lijn gebruikt wordt om de horizontale versiering in het laatste deel van de handtekening af te dekken.

Hier hebben we een offset gecreeërd voor de streep, zodat de lege tussenruimte zich nu precies op de horizontale versiering bevindt:

We moeten nu enkel nog de offset toestand wijzigen met CSS-animatie.

6. Keyframes

De CSS-animatie kan enkel werken als we eerst keyframes definiëren. Elke keyframe stelt een positie voor op een tijdslijn. Browsers kunnen deze keyframes vervolgens interpreteren en ervoor zorgen dat de animaties die zich ertussen bevinden op het scherm terechtkomen.

Laten we eerst bekijken hoe de offset van de streep geanimeerd kan worden. We zullen de eerste lijn gebruiken. Dit is de lijn die de letter “I” voorstelt. We animeren vervolgens tussen twee posities. Begin met keyframes te maken in CSS:

@keyframes write1 {
    0% {
        stroke-dashoffset: 80;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

Hier geven we de keyframes een naam (write1) en gebruiken we shorthand syntax om aan te duiden dat we aan het begin van de tijdslijn (0%) een stroke-dashoffset willen creëren van 80. Met andere woorden: de streep, die exact 80 pixels lang is, zal volledig geoffset worden.

Aan het eind van de tijdslijn (op 100%), willen we de stroke-dashoffset instellen op 0, zodat de streepde vector opnieuw bedekt.

Pas de Animatie toe

Nu we beschikken over onze keyframes, zullen we ze linken aan een animatie. We voegen een nieuwe regel toe aan onze stroke-I class in CSS:

1	.stroke-I {
2	stroke-dasharray: 80;
3	animation: write1 3s infinite linear;
4	}

Door hier gebruik te maken van de animation eigenschap, geven we aan dat we de write1 keyframes die we daarnet gedefinieerd hebben willen gebruiken, en zorgen we ervoor dat de volledige animatie exact 3 seconden zal duren. Daarenboven willen we dat de animatie loop (infinite) oneindig doorgaat en dat de snelheid van de animatie lineair verloopt (zodat er geen versnelling of vertraging zit in de animatie).

Dit is het resultaat:

Ter info: Ik gebruik hieronder de Autoprefixer in CodePen, waardoor ik geen browser prefixes hoef te gebruiken om te animeren.

Pas dit toe op de Drie Vectoren

We moeten nog twee andere keyframes definiëren (write2 en write3) - voor de twee andere vectoren in de handtekening - en moeten hiervoor een offset creëren van de juiste streeplengtes, die we al eerder hebben achterhaald:

@keyframes write2 {
    0% {
        stroke-dashoffset: 360;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes write3 {
    0% {
        stroke-dashoffset: 40;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

Daarna moeten we deze animaties op de twee andere vectoren toepassen:

.stroke-an {
  stroke-dasharray: 360;
  animation: write2 3s infinite linear;
}

.stroke-flourish {
  stroke-dasharray: 40;
  animation: write3 3s infinite linear;
}

Dit is het resultaat:

Nu begint het ergens op te lijken! Elke vector animeert zoals het hoort, in een lineaire beweging die 3 seconden duurt.

Volgende stap? Alles in volgorde animeren

7. Sequentiële Animatie

Op dit ogenblik animeren we de drie verschillende lijnen allemaal gelijktijdig. Maar we willen eigenlijk bereiken dat de letter “I” eerst animeert, daarna de letters “an” en tenslotte nog de horizontale versiering rechts. Als we dit visueel voorstellen op een tijdslijn, dan zou het er ongeveer zo uitzien:

We kunnen deze stukken van de tijdslijn perfect weergeven in onze CSS-keyframes. Bijvoorbeeld, het eerste stuk (van 0% tot 33,3%) stelt de periode voor waarin we de “I” willen animeren. Daarom zullen we de keyframes anders instellen, zodat ze stoppen op 33,3% in plaats van op 100%:

@keyframes write1 {
    0% {
        stroke-dashoffset: 80;
    }
    33.3% {
        stroke-dashoffset: 0;
    }
}

Rekening houdend met het feit dat onze 3 animaties allemaal dezelfde tijdsduur hebben (i.e. 3 seconden), kunnen we ervoor zorgen dat de tweede animatie niet begint voor 33,3%, want dat is het moment waarop de eerste animatie eindigt:

@keyframes write2 {
    0%, 33.3%  {
        stroke-dashoffset: 360;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

Dit is het resultaat:

De Animatiereeks voltooien

De eerste twee animaties worden goed weergegeven. Laat ons dus het resultaat verbeteren door de tweede animatie te laten eindigen op 66,6%. Op 66,6% kan vervolgens de laatste animatie starten. Onze keyframes zullen er zo uitzien:

@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 animatiereeks zal er zo uitzien:

Verdere Afwerking

Het huidige resultaat is goed, maar niet perfect – dit is alles behalve een realistische penbeweging. Elk van deze drie vectoren wordt getekend over een tijdspanne van één seconde, onafhankelijk van de lengte van de lijntekening. De middelste vector is echter véel langer dan de laatste vector, en zou daarom meer tijd moeten krijgen om getekend te kunnen worden. Een betere tijdslijn zou er daarom zo kunnen uitzien:

Om het geheel realistischer te doen lijken, kunnen we ook een pauze inbouwen tussen het einde van de eerste vector en het begin van de tweede vector. Laten we daarom de waarden van onze keyframes nog eens aanpassen om dit weer te geven:

@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;
    }
}

Tenslotte laten we de animatie nog wat vlotter verlopen door alle waarden van 3s te veranderen in 2s. We kunnen de animatie declaraties verder nog wat bijwerken, zodat elke animatie slechts één keer afspeelt. We laten hiervoor de oneindige animatie loop (infinite) weg en vervangen die in dit geval bijvoorbeeld door “1”.

1	animation: write1 2s 1 linear;

Je kan ook spelen met de lineaire waarden (linear), door easing toe te voegen met ease-in, ease-in-out, ease-out etc... om de animatie minder ééntonig te maken. Wat is hiervan het resultaat?

Volgende keer

We hebben goede vooruitgang geboekt en ondertussen veel bijgeleerd! In de volgende tutorial zullen we een stap verder gaan, door Waypoints.js te gebruiken als hulpmiddel om de animatie te controleren. Tot dan!