Animeren met Kalligrafie SVG –

0
31

Van tijd tot tijd op Stackoverflow, de vraag opduikt of er sprake is van een gelijkwaardig zijn aan de slag dashoffset techniek voor het animeren van de SVG beroerte die werkt voor de vulling kenmerk. Maar bij nader inzien, wat de vragen zijn echt probeert op te vragen is iets als dit:

Ik heb iets dat is een soort van een regel, maar omdat het heeft verschillende borstel breedte, in SVG is gedefinieerd als het vullen van een pad.

Hoe kan dit “borstel” bezield?

Kortom: Hoe laat u bezielen, kalligrafie?

Een masker pad heeft betrekking op de kalligrafische borstel

De basistechniek voor dit is relatief eenvoudig: teken een tweede (glad) pad op de top van de kalligrafie, zodat het volgt de brush line en kies de lijndikte op zodanige wijze dat deze betrekking heeft op de kalligrafie overal.

Dit pad op de top zal worden gebruikt als een masker voor de één onder. Het toepassen van de beroerte-dashoffset animatie techniek om het masker weg. Het resultaat zal uitzien als het onderste pad wordt “geschreven” rechtstreeks op het scherm in real-time.

Het is een zaak voor een masker, niet een clip-pad — dat zou niet werken. Clip-paden verwijzen altijd naar de opvulling van een pad, maar negeren de slag.

De eenvoudigste variant is om een beroerte: wit voor het pad in het masker. Dan is alles buiten het gebied dat wit geschilderd is verborgen, en iets binnen in wordt weergegeven zonder aanpassingen.

Zie de Pen Schrijven-kalligrafie: basic-voorbeeld door ccprog (@ccprog) op CodePen.

Zo ver, zo eenvoudig. Dingen lastig, echter, wanneer de kalligrafische lijnen elkaar overlappen. Dit is wat er gebeurt in een naïeve uitvoering:

Zie de Pen Schrijven-kalligrafie: defecte kruising door ccprog (@ccprog) op CodePen.

Op het snijpunt, het masker onthult een deel van de kruising borstel. Daarom is de kalligrafie worden gesneden in niet-overlappende stukken. Stapel ze in tekening volgorde en definieert u een apart masker paden voor elk één.

Het bezuinigen op het masker weg en de kalligrafische borstel moet overeenkomen met

Het meest lastige deel is om de indruk te wekken dat de tekening is één continue beweging. Als u zich snijdt een glad pad, uiteinden in elkaar passen zolang beide pad raaklijnen hebben dezelfde richting om hun gemeenschappelijk punt. De slag eindigt loodrecht op die, en het is essentieel dat de knip in de kalligrafische lijn precies uitgelijnd. Zorg dat alle paden hebben opeenvolgende richtingen. Animeren ze de ene na de andere.

Terwijl vele animaties kunt krijgen door met een ruw wiskunde op de lengte van de beroerte-dasharray, dit scenario vereist een nauwkeurige metingen (hoewel kleine ronding mag geen pijn doen). Ter herinnering, je kunt ze krijgen in de DevTools console met:

