Memahami reaksi-spring

Pelaksanaan animasi bertindak balas selalu menjadi titik yang sukar dalam pembangunan. Artikel ini akan memperkenalkan React-Spring dengan cara yang mudah difahami dan meneroka beberapa kes aplikasi praktikal. Walaupun React-Spring bukanlah perpustakaan animasi hanya React, ia adalah salah satu perpustakaan yang paling popular dan berkuasa.

Artikel ini akan menggunakan versi 9.x terkini (pelepasan versi calon pada masa penulisan). Jika ia belum diterbitkan secara rasmi pada masa membaca artikel ini, sila gunakan react-spring@next memasangnya. Menurut pengalaman saya dan penyelenggara utama, kod itu sangat stabil. Satu -satunya masalah yang saya miliki adalah kesilapan kecil apabila digunakan dengan mod concurrency, yang boleh dikesan dalam repositori github.

React-Spring Rupa Pantas

Sebelum menyelidiki kes -kes aplikasi praktikal, mari kita lihat dengan cepat mata air, animasi tinggi, dan animasi peralihan. Demonstrasi runnable akan disediakan pada akhir bahagian ini, jadi tidak perlu bimbang tentang kekeliruan yang mungkin anda hadapi semasa proses.

mata air

Mari kita pertimbangkan klasik "Hello World" animasi: pudar masuk dan keluar dari kandungan. Mari kita jeda dan fikirkan bagaimana untuk beralih untuk menunjukkan dan bersembunyi tanpa sebarang animasi. Nampaknya ini:

 Eksport App Fungsi Lalai () {
  const [menunjukkan, setshowing] = useState (false);
  Kembali (
    <div>
      <div style="{{" opacity: showing :>
        Kandungan ini akan pudar dan pudar
      </div>
      <button onclick="{()"> setShowing (val =>! val)}> toggle</button>
      <hr>
    </div>
  );
}

Mudah, tetapi membosankan. Bagaimanakah kita menghidupkan perubahan dalam kelegapan? Bukankah lebih baik jika kita dapat menetapkan kelegapan yang dikehendaki berdasarkan keadaan, seperti di atas, tetapi membiarkan nilai -nilai ini lancar animasi? Inilah yang React-Spring lakukan. React-Spring boleh dianggap sebagai orang tengah kita, yang mengendalikan nilai gaya yang sentiasa berubah, mengakibatkan peralihan yang lancar antara nilai animasi yang kita inginkan. Seperti ini:

 const [showa, setShowa] = useState (false);

const fadestyles = usespring ({
  config: {... config.stiff},
  dari: {opacity: 0},
  ke: {
    Opacity: Showa? 1: 0
  }
});

Kami menggunakan from untuk menentukan nilai gaya awal dan menentukan nilai semasa dalam bahagian to mengikut keadaan semasa. fadeStyles nilai pulangan mengandungi nilai gaya sebenar yang kami gunakan untuk kandungan. Kita hanya perlu melakukan perkara terakhir ...

Anda mungkin fikir anda boleh melakukan ini:

<div style="{fadeStyles}">
  …
</div>

Tetapi ini tidak berfungsi. Kita tidak boleh menggunakan div biasa, tetapi kita perlu menggunakan div reaksi-spring yang dibuat dari eksport animated . Ini mungkin terdengar mengelirukan, tetapi sebenarnya hanya bermaksud:

<animated.div style="{fadeStyles}">
  …
</animated.div>

Itu sahaja.

Sangat animasi

Bergantung pada apa yang kita animasi, kita mungkin mahu kandungannya meluncur ke atas dan ke bawah, dari ketinggian sifar hingga saiz penuhnya supaya kandungan sekitarnya menyesuaikan dan mengalir ke tempat yang lancar. Anda mungkin berharap kami hanya dapat menyalin kod di atas, ketinggian berubah dari sifar ke auto, tetapi malangnya, anda tidak boleh menghidupkannya ke ketinggian auto. Ini berfungsi dalam kedua-dua CSS biasa dan reaksi-spring. Sebaliknya, kita perlu mengetahui ketinggian sebenar kandungan dan menentukannya di to Spring.

