HOE TE GEBRUIKEN REAICT Spring om componenten te animeren

React Lente kan u helpen met animaties, die notoir lastig zijn om op internet te implementeren. CSS-animaties zijn de beste keuze, maar het creëren van een soepel resultaat, vereist voorzichtig jongleren van klassen, duur en evenementen. Gooien een JavaScript Framework Zoals reageren in de mix bemoeilijkt alleen dingen verder.

Voor animaties die afhankelijk zijn van gebruikersinteractie, kunnen waarden worden berekend via JavaScript en rechtstreeks op een element aangebracht. Door deze handmatige aanpak te nemen, moeten we onze eigen versoepeling berekenen en toepassen om de animatie natuurlijker te maken.

Reageer de lente is een bibliotheek die is gebouwd om te gaan met veel van de gemeenschappelijke hang-ups als het gaat om animatie op het web. Het duurt een iets andere benadering, door zich te concentreren op natuurkunde over rechte duur en gedefinieerde versoepelingsfuncties. Dit helpt om dingen soepel en natuurlijk te houden.

Hoewel dit meestal wordt gebruikt voor visuele effecten, gaat de bibliotheek over tussen twee waarden, ongeacht of die waarde ooit wordt gebruikt voor een stijl of niet. Het kan bijvoorbeeld worden gebruikt om een ​​aantal aanmeldingen op te tellen om te benadrukken hoe groot een gemeenschap is.

In deze tutorial maken we een kaartcomponent waarmee gebruikers afbeeldingen kunnen beoordelen. De kaartflips om een ​​sterrenclassificatie te onthullen en gebruikers kunnen klikken om hun eigen toe te voegen. We zullen de nieuwere hakenimplementatie van React Spring gebruiken, die reageer versie 16.8 of hoger vereist. Voordat je start, Download de tutorial-bestanden hier (en back-up in cloud opslag ​

Als u een site wilt bouwen zonder complexe codeprocessen, gebruikt u een fatsoenlijk website bouwer ​En verkennen web hosting Ook opties.

01. Installeer afhankelijkheden

Met de gedownloade bestanden moeten de afhankelijkheden van de pakket worden geïnstalleerd voordat we kunnen beginnen. Dit Create React-app-gebaseerde project bevat de reageer Pakket en alle nodige lokale server die nodig is om aan de slag te gaan.

Zoek in de opdrachtregel de projectbestanden en installeer ze en voer ze vervolgens uit.

 & GT; garen
& GT; Garen Start 

02. Genereer afbeeldingen in de staat

Ten eerste hebben we wat afbeeldingen nodig om te beoordelen. Voor deze tutorial gaan we een aantal afbeeldingen van harde code in de applicatietoestand, maar deze gegevens kunnen van elke bron komen. Open App.js en maak wat afbeeldingen met de gebruikelijk haak van reageren. Dit geeft elk beeld een initiële beoordeling die we later kunnen weergeven en bijwerken.

 Const [kaarten] = usestate ([
createimage (afbeelding1),
createimage (afbeelding2),
createimage (afbeelding3)
]); 

03. Alle beeldkaart weergeven

Naarmate de afbeeldingen in een array worden opgeslagen, kunnen we over die staat lussen en afzonderlijke componenten voor elk maken. De animatie-logica voor reagerende lente zal in een & LT; RatingsCard / GT; Component die we overal kunnen gebruiken die we nodig hebben.

Binnen de rendermethode van app.js, maak een kopie van die component voor elke kaart in de staatsarray. Het ontvangt elke waarde in de staat, inclusief de afbeelding en de initiële beoordeling.

 {kaarten.map ((kaart, index) = & gt; (
& LT; RATINGSCARD KEY = {INDEX} {... Kaart} / & GT;
))} 

04. Kaartstructuur toevoegen

Voordat we de animatie kunnen toevoegen, heeft de kaart wat inhoud nodig. Elke kaart heeft een voor- en achterkant, die als afzonderlijk worden geïmplementeerd & LT; DIV & GT; elementen gelaagd op elkaar.

Open Ratingscard / index.js en voeg de structuur van de kaart toe. We moeten het beeld als achtergrond op de voorkaart toepassen, met de rug die uiteindelijk de rating bevat.

 & lt; div classname = "Ratingscard" & GT;
& lt; div
ClassName = "Ratingscard__rought"
Style = {{
backgroundimage: `URL ($ {afbeelding})`
​
/ & GT;
& LT; DIV CLASSNAME = "RATINGSCARD__BACK" / GT;
& lt; / div & gt; 

05. Breng hover-stijlen aan

Alle stijlen die niet rechtstreeks worden bijgewerkt via onze animaties kunnen via CSS worden toegepast. Dit omvat het basis-3D-schaduweffect voor elke kaart wanneer ze overhorven. Binnen RatingsCard / Style.CSS , voeg wat extra stijlen toe om de kaart uit de pagina op te laten springen door een filter aan te brengen.

 .Ratingscard: zweven {
Filter: drop-shadow (0 14px 28px
RGBA (0, 0, 0, 0.25))
Drop-Shadow (0 10px 10px
 RGBA (0, 0, 0, 0.1));
} 

06. Standaard de schaduw instellen

Een plotselinge schaduw op hover is een schokkende ervaring. We moeten daarom langzaam overgaan tussen staten om de dingen glad te houden. Voeg een subtieller-druppelschaduw voor de kaart toe wanneer u niet overhordt. Gebruik de overgang eigendom om tussen die twee staten te animeren.

 .Ratingscard {
​
Filter: drop-shadow (0 3px 6px
RGBA (0, 0, 0, 0.16))
Drop-Shadow (0 3px 6px
RGBA (0, 0, 0, 0.1));
Overgang: filter 0,5s;
} 

07. Houd de geselecteerde staat vast

We moeten informatie opslaan en bijwerken over welke kant van de kaart naar boven is. We kunnen de ingebouwde van Readact gebruiken gebruikelijk Haak om een ​​startwaarde te definiëren en het laat het de huidige waarde en een methode retourneren om het bij te werken.

Aan het begin van de Ratingscard Componentfunctie, maak dit definiëren dit geselecteerd staat.

 const [geselecteerd, ingesteld]
 = gebruik (false); 

08. Definieer de flip-animatie

Reageer de lente is verantwoordelijk voor het overgaan van nummers tussen de ene waarde en een andere. Dit kan worden gedaan met een veer en de gebruik haak. We bieden het enkele instellingeninformatie en het retourneert een reeks waarden die updaten volgens de natuurkundige berekeningen.

Maak een veer voor de flip-animatie. Deze zal een kaart vervagen en draaien, afhankelijk van of de kaart in zijn geselecteerd staat.

 const {dekking, transformatie}
 = GEBRUIK ({
Dekking: geselecteerd? 1: 0,
Transformeren: `Rotatey (
$ {geselecteerd? 180: 0} deg) `
}); 

09. Converteren naar geanimeerde container

De objecten geretourneerd door gebruik Definieer hun animatie, maar verstrek de numerieke waarden die we nodig hebben niet. De geanimeerd Fabrieksfunctie verteert deze informatie en levert de waarden vervolgens als nummers aan de componenten.

Converteer de Ratingscard element om de geanimeerd functie. De animated.div Syntaxis vertelt de functie om een ​​te retourneren & LT; DIV & GT; ​

 & lt; animated.div classname = "Ratingscard" & GT;
& lt; animated.div
ClassName = "Ratingscard__rought"
Style = {{
backgroundimage: `URL ($ {afbeelding})`
​
/ & GT;
& lt; animated.div classname =
"RatingsCard__Back" / & GT;
& lt; /animated.div> 

10. Animeer de voorste kaart

React Lente animeert alleen de waarden en doet geen animatie van elementen zelf. We kunnen die waarden koppelen aan een stijl prop en die animatie on the fly maken. Werk de voorkaart bij om gebruik te maken van het nieuwe opaciteit en transformeren waarden. In dit geval zullen we de dekking van de dekking moeten interpoleren, die we binnenkort zullen behandelen.

 & lt; animated.div
ClassName = "Ratingscard__rought"
Style = {{
Achtergrond: `URL ($ {afbeelding})`,
Dekking: Dekking.Interpolaat (
InverseOpacity),
transformeren
​
/ & GT; 

11. Animeer de achterkaart

Wanneer u de kaart omdraait, moet u ongeacht de animatie die we op één gezicht van toepassing zijn om achteruit te worden toegepast aan de andere. Wanneer ze samen worden gespeeld, zullen ze eruit zien alsof ze als één stuk bewegen.

In dit geval moeten we dezelfde stijlen toepassen op de achterste kaart, maar deze keer interpoleer de transformeren waarde in plaats daarvan.

 & lt; animated.div
ClassName = "RatingsCard__Back"
Style = {{
Dekking,
Transformeren: transformeren
.Interpolate (inversetransform)
​
/ & GT; 

12. interpoleer de waarden

In plaats van rechtstreeks waarden toe te passen op CSS-eigenschappen, kunnen we een soort functioneren toepassen, om hun waarde aan een andere te plaatsen. Dit proces wordt interpolatie genoemd.

Definieer een paar interpolatie-functies naar de top van Ratingscard / index.js ​Deze passen het omgekeerde van zowel de dekking toe als transformeer animaties bij het selecteren of deselecteren.

const-inferentiviteit = O = & GT; 1 - O;
const inversetransform = t = & gt;
 `$ {t} rotatie (180DEG)`; 

13. Toggle State On Click

Het flipping van de kaart moet aan een klik worden gebonden. Als de geselecteerd Staatwaarde bepaalt welk gezicht zichtbaar is, we moeten die staat schakelen bij het klikken op de kaart.

Voeg een klik luisteraar toe aan de buitenste Ratingscard element. Wanneer dit gebeurt, schakelt het de Booleaanse waarde in staat aan.

 & lt; animated.div
ClassName = "Ratingscard"
onclick = {() = & gt;
Geschikte (! Geselecteerd)}
& GT; 

14. Pas de PLIP-natuurkunde van de kaart aan

Op dit moment werkt onze animatie, maar het lijkt meer een drijver dan een flip. We kunnen enkele waarden op elke veer veranderen om te veranderen hoe deze zich gedraagt. Maak in het setup-object voor de lente, maak een config object om de wrijving te verlagen en de spanning te verhogen. Dit geeft de animatie een Snappier-gevoel.

 GEBRUIKSPRING ({
config: {
Wrijving: 22,
Tension: 500
​
​
}); 

15. Maak de lente voor kantelteffect

Terwijl het CSS-aangedreven zweeftijd van eerder een feedback geeft, kunnen we dat verder verbeteren door een kantelmening te hebben die reageert op de cursorpositie. Bij het bijwerken van een veer met een hoge frequentie, zoals een muisbeweging, kunnen we betere prestaties krijgen met behulp van de instellen functie die wordt geretourneerd door elke lente. Maak een nieuwe lente voor deze animatie en houd de geretourneerde functie vast.

 const [rekwisieten, set] = gebruikspring (() = & gt; ({
Staat: [0, 0, 1]
​
)); 

16. Breng tilt-stijlen aan

React Spring kan veel verschillende waarden animeren, die arrays omvat. Opslaan van onze waarden in één array stelt ons in staat om ze allemaal op de te interpoleren transformeren onroerend goed in één pas.

Maak een transformcard Interpolation-functie en breng de stijlen aan op de hoofdkantoor Ratingscard element.

 const transformCard = (x, y, schaal) = & gt;
 `perspectief (1000px) rotatex ($ {x} deg)
rotatie ($ {y} deg) schaal ($ {schaal}) `;
​
& lt; animated.div
 ClassName = "Ratingscard"
 onclick = {() = & gt; Geschikte (! Geselecteerd)}
 Style = {{transformatie:! geselecteerde & amp; & amp;
props.state.interpolate (
TransformCard)}} & GT; 

17. Stel waarden in op muisbeweging

Muisevenementen bieden de coördinaten van de cursor op dat moment. We zijn geïnteresseerd in de klantcoördinaten om de cursorpositie binnen de viewport te krijgen. Voeg de muisbeweging toe en laat evenementen aan de buitenkant & LT; DIV & GT; ​We passeren de coördinaten in een functie in beweging en resetten naar de standaardwaarden wanneer de cursor de cursor verlaat & LT; DIV & GT; ​

 OnmousEave = {() = & GT; set ({
 Staat: [0, 0, 1]})}
onmousemove = {({clientx: x,
 CLANTY: Y}) = & GT; set ({
 Staat: berekeningswaarden (x, y)})
} 

18. Bereken de animatiewaarden

We willen alleen een kleine kanteling om de kaart te vermijden te veel te bewegen wanneer de gebruiker ermee communiceert. De berekeningen Functie werkt aan de zijkant van het scherm waarop de cursor is ingeschakeld en naar die richting kantelt.

Maak de functie om die waarden in te vullen. Verdelen door 40 vermindert het kantelteffect om het bruikbaarder te maken. De uiteindelijke waarde zal de kaart visueel van het scherm opvoeden.

 Const calculateValues ​​= (x, y) = & gt;​
- (Y - venster.innerHeight / 2) / 40,
(x - venster.innerwidthth / 2) / 40,
1.1]; 

19. Toon sterrenclassificatie

Elke afbeelding heeft een beoordeling die we moeten weergeven in sterren op de achterkant van de kaart. Deze logica wordt in zijn eigen component gehouden, maar dat moet eerst op de achterkant worden aangebracht.

Maak eerst een nieuw stukje staat om de rating vast te houden, maak dan een & LT; StarRating & GT; component in de achterkant gericht & LT; DIV & GT; ​

 const [openstelling, setrating]
 = gebruik (beoordeling);
​
{geselecteerde & amp; & amp;​
 & LT; Startrating Rating = {WiringRating}
SETRING = {SETRING} / & GT;
)} 

20. Maak Star-animatie

De sterbeoordelingen gaan fade in zodra de kaart is omgedraaid. Door de usetrail Haak van reageerveer, kunnen we springt aan meerdere componenten toepassen, een na de andere.

Openen Starrating / Index.js en voeg de haak toe. Het eerste argument zal het aantal veren definiëren om te maken.

 const animatedstars = usetrail (5, {
config: {
Wrijving: 22,
Tension: 500
​
Van: {Dekking: 0,
Transformeren: "Schaal (0.8)"},
Dekking: 1,
Transformeren: "Schaal (1)"
}); 

21. Breng sterren aan op component

Het laatste dat we moeten doen is die sterren daadwerkelijk weergeven. De animatedstars Variabele bevat nu een array van veren, die we kunnen herhalen en van toepassing zijn op de kaart.

Toon voor elke ster een & lt; animatedstar & gt; component in de hoofd Starrating div. Verspreid de stijl-rekwisieten om alle effecten toe te passen op elk onderdeel. Stuur wanneer ingekeld de nieuwe beoordeling naar de ouder & LT; beoordelingCard & GT; component.

 {animatedstars.map ((rekwisieten, index) = & gt; (
& lt; animatedstar
Active = {index + 1 & lt; = beoordeling}
onclick = {e = & gt;​
e.stoppropagatie ();
SETRING (INDEX + 1);
​
sleutel = {index}
Style = {{... rekwisieten}}
/ & GT;
))} 

Dit artikel is oorspronkelijk gepubliceerd in Creative Web Design Magazine Webdesigner ​ Koop Issue 288 of inschrijven ​

Lees verder:

• Ontwikkel herbruikbare reageercomponenten
• De beste laptops voor programmeren in 2019
• 35 Webontwerphulpmiddelen om u te helpen slimmer te werken