Gradienttien animointi reagoivassa alkuperäisessä

Työskentelen henkilökohtaisessa projektissa nimeltä KaoCards, muistikorttisovellus, jolla muistetaan ihmisten nimet ja kasvot. Suunnitellessani tuotetta luulin, että olisi hienoa olla animoitu kaltevuus taustana, mutta kun yritin toteuttaa, se osoittautui enemmän työtä kuin luulin.

Joten tässä on tarina siitä, kuinka onnistuin saamaan sen toimimaan. Jos haluat TL; DR: n, tein arkiston, jota voit seurata.

Naiivi yritys.

Jos haluat ymmärtää tämän, on tärkeää tietää, miksi ensimmäinen yritys ei toiminut.

Gradientin näyttämiseksi reagoivassa natiivissa ihmiset käyttävät projektia, jonka nimi on reagoida natiivi-lineaarinen-kaltevuus. Halusin nähdä, onko kukaan yrittänyt animoida värejä, ja löysin Animoidun gradientinsiirtymän esimerkin tuosta reposta. Kun katselin koodia, minulla oli tämä reaktio:

En ymmärtänyt miksi se tarvitsi kahta luokkaa, miksi koodia oli niin paljon. En uskonut, että tarvitset niin paljon. Päätin, että en aio vaivautua ymmärtämään kaikkea tätä. Ajattelin, että tapa saada tämä tehdään pitäisi olla melko yksinkertainen:

  1. Luo AnimatedLinearGradient-komponentti käyttämällä Animate.createAnimatedComponent
  2. Interpoloi joitain värejä ja välitä ne AnimatedLinearGradient-sovellukseen

Yksinkertainen, eikö totta? Tässä on lähde (se kaatuu). Tein kokeellisen sovelluksen, suoritin sen ja sitten synnytinpussin. Saimme virheen:

Tyypin NSNull JSON-arvoa  `ei voida muuntaa UIColor-arvoksi. Unohditko soittaa processColor (): lle JS: n puolella?

Jokin jonnekin linjan alapuolella ei saanut väriarvoja. Joten käännyin Twitteriin saadaksesi apua:

Jason Brown vastasi avainkäsityksellä:

Aaahhh ok! Animoitu ei toimi taulukkojen kanssa. Vaikka ajattelin tekevän kaiken oikein, animoitu kirjasto ei käsittele ryhmätukiarvojen arvoja, joten taustalla oleva alkuperäinen komponentti saa roskien animoitujen värien sijasta.

Kävi selväksi, miksi alkuperäinen esimerkki oli niin iso.

Rakennat sen oikein.

Ok, ymmärtäessämme tämän animoidun rajoituksen, muokataan pelisuunnitelmaa ja tehdään siitä hieman tiukempi.

  1. Haluamme, että pääkomponentti, AnimatedGradient, toimisi aivan kuten LinearGradient. Sen pitäisi olla joukko värejä.
  2. Haluamme siirtymisen tapahtuvan, kun muutamme värejä prop. Tätä varten AnimatedGradient pitää seurata aiempia värejä.
  3. Koska arvoja ei voida animoida taulukkoissa, voimme rakentaa GradientHelper-komponentin, joka ottaa värit erikseen, ja soittaa siitä Animated.createAnimatedComponent. GradientHelper sijoittaa arvot taulukkoon ja siirtää ne LinearGradient-komponenttiin reagoi-natiivi-lineaarinen-gradientin paketista.

Jotta asiat olisivat yksinkertaisia ​​tässä esimerkissä, oletamme, että värimatriisilla on vain 2 arvoa.

AnimatedGradient-komponentti

Lähdekoodi

Ensinnäkin luomme AnimatedGradientHelper GradientHelper -sovelluksesta, jonka teemme vähän.

Animoidun gradientin rakentajassa alustamme prevColors-tilakentän seurataksesi edellisiä värejä. Alustamme myös animoidun arvon, nimeltään tweener.

GetDerivedStateFromProps-sovelluksessa otamme state.colors -arvon ja pysymme state.prevColors -merkinnässä. Asetimme uudet state.colors, ja palautimme tweenerin.

KomponentissaWillUpdate (eli kun rekvisiitta muuttuu), siirrämme tweenerin siirtymään nollasta yhteen.

Renderöintimenetelmässä käytämme tweener-, prevColors- ja värejä luomaan kaksi väriinterpolointia ja välittämään ne erikseen AnimatedGradientHelper -sovellukselle.

Gradient Helper

Lähdekoodi

GradientHelperissä kaikki, mitä teemme, on ottaa väri1 ja väri2 rekvisiitta, laittaa ne taulukkoon ja siirtää se LinearGradientille. Teemme tämän, koska meidän on kiertävä Animated-rajoituksia.

Ja se on sen ydin. Tässä on demo:

Nyt tiedämme, miksi alkuperäinen esimerkki on niin iso. Sen piti tehdä kaikki nämä asiat ja käsitellä kaltevuuksia, joissa oli yli 2 väriä.

Mutta odota, mitä muuta voimme animoida?

Voimme todella siirtyä ylimääräiseen vaiheeseen ja animoida muita ominaisuuksia. LinearGradient-komponentti antaa sinun määrittää koordinaatit kaltevuuden alulle ja lopulle. Miksi ei interpoloida myös niitä? Tässä on päivitetty renderöintimenetelmä. Voit todennäköisesti arvata, mitä tapahtui muulle komponentille. Lähde

Meidän täytyy vain säätää GradientHelper -sovellusta hiukan tekemällä jotain rekvisiittien kanssa. Lähde

Ja nyt meillä on viileämpi demo.

Pystyin yhdistämään tämän animoidun gradientin joidenkin muiden animaatioiden kanssa luodaksesi viileän taustatehosteen KaoCards-projektilleni:

Joten, nyt tiedät, kuinka animoida kaltevuudet React Native -versiossa, ja vähän enemmän siitä, kuinka Animoitu toimii. Mitä muita ominaisuuksia luulet pystyväsi animoimaan?

Kiitos Jason Brownille, joka tarjosi avaintiedot. Olen oppinut häneltä kaiken, mitä olen oppinut React Native -aineiden animoinnista. Seuraat häntä Twitterissä ja tutustu hänen React Native Animations -kurssille.