Maak een animatie van een Blob van Tekst met SVG en Tekst Knippen

0
27

Ik kwam deze knappe animatie in een designer — nieuwsbrief- helaas verloor ik het spoor van de bron, dus geef maar een schreeuw het uit als je het herkent! In het, op een stratenblok van de tekst lijkt te bloeden in beeld met een werveling van kleuren, dan gaat het op dezelfde manier kwam. Het is een glad effect en ik wilde om te recreëren in de code.

De benadering die ik nam was gebruik te maken van SVG tekst als een clip op pad voor een SVG-achtergrond. We moeten gebruik maken van SVG tekst, omdat CSS momenteel alleen ons in staat stelt te animeren op de achtergrond met tekst knippen als de achtergrond is een GIF, dat gaan wij niet doen.

Onze eerste taak is het creëren van een achtergrond van verschillende SVG-vormen. Ovaal-y blobs goed werken. Het ding om er zeker van te overeenkomen met de grootte van het tekengebied/canvas in welke illustratie app die je gebruikt op dezelfde dimensie als de viewBox u wilt het uiteindelijke werk. (In Inkscape, deze optie is onder de sectie Schaal van de Eigenschappen van het Document.)

Het doel is om het grootste deel van het tekengebied met een verscheidenheid van vormen. Ik heb gevonden dat het beste lijkt als sommige van de vormen die elkaar overlappen.

Vervolgens maken we een tekst in een <clipPath>, groeperen van de objecten die de achtergrond in een <g> – element en het toepassen van een CSS-clip-pad op die groep. Alles bij elkaar is er ongeveer zo uit ziet:

<svg viewbox=”0 0 700 225″>

<clipPath id=”textClip” class=”gevuld rubriek”>
<tspan y=”70″>Wij</text>
<tspan y=”140″>Makers van</text>
<tspan y=”210″>+Innovators</text>
</clipPath>

<g id=”achtergrond” clip-path=”url(#textClip)”>
<path d=”m449.78…” />

</g>
</svg>

Op dit moment krijgen we een aantal duidelijke tekst omdat we nog niet aan toegekomen om de achtergrond animatie helemaal nog.

Dus hoe zit dat animatie? We kunnen gebruik maken van een relatief eenvoudige CSS animatie zoals deze:

/* Animeren van de achtergrond vormen */
#achtergrond pad {
animatie: pulse 4s kubieke bezier(0.455, 0.030, 0.515, 0.955) oneindig;

/* Nodig om de SVG-objecten in plaats zolang de schalen */
transform-herkomst: 50% 50%;
transform-box: invullen-vak;
}

@keyframes pulse {
/* Draai het samen met de schaal maakt het een beetje meer zin in */
0%, 100% { transform: schaal(0) draaien(33deg); }
35%, 65% { transform: schaal(1) te draaien(0deg); }
}

Zo ver, zo goed.

transform-box: invullen-vak; wordt niet ondersteund in Internet Explorer of Edge wordt op dit punt, dus als je behoefte aan ondersteuning van die browser, moet u gebruik maken van een JavaScript-oplossing, zoals deze.

Zie de Pen
Geanimeerde blob SVG-tekst knippen effect – Pt. 1 door Zach Saucier (@Zeaklous)
op CodePen.

We starten met het schilderen van dingen in het door het hard coderen van kleur waarden met behulp van een tekst-of vector editor, maar het is veel leuker om de kleur van de vormen dynamisch. Iets als dit:

// Definieer een array van kleuren
const kleuren = [‘#f5a147′,’#51cad8′,’#112b39’];
// Kies SVG-paden
var blobs = document.querySelectorAll(“path”);

// Willekeurig kleuren toepassen op de SVG vul eigendom
blob ‘ s.forEach(blob => {
blob.stijl.fill = kleuren[Math.verdieping(Math.random() * kleuren.de lengte)];
});

In volgorde om de tekst te wijzigen waarden voor elke iteratie, moeten we eerst toevoegen aan de SVG-clip pad.

<clipPath id=”text” class=”gevuld rubriek”>
<tspan y=”70″>Wij</text>
<tspan y=”140″>Makers van</text>
<tspan y=”210″>+Innovators</text>

<tspan y=”70″>Wij</text>
<tspan y=”140″>Verhuizen</text>
<tspan y=”210″>+Shakers</text>

<tspan y=”70″>Wij</text>
<tspan y=”140″>Stijlvolle</text>
<tspan y=”210″>+Techneut</text>
</clipPath>

Dan kunnen we het gebruik van CSS of JavaScript te geven van de lijnen van de tekst in onze volgorde van voorkeur. Helaas kunnen we geen surround elke sectie van het <text> met een <g> element omdat <g> – elementen niet werken in een clipPath. Voor dit bericht, we gaan splitsen dingen in drie CSS-animaties, één voor elke groep van drie wegen:

/* Hiermee selecteert u paden 1-3 */
#textClip tekst:nth-of-type(n + 1):nth-of-type(-n + 3) {
animatie: showFirst 12s oneindig;
}

/* Hiermee selecteert u paden 4-6 */
#textClip tekst:nth-of-type(n + 4):nth-of-type(-n + 6) {
animatie: showSecond 12s oneindig;
}

/* Hiermee selecteert u paden 7-9 */
#textClip tekst:nth-of-type(n + 7):nth-of-type(-n + 9) {
animatie: showThird 12s oneindig;
}

@keyframes showFirst {
0%, 33% {
dekking: 1;
}
33.0001%, 100% { opacity: 0; }
}

@keyframes showSecond {
33.0001%, 66% {
dekking: 1;
}
0%, 33%, 66.0001%, 100% { opacity: 0; }
}

@keyframes showThird {
66.0001%, 99.999% {
dekking: 1;
}
0%, 66%, 100% { opacity: 0; }
}

Dat is de truc!

Zie de Pen
Geanimeerde blob SVG-tekst knippen effect – Pt. 2 door Zach Saucier (@Zeaklous)
op CodePen.

Op dit punt, kunnen we een beetje plezier. Bijvoorbeeld, kunnen wij swap-achtergronden voor een ander effect. Ik gebruikte Inkscape ‘ s star instrument met drie tot vier punten voor het genereren van willekeurige vormen (met Inkscape willekeurige parameter) en daarna gekleurd met behulp van een palet van één van de vele kleurenschema generatoren (ik gebruikte Palx) voor de productie van deze versie:

Zie de Pen
Geanimeerde blob SVG-tekst knippen effect – Pt. 3 door Zach Saucier (@Zeaklous)
op CodePen.

De achtergronden hoeft er zelfs niet in te vullen de hele achtergrond, afhankelijk van het effect dat we willen maken. Bijvoorbeeld, konden we dupliceren de tekst met behulp van een element en vult u de tekst met behulp van dat zoals te zien in deze demo.

Of we kunnen meng het door het draaien van de achtergrond blob ‘ s zoals deze:

Zie de Pen
Geanimeerde blob SVG-tekst knippen effect – Pt. 5 door Zach Saucier (@Zeaklous)
op CodePen.

De kleuren wijzigen voor elke nieuwe reeks van woorden, we konden gebruik maken van een CSS-of JavaScript-voor de animatie. Ik gebruikte JavaScript (en verplaatst de CSS-animaties, dat was het verbergen van de tekst van de lijnen om de JavaScript-code):

Zie de Pen
Geanimeerde blob SVG-tekst knippen effect – Pt. 6 door Zach Saucier (@Zeaklous)
op CodePen.

Naar het midden van de tekst horizontaal, voeg x=”50%” text-anchor=”middle” <tekst> – element (Demo). Het centreren van het verticaal zou meer handmatige berekening, omdat we werken met een multi-lijn-formaat.

Een van de leuke dingen over deze aanpak is dat, sinds het gebruik van SVG, het is responsief standaard!

P. S. Nadat ik dit aanpak en was op zoek naar de originele GIF auteur, stuitte ik op een andere recreatie door Martí Energiebedrijf doet het zelfde effect met behulp van een andere aanpak. Check zijn demo uit, want het is slim!