Animated1.0.0

Apie 5 minutes · React 16.8+ · React DOM

Pirmieji žingsniai

Nuo diegimo iki gestų ir įėjimo bei išėjimo judesio per šešis žingsnius. Kiekvienas žingsnis yra mažas veikiantis komponentas.

  1. Diegimas

    Animated neturi vykdymo priklausomybių. React 16.8+ yra peer priklausomybė.

    Paketo įėjimo taškas pažymėtas 'use client'. Next.js App Router serverio layout gali atvaizduoti AnimatedProvider; hook ir Animated.<tag> naudokite Client Components viduje.

    npm install @kkwaenggwari/animated

    @kkwaenggwari/animated importas atpažįstamas jūsų redaktoriuje.

  2. Pajudinkite pirmąją reikšmę

    useAnimatedValue(1) valdo gyvą skaičių visą komponento gyvavimo laiką. Įdėkite jį tiesiai į style: jis tampa CSS kintamuoju, todėl React jam keičiantis neperpiešia.

    timing(value, { toValue, duration }).start() jį pajudina. Paspaudus dar kartą pusiaukelėje pradedama nuo dabartinio neskaidrumo.

    Ruošiamas pavyzdys…

    Rėmelis išblunka ir grįžta, o antras paspaudimas pusiaukelėje apsuka kryptį nuo ten, kur jis yra.

  3. Išveskite daug išvesčių iš vienos reikšmės

    interpolate paverčia reikšmę ilgiais, kampais arba skaičiais. Be easing tai tampa tikslia to paties kintamojo calc() išraiška, todėl penkios juostos kainuoja tiek pat, kiek viena.

    Skirtingi tos pačios reikšmės įvesties diapazonai sukuria kaskadą be penkių atskirų animacijų.

    Ruošiamas pavyzdys…

    Vienas paspaudimas pajudina penkias juostas kaskada; pakeitus sklaidą pasikeičia tik diapazonai.

  4. Aprašykite tikslą

    Animated.button atvaizduoja paprastą mygtuką. seed yra pirmasis kadras, pose – kur jis turi būti dabar, o tempo – kaip jis ten patenka.

    Kai pose pasikeičia pusiaukelėje, elementas pasuka nuo ten, kur yra ekrane, ir su spyruokle išlaiko greitį.

    Ruošiamas pavyzdys…

    Greitai spaudant skirtukus nė vienas nepašoka.

  5. Prijunkite įvestį

    input(ref, moveInput(...)) įrašo žymeklio koordinates į reikšmes. follow(target, source) priverčia vieną reikšmę sekti kitą su spyruokle.

    Viskas, kas aprašyta useAnimated factory, priklauso komponentui: listener ir spyruoklės sustoja atjungiant arba pasikeitus priklausomybei.

    Ruošiamas pavyzdys…

    Kortelė pasvyra link žymeklio ir nurimsta, kai žymeklis nueina.

  6. Animuokite išėjimą

    Pašalinus React vaiką, jis paprastai iškart ištrinamas. Animated.Keep išlaiko vaikus su key, kol baigiasi jų depart poza.

    wait atvaizduoja naujus vaikus tik tada, kai baigiasi visi išėjimai.

    Ruošiamas pavyzdys…

    Atmesti pranešimai prieš išnykdami išeina pasirinktu judesiu.

Turite visą modelį

Reikšmės, tikslai, įvestis ir išėjimai naudoja tuos pačius valdiklius, pertraukimo taisykles ir tvarkymą. Vadovai išsamiai aprašo kiekvieną.

Paieška

Rašykite, kad ieškotumėte dokumentacijoje.