Animere en Blob av Tekst med SVG og Tekst Klipping

0
21

Jeg kom over denne ryddig liten animasjon i en designer nyhetsbrev — dessverre, jeg mistet oversikten over kilden, så må du gi et rop ut hvis du kjenner det igjen! I det, en blokk med tekst ser ut til å blø inn i visningen med en virvel av farger, går deretter ut på samme måte som den kom inn. Det er en glatt effekt, og jeg ønsket å gjenskape i koden.

Den tilnærming jeg tok var å bruke SVG tekst som et klipp-banen for en SVG-bakgrunn. Vi må bruke SVG tekst, fordi CSS for øyeblikket bare tillater oss å animere bakgrunn med tekst klipping hvis bakgrunnen er en GIF -, som vi kommer ikke til å gjøre.

Vår første oppgave er å lage en bakgrunn av ulike SVG-former. Oval-y blobs fungerer ganske bra. Ting å gjøre sikker på, er å matche størrelsen på tegnebord/lerret i hvilken illustrasjon appen du bruker til samme dimensjon som viewBox du vil det endelige arbeidet. (I Inkscape, dette alternativet er under Skala delen av Dokumentet Egenskaper.)

Målet er å dekke det meste av tegnebord med i en rekke former. Jeg har funnet ut at det ser best ut hvis noen av de former som overlapper hverandre.

Neste, vi vil lage en tekst inn i en <clipPath>, gruppe objekter som utgjør bakgrunnen inni en <g> – element, og bruke en CSS-clip-banen på at gruppen. Helt det ser ut som dette:

<svg viewbox=”0 0 700 225″>

<clipPath id=”textClip” class=”fylt overskriften”>
<tekst y=”70″>Vi er</text>
<tekst y=”140″>Skaperne</text>
<tekst y=”210″>+Innovatører</text>
</clipPath>

<g id=”bakgrunn” klipp-path=”url(#textClip)”>
<bane d=”m449.78…” />

</g>
</svg>

På dette punktet, alt vi får er noen vanlig tekst, fordi vi har ikke fått rundt til bakgrunnen animasjon helt ennå.

Så hva om animasjon? Vi kan bruke en relativt enkel CSS-animasjon som dette:

/* Animere bakgrunn former */
#bakgrunnen banen {
animasjon: puls 4s kubikk-bezier(0.455, til 0,030, 0.515, 0.955) uendelig;

/* Nødvendig for å holde SVG-objekter i sted, mens skalering */
transform-opprinnelse: 50% 50%;
transform-boksen: fyll-boks;
}

@keyframes puls {
/* Roterende det sammen med skala gjør det litt mer fancy */
0%, 100% { forvandle: skala(0) roter(33deg); }
35%, 65% { forvandle: skala(1) roter(0deg); }
}

Så langt, så bra.

transform-boksen: fyll-boksen, støttes ikke i Internet Explorer eller Kant på dette punktet, så hvis du trenger til å støtte de nettlesere, må du bruke en JavaScript-løsning, slik som denne.

Se Penn
Animerte blob SVG tekst klipping effekt – Pt. 1 av Zach Saucier (@Zeaklous)
på CodePen.

Vi kan begynne å male ting i av hard-koding farge verdier ved hjelp av en tekst eller vektorgrafikk editor, men det er mer moro å fargelegge figurer dynamisk. Noe sånt som dette:

// Definerer en rekke farger
const farger = [‘#f5a147′,’#51cad8′,’#112b39’];
// Velger SVG veier
var blobs = – dokument.querySelectorAll(“path”);

// Tilfeldig bruke farger til SVG fylle eiendom
blobs.forEach(blob => {
blob.stil.fyll = farger[Matematikk.gulv(Matematikk.tilfeldig() * farger.lengde)];
});

For å endre på tekst-verdier for hver iterasjon, må vi først legge dem til SVG klippet banen.

<clipPath id=”tekst” class=”fylt overskriften”>
<tekst y=”70″>Vi er</text>
<tekst y=”140″>Skaperne</text>
<tekst y=”210″>+Innovatører</text>

<tekst y=”70″>Vi er</text>
<tekst y=”140″>Movers</text>
<tekst y=”210″>+Shakers</text>

<tekst y=”70″>Vi er</text>
<tekst y=”140″>Stilig</text>
<tekst y=”210″>+Techy</text>
</clipPath>

Da kan vi enten bruke CSS eller JavaScript for å avsløre linjer med tekst i vår foretrukket rekkefølge. Dessverre kan vi ikke surround hver del av <tekst> ved hjelp av a <g> – element fordi <g> – elementer ikke fungerer på innsiden av en clipPath. For dette innlegget, vi kommer til å splitte opp ting i tre CSS-animasjoner, en for hver gruppe av tre baner:

/* Velger stier 1-3 */
#textClip tekst:nth-of-type(n + 1):nth-of-type(-n + 3) {
animasjon: showFirst 12s uendelig;
}

/* Velger stier 4-6 */
#textClip tekst:nth-of-type(n + 4):nth-of-type(-n + 6) {
animasjon: showSecond 12s uendelig;
}

/* Velger veier 7-9 */
#textClip tekst:nth-of-type(n + 7):nth-of-type(-n + 9) {
animasjon: showThird 12s uendelig;
}

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

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

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

Som gjør susen!

Se Penn
Animerte blob SVG tekst klipping effekt – Pt. 2 av Zach Saucier (@Zeaklous)
på CodePen.

På dette punktet, kan vi ha det litt moro. Vi kan For eksempel bytte bakgrunn for en annen effekt. Jeg brukte Inkscape er stjerners verktøy med tre til fire poeng for å generere noen tilfeldige former (med Inkscape er tilfeldig parameter), og deretter farget dem ved hjelp av en palett fra en av de mange fargevalg generatorer (jeg brukte Palx) til å produsere denne versjonen:

Se Penn
Animerte blob SVG tekst klipping effekt – Pt. 3 av Zach Saucier (@Zeaklous)
på CodePen.

Bakgrunnene som ikke engang trenger å fylle opp hele bakgrunnen, avhengig av den effekten vi ønsker å skape. For eksempel, vi kan kopiere tekst ved å bruke et element, og fyller inn tekst ved hjelp av det som vi har sett i denne demoen.

Eller vi kunne blande den opp ved å dreie på bakgrunn blobs som dette:

Se Penn
Animerte blob SVG tekst klipping effekt – Pt. 5 av Zach Saucier (@Zeaklous)
på CodePen.

For å gjøre fargene endres for hvert nytt sett av ord, kan vi enten bruke en CSS eller JavaScript for animasjon. Jeg brukte JavaScript (og flyttet CSS-animasjon som var gjemt teksten linjer til JavaScript):

Se Penn
Animerte blob SVG tekst klipping effekt – Pt. 6 av Zach Saucier (@Zeaklous)
på CodePen.

For å sentrere teksten horisontalt, legge til x=”50%” tekst-anker=”middle” til hver <text> – element (Demo). Sentrering det vertikalt ville ta mer manuell beregning siden vi jobber med en multi-line-format.

En av de fine tingene med denne tilnærmingen er at, siden den bruker SVG, det er responsiv standard!

P. S. Etter at jeg laget denne tilnærmingen, og var på jakt etter den opprinnelige GIF forfatter, kom jeg over en annen rekreasjon av Martí Fenosa å gjøre den samme effekten ved å bruke en annen tilnærming. Sjekk hans demo ut så godt fordi det er smart!