document.querySelector(‘#mask1 pad’).getTotalLength()

Zie de Pen Schrijven-kalligrafie: verdelen van kruispunten door ccprog (@ccprog) op CodePen.

De één na de andere” deel is een beetje lastig om te schrijven in CSS. De beste patroon is waarschijnlijk om alle gedeeltelijke animaties dezelfde start-tijd en de totale duur, stel dan de tussenliggende keyframes tussen de stroke-dashoffset veranderingen.

Iets als dit:

@keyframes brush1 {
0% { stroke-dashoffset: 160; } /* statisch */
12% { stroke-dashoffset: 160; } /* start van de eerste borstel */
44% { stroke-dashoffset: 0; } /* einde van de eerste borstel is gelijk aan de start van de tweede */
100% { stroke-dashoffset: 0; } /* statisch */
}

@keyframes brush2 {
0% { stroke-dashoffset: 210; } /* statisch */
44% { stroke-dashoffset: 210; } /* start van de tweede borstel is gelijk aan het einde van het eerste */
86% { stroke-dashoffset: 0; } /* einde van de tweede borstel */
100% { stroke-dashoffset: 0; } /* statisch */
}

Verder naar beneden zie je hoe een SMIL-animatie maakt een meer vloeiende en expressieve manier om te bepalen timing. Houden met CSS, berekeningen gedaan met Sass kan vrij handig omdat het kan omgaan met wat wiskunde.

Het masker pad (links) en haar toepassing (rechts)

Een vergelijkbaar probleem treedt op als de bochtradius van het masker pad wordt smaller dan de breedte streek. Terwijl de animatie loopt door die bocht, het kan gebeuren dat een tussentijdse stand ziet er serieus scheef.

De oplossing is het verplaatsen van het masker weg uit de kalligrafische curve. U hoeft alleen te zorgen de binnenrand nog steeds betrekking op de borstel.

U kunt zelfs knip het masker weg en misalign de uiteinden, zolang de snijkanten in elkaar passen.

De straal blijft groot genoeg

Zie de Pen Schrijven-kalligrafie: verdelen van kruispunten door ccprog (@ccprog) op CodePen.

En, dus, je kunt zelfs draw something complex, zoals de arabische kalligrafie in dit voorbeeld:

Zie de Pen Tughra Mahmud II – animatie door ccprog (@ccprog) op CodePen.

Het oorspronkelijke ontwerp, de Tughra van Osmanic Sultan Mahmud II., is door een onbekend, 19e-eeuwse kalligraaf. De gevectoriseerde versie werd gedaan door Wikipedia illustrator Baba66. De animatie is mijn poging om het visualiseren van de positie van de arabische letters in de tekening. Het bouwt voort op een eerdere versie van Baba66. Creatieve Commons Attribution-Share Alike 2.5.

Het volgende code fragment toont de geavanceerde methode gebruikt voor het uitvoeren van de animaties in orde en in een herhaalbare manier.

masker pad {
fill: none;
beroerte: white;
stroke-width: 16;
}

.borstel {
vullen: #0d33f2;
}
<masker id=”mask1″ maskUnits=”userSpaceOnUse”>
<pad stroke-dasharray=”160 160″ stroke-dashoffset=”160″ d=”…”>
<!– animatie begint nadat een document wordt gestart en herhaalt met een klik
op de “repeat” – knop –>
<animeren id=”animate1″ attributeName=”stroke-dashoffset”
from=”160″=”0″ begin=”1s;herhaal.klik op” dur=”1.6 s” />
</path>
</masker>
<masker id=”mask2″ maskUnits=”userSpaceOnUse”>
<pad stroke-dasharray=”350 350″ stroke-dashoffset=”350″ d=”…”>
<!– animatie begint aan het einde van de vorige –>
<animeren id=”animate2″ attributeName=”stroke-dashoffset”
from=”350″=”0″ begin=”animate1.einde” dur=”3.5 s” />
</path>
</masker>
<!– meer maskers… –>
<masker id=”mask15″ maskUnits=”userSpaceOnUse”>
<pad stroke-dasharray=”230 230″ stroke-dashoffset=”230″ d=”…”>
<!– plaats een kunstmatige pauze tussen de animaties, alsof de
borstel was opgeheven –>
<animeren id=”animate15″ attributeName=”stroke-dashoffset”
from=”230″=”0″ begin=”animate14.einde+0,5 s” dur=”2.3 s” />
</path>
</masker>

<g class=”borstel”>
<path id=”brush1″ d=”…”>
<!– Het masker is alleen van toepassing nadat een document start/herhaald en tot
de animatie is uitgevoerd. Dit zorgt ervoor dat de borstels zijn zichtbaar in
renderers die geen ondersteuning bieden voor SMIL –>
<set attributeName=”masker”= ‘ url(#mask1)”
begin=”0s;herhaal.klik op” end=”animate1.eind;van onbepaalde duur” />
</path>
<path id=”brush2″ d=”…”>
<set attributeName=”masker”= ‘ url(#mask2)”
begin=”0s;herhaal.klik op” end=”animate2.eind;van onbepaalde duur” />
</path>
<!– meer paden… –>
<path id=”brush15″ d=”…”>
<set attributeName=”masker”= ‘ url(#mask2)”
begin=”0s;herhaal.klik op” end=”animate15.eind;van onbepaalde duur” />
</path>
</g>

In tegenstelling tot de andere voorbeelden die we hebben kijkje op deze animatie maakt gebruik van SMIL, wat betekent dat het niet zal werken in Internet Explorer en de Rand.

Dit artikel is gepubliceerd in het duits dan in de Browser…unplugged.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!