Kita perlu secara dinamik mendapatkan ketinggian apa-apa kandungan untuk lulus nilainya untuk bertindak balas. Ternyata platform web telah merancang sesuatu khusus untuk ini: ResizeObserver . Dan sokongannya sebenarnya cukup bagus! Oleh kerana kita menggunakan React, kita tentu akan membungkus penggunaan dalam cangkuk. Cangkuk saya kelihatan seperti ini:

 fungsi eksport useHeight ({on = true / * no nilai bermakna pada * /} = {} sebagai mana -mana) {
  const ref = useref<any> ();
  const [ketinggian, set] = useState (0);
  const heightref = useref (ketinggian);
  const [ro] = useState (
    () =>
      ResizeObserver baru (Packet => {
        jika (ref.current && heightref.current! == ref.current.offsetheight) {
          heightref.current = ref.current.offsetheight;
          set (ref.current.offsetheight);
        }
      })
  );
  uselayouteffect (() => {
    jika (on && ref.current) {
      set (ref.current.offsetheight);
      ro.observe (ref.current, {});
    }
    kembali () => ro.disconnect ();
  }, [on, ref.current]);
  kembali [ref, ketinggian sebagai mana -mana];
}</any>

Kita boleh memilih untuk memberikan nilai on togol dan melumpuhkan fungsi pengukuran (ini akan berguna kemudian). Apabila on benar, kami memberitahu ResizeObserver untuk memerhatikan kandungan kami. Kami mengembalikan ref yang perlu digunakan untuk apa sahaja yang kita mahu mengukur, serta ketinggian semasa.

Mari lihat bagaimana ia berfungsi.

 const [heightref, ketinggian] = useHeight ();
const slideInstyles = usespring ({
  config: {... config.stiff},
  dari: {opacity: 0, ketinggian: 0},
  ke: {
    Opacity: showb? 1: 0,
    ketinggian: showb? Ketinggian: 0
  }
});

<animated.div style="{{" ...slideinstyles overflow:>
  <div ref="{heightRef}">
    Kandungan ini akan pudar dan pudar dengan gelongsor
  </div>
</animated.div>

useHeight memberi kita nilai ketinggian ref untuk mengukur dan kandungan yang kami lalui ke musim bunga kami. Kemudian kami memohon ref dan menggunakan gaya ketinggian.

Oh, jangan lupa untuk menambah overflow: hidden di dalam bekas. Ini membolehkan kita untuk memasukkan nilai ketinggian dengan betul.

Peralihan animasi

Akhirnya, mari kita lihat bagaimana untuk menambah item animasi ke DOM dan keluarkan item animasi dari DOM. Kami sudah tahu bagaimana untuk menghidupkan projek yang sedia ada dan mengekalkan perubahan nilai item di DOM, tetapi untuk menghidupkan atau mengeluarkan item, kami memerlukan cangkuk baru: useTransition .

Jika anda telah menggunakan React-Spring sebelum ini, ini adalah salah satu daripada beberapa tempat di mana versi 9.x mempunyai perubahan ketara dalam APInya. Mari lihat.

Untuk animasi senarai projek, seperti ini:

 const [senarai, setList] = useState ([]);

Kami akan mengisytiharkan fungsi transformasi kami seperti berikut:

 const listTransitions = useTransition (senarai, {
  config: config.gentle,
  dari: {opacity: 0, transform: "translate3d (-25%, 0px, 0px)"},
  masukkan: {opacity: 1, transform: "translate3d (0%, 0px, 0px)"},
  Tinggalkan: {Opacity: 0, Height: 0, Transform: "Translate3d (25%, 0px, 0px)"},
  Kekunci: list.map ((item, indeks) => indeks)
});

Seperti yang saya nyatakan sebelum ini, listTransitions nilai pulangan adalah fungsi. React-Spring menjejaki pelbagai senarai, mengesan item yang telah ditambah dan dipadam. Kami memanggil fungsi listTransitions , menyediakan fungsi panggil balik yang menerima objek gaya tunggal dan satu item, React-Spring akan memanggilnya untuk setiap item dalam senarai berdasarkan sama ada item itu baru ditambah, baru dipadam, atau hanya terletak dalam senarai, dan menggunakan gaya yang betul.

