Masking Gif ‘ s met andere GIFs

0
8

De andere dag, Cassie Evans tweeted een echt handige truc die ik nooit eerder heb gezien: met behulp van SVG te maskeren één GIF op de top van een ander. Het effect is heel mooi, vooral als je toevallig om te grijpen een kleurrijke GIF en het op de top van een monochrome een:

Zie de Pen
Masking gif ‘s met andere gif’ s… (svg-masking is cool) van Cassie Evans (@cassie-codes)
op CodePen.

Gezien het feit dat ik nog nooit iets gedaan met SVG maskers voor, ik dacht dat ik wel snel op te zoeken over de code en het ontleden om te zien hoe Cassie maakte eerder dit mooie demo! Het interessante ding over dit alles, maar hoe redelijk eenvoudig het is.

Dingen kick off, we pakken het GIF dat we willen gebruiken als onze SVG-masker. Wij kunnen halen uit GIPHY:

via GIPHY

Vervolgens kunnen wij beginnen met het schrijven van onze SVG rechtstreeks in de HTML-code van de pagina: we beginnen met het toevoegen van een tag die kan worden gebruikt voor het opslaan van activa die we verwijzen in een ander deel van dezelfde SVG:

<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 300 300″>
<defs>
<masker id=”MASKER” maskunits=”userSpaceOnUse”
maskcontentunits=”userSpaceOnUse”>
<afbeelding
xlink:href=”https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif”
height=”100%”
width=”100%”/>
</masker>
</defs>
</svg>

Als u een kijkje nemen op dat <masker> – element, zie je dat Cassie heeft toegevoegd id=”MASKER” en dit is hoe verwijzen wij u naar het masker later op in het bestand, door te wijzen naar deze id attribuut.

Nu kunnen we verder gaan en halen onze volgende animatie (maar dit keer een koele GIF van de ruimte):

Laten we hieraan toevoegen dat GIF in een <g> – element en breng het masker kenmerk is, zoals zo:

<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 300 300″>
<defs>
<masker id=”MASKER” maskunits=”userSpaceOnUse”
maskcontentunits=”userSpaceOnUse”>
<afbeelding
xlink:href=”https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif”
height=”100%”
width=”100%”/>
</masker>
</defs>
<g masker= ‘ url(#MASKER)”>
<afbeelding x=”0″ y=”0%” class=”space” href=”https://media.giphy.com/media/MXQnyEQwBJ6eTj90L5/giphy.gif”
height=”100%” width=”100%”/>
</g>
</svg>

SVG-code kan er best eng op het eerste gezicht, vooral als je niet bekend bent met het. Het zou het beste zijn om te breken alle deze dingen op in twee delen. Ten eerste, het definiëren van het masker…

<defs>
<masker id=”MASKER” maskunits=”userSpaceOnUse”
maskcontentunits=”userSpaceOnUse”>
<afbeelding
xlink:href=”https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif”
height=”100%”
width=”100%”/>
</masker>
</defs>

…en vervolgens met dat masker…

<g masker= ‘ url(#MASKER)”>
<afbeelding x=”0″ y=”0%” class=”space” href=”https://media.giphy.com/media/MXQnyEQwBJ6eTj90L5/giphy.gif”
height=”100%” width=”100%”/>
</g>

Zodra we breken op, het maakt veel meer zin, hè? En daar heb je het! Twee geanimeerde Gif-bestanden gebruikt als een SVG-masker. Het is een super handige truc.

Cassie nog een voorbeeld, maar dit keer een jumping ruimte monster:

Zie de Pen
Ruimte monster (svg-masking is cool) van Cassie Evans (@cassie-codes)
op CodePen.