Animated1.0.0

Noin 5 minuuttia · React 16.8+ · React DOM

Aloittaminen

Asennuksesta eleisiin sekä saapumis- ja poistumisliikkeeseen kuudessa vaiheessa. Jokainen vaihe on pieni toimiva komponentti.

  1. Asennus

    Animatedilla ei ole ajonaikaisia riippuvuuksia. React 16.8+ on peer-riippuvuus.

    Paketin aloituspiste on merkitty 'use client' -direktiivillä. Next.js App Routerissa palvelimen layout voi renderöidä AnimatedProvider-komponentin; käytä hookeja ja Animated.<tag>-elementtejä Client Componentsien sisällä.

    npm install @kkwaenggwari/animated

    @kkwaenggwari/animated-import ratkeaa editorissasi.

  2. Liikuta ensimmäistä arvoa

    useAnimatedValue(1) omistaa elävän luvun koko komponentin elinkaaren ajan. Laita se suoraan style-propsiin: siitä tulee CSS-muuttuja, joten React ei renderöi sen muuttuessa.

    timing(value, { toValue, duration }).start() liikuttaa sitä. Uusi painallus puolivälissä alkaa nykyisestä peittävyydestä.

    Valmistellaan esimerkkiä…

    Kehys himmenee ja palaa, ja toinen painallus puolivälissä kääntää suunnan siitä, missä se on.

  3. Johda monta tulosta yhdestä arvosta

    interpolate kuvaa arvon pituuksiksi, kulmiksi tai luvuiksi. Ilman easingia siitä tulee saman muuttujan tarkka calc(), joten viisi kaistaa maksaa saman verran kuin yksi.

    Saman arvon eri syötealueet luovat porrastuksen ilman viittä erillistä animaatiota.

    Valmistellaan esimerkkiä…

    Yksi painallus liikuttaa viittä kaistaa porrastetusti; hajonnan muuttaminen muuttaa vain alueita.

  4. Kuvaa kohde

    Animated.button renderöi tavallisen painikkeen. seed on ensimmäinen ruutu, pose on se, missä sen pitää nyt olla, ja tempo on se, miten se pääsee sinne.

    Kun pose muuttuu puolivälissä, elementti kääntyy siitä, missä se näytöllä on, ja jousella se säilyttää nopeutensa.

    Valmistellaan esimerkkiä…

    Välilehtien nopea napsauttelu ei koskaan saa yhtäkään hyppäämään.

  5. Kytke syöte

    input(ref, moveInput(...)) kirjoittaa osoittimen koordinaatit arvoihin. follow(target, source) saa yhden arvon seuraamaan toista jousella.

    Kaikki, mikä on määritelty useAnimated-factoryssa, kuuluu komponentille: listenerit ja jouset pysähtyvät irrotettaessa tai riippuvuuden muuttuessa.

    Valmistellaan esimerkkiä…

    Kortti kallistuu kohti osoitinta ja asettuu, kun osoitin poistuu.

  6. Animoi poistuminen

    React-lapsen poistaminen yleensä poistaa sen heti. Animated.Keep pitää key-avaimelliset lapset, kunnes niiden depart-asento päättyy.

    wait renderöi uudet lapset vasta, kun kaikki poistumiset ovat päättyneet.

    Valmistellaan esimerkkiä…

    Hylätyt viestit poistuvat valitulla liikkeellä ennen katoamistaan.

Sinulla on koko malli

Arvot, kohteet, syöte ja poistumiset jakavat samat ohjaimet, keskeytyssäännöt ja siivouksen. Oppaat käsittelevät jokaisen tarkemmin.

Haku

Kirjoita hakeaksesi dokumentaatiosta.