Perhatikan bahagian Kekunci: Ini membolehkan kami memberitahu React-Spring bagaimana untuk mengenali objek dalam senarai. Dalam kes ini, saya memutuskan untuk memberitahu React-Spring indeks item dalam array untuk menentukan item itu secara unik. Biasanya, ini adalah idea yang buruk, tetapi sekarang, ia membolehkan kita melihat bagaimana ciri itu sebenarnya berfungsi. Dalam demonstrasi berikut, butang Tambah Projek menambah item ke akhir senarai apabila diklik, dan butang Padam terakhir menghilangkan item yang paling baru ditambah dari senarai. Jadi jika anda menaip dalam kotak input dan cepat klik butang Tambah dan kemudian klik butang Padam, anda akan melihat item yang sama bermula dengan lancar masuk dan kemudian segera tinggalkan dari mana -mana peringkat animasi. Sebaliknya, jika anda menambah item dan dengan cepat tekan butang padam dan tambah butang, item yang sama akan mula gelongsor, maka tiba -tiba berhenti di tempat dan luncurkan kembali ke tempatnya.

Demo

Wow, saya katakan begitu banyak! Ini adalah demo runnable yang menunjukkan segala yang kita tutupi.

[Pautan demo]

Butiran lain

Pernahkah anda perasan bahawa apabila anda meluncur kandungan dalam demo, ia melantun ke tempat seperti ... musim bunga? Di sinilah nama itu berasal dari: React-Spring menggunakan fizik musim bunga untuk interpolasi nilai-nilai yang sentiasa berubah. Ia tidak hanya membahagikan perubahan nilai ke dalam kenaikan yang sama dan kemudian menggunakan kenaikan ini dalam kelewatan yang sama. Sebaliknya, ia menggunakan algoritma yang lebih kompleks untuk menghasilkan kesan seperti musim bunga ini, yang akan kelihatan lebih semula jadi.

Algoritma musim bunga boleh dikonfigurasikan sepenuhnya, dengan beberapa pratetap yang boleh anda gunakan secara langsung - demonstrasi di atas menggunakan pratetap stiff dan gentle . Sila rujuk dokumentasi untuk maklumat lanjut.

Juga ambil perhatian bagaimana saya menghidupkan nilai dalam nilai translate3d . Seperti yang anda lihat, sintaks bukanlah yang paling ringkas, jadi reaksi-spring menyediakan beberapa jalan pintas. Terdapat dokumentasi mengenai perkara ini, tetapi untuk seluruh artikel ini, saya akan terus menggunakan sintaks bukan shortcut penuh demi kejelasan.

Akhirnya, saya ingin ambil perhatian bahawa apabila anda meluncurkan kandungan dalam demo di atas, anda mungkin melihat kandungan di bawahnya berdebar -debar sedikit pada akhirnya. Ini disebabkan oleh kesan lantunan yang sama. Ia kelihatan jelas apabila kandungan melantun ke tempatnya, tetapi tidak apabila kita meluncurkan kandungan ke atas. Nantikan bagaimana kita akan mematikannya. (Spoiler, atribut clamp ).

Beberapa nota di kotak pasir ini

Kod Sandbox menggunakan muat semula panas. Apabila anda menukar kod, perubahan biasanya ditunjukkan dengan segera. Ini sejuk, tetapi ia boleh merosakkan animasi. Jika anda mula bermain -main dan kemudian lihat tingkah laku yang pelik, kononnya tidak betul, cuba menyegarkan kotak pasir.

Kotak pasir lain dalam artikel ini akan menggunakan modaliti. Atas sebab -sebab yang saya tidak dapat memikirkan sepenuhnya, anda tidak akan dapat mengubah suai sebarang kod apabila modal dihidupkan - modal enggan menyerahkan fokus. Oleh itu, pastikan anda mematikan modal sebelum mencuba sebarang perubahan.

Membina aplikasi praktikal

Ini adalah blok bangunan asas React-Spring. Mari kita gunakannya untuk membina sesuatu yang lebih menarik. Memandangkan semua perkara di atas, anda mungkin berfikir React-Spring sangat mudah digunakan. Malangnya, dalam praktiknya, memikirkan beberapa kehalusan yang perlu ditangani dengan betul boleh menjadi rumit. Banyak butiran ini akan diterokai secara mendalam di seluruh artikel ini.

Saya telah menulis sebelum ini berkaitan dengan projek senarai buku saya dalam beberapa cara. Siaran ini tidak terkecuali - ia bukan obsesi, hanya projek yang berlaku untuk mempunyai titik akhir GraphQL yang tersedia secara umum dan banyak kod sedia ada yang boleh dieksploitasi, menjadikannya matlamat yang jelas.

Mari kita bina UI yang membolehkan anda membuka modal dan mencari buku. Apabila hasilnya muncul, anda boleh menambahkannya ke senarai lari buku terpilih yang dipaparkan di bawah modal. Setelah selesai, anda boleh mematikan modal dan klik butang untuk mencari buku yang serupa dengan buku yang dipilih.

Kami akan bermula dengan UI yang berfungsi sepenuhnya dan kemudian secara beransur -ansur menambah animasi ke bahagian, termasuk demo interaktif.

Jika anda benar-benar ingin tahu apa hasil akhir kelihatan, atau jika anda sudah biasa dengan React-Spring dan ingin melihat jika saya menutup sesuatu yang anda tidak tahu lagi, inilah ia (ia tidak akan memenangi apa-apa anugerah reka bentuk, saya cukup jelas). Selebihnya artikel ini akan memperkenalkan proses mencapai langkah akhir langkah demi langkah.

Menghidupkan modal kami

Mari kita mulakan dengan modaliti kita. Sebelum kita mula menambah sebarang data, mari kita menghidupkan modal kita dengan baik. Inilah yang kelihatan seperti modal asas. Saya menggunakan Ryan Florence's Reach UI (terutamanya komponen modal), tetapi idea itu sama tidak kira apa yang anda gunakan untuk membina modal. Kami mahu membiarkan latar belakang kami memudar dan menukar kandungan modal kami.

Oleh kerana modal itu diberikan secara kondusif mengikut atribut "terbuka", kami akan menggunakan cangkuk useTransition . Saya telah membungkus modal UI dengan komponen modal saya sendiri dan memberikan kandungan kosong atau modal sebenar berdasarkan atribut isOpen . Kami hanya perlu menghidupkannya dengan menukar cangkuk.

Inilah cangkuk penukaran seperti:

 const modalTransition = useTransition (!! isOpen, {
  Config: Isopen? {... config.stiff}: {duration: 150},
  dari: {opacity: 0, transform: `translate3d (0px, -10px, 0px)`},
  masukkan: {opacity: 1, transform: `translate3d (0px, 0px, 0px)`},
  Tinggalkan: {Opacity: 0, Transform: `Translate3d (0px, 10px, 0px)`}
});

Tidak ada kejutan besar di sini. Kami mahu memudar dan menyediakan peralihan menegak sedikit berdasarkan sama ada modal aktif atau tidak. Bahagian pelik adalah ini:

 Config: Isopen? {... config.stiff}: {duration: 150},

Saya hanya mahu menggunakan fizik musim bunga apabila modal dihidupkan. Alasan untuk ini - sekurang -kurangnya dalam pengalaman saya - ialah apabila anda mematikan modal, latar belakang hilang terlalu lama, yang menyebabkan UI yang mendasari menjadi interaktif terlalu lama. Oleh itu, apabila modal dihidupkan, ia akan melantun dengan baik oleh fizik musim bunga, dan apabila ditutup, ia akan cepat hilang dalam 150 milisaat.

Sudah tentu, kami akan membentangkan kandungan kami melalui fungsi penukaran yang dikembalikan oleh cangkuk. Perhatikan bahawa saya mengekstrak gaya opacity dari objek Gaya untuk memohon kepada latar belakang dan kemudian menggunakan semua gaya animasi ke kandungan modal sebenar.

 Pulangan ModalTransition (
  (gaya, isOpen) =>
    isopen && (
      <animateddialogoverlay allowpinchzoom="{true}" initialfocusref="{focusRef}" isopen="{isOpen}" ondismiss="{onHide}" style="{{" opacity: styles.opacity>
        <animateddialogcontent style="{{" border: solid hsla borderradius: maxwidth:>
          <div>
            <div>
              <standardmodalheader caption="{headerCaption}" onhide="{onHide}"></standardmodalheader>
              {anak}
            </div>
          </div>
        </animateddialogcontent>
      </animateddialogoverlay>
    )
);

[Pautan demo]

Bahagian yang tinggal diabaikan kerana panjangnya terlalu panjang dan diulang dengan kandungan sebelumnya. Idea teras adalah menggunakan cangkuk useSpring React-Spring dan useTransition , digabungkan dengan ResizeObserver untuk mencapai pelbagai kesan animasi, termasuk memudar masuk dan keluar, perubahan ketinggian, dan kemasukan dan keluar animasi item senarai. Artikel ini menerangkan secara terperinci bagaimana menangani butiran animasi, seperti keadaan awal, tempoh animasi, dan bagaimana untuk mengelakkan konflik animasi. Hasil akhir adalah UI interaktif dengan pengalaman lancar dan pengguna.

Atas ialah kandungan terperinci Memahami reaksi-spring. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!