Membuat Animasi Menggunakan React Spring

Mengintegrasikan animasi ke dalam aplikasi React anda secara tradisinya mencabar. Walau bagaimanapun, React-Spring, perpustakaan yang kuat yang dicipta oleh Paul Henschel, memudahkan prosesnya dengan ketara. Membina atas animasi dan bertindak balas, ia menawarkan prestasi yang dioptimumkan dan API yang diselaraskan.

Tutorial ini meneroka dua cangkuk React-Spring: useSpring dan useTrail . Kami akan menggambarkan penggunaan mereka melalui contoh praktikal.

Untuk memulakan, pasang React-Spring:

 # benang
Benang Tambah React-Spring

# npm
NPM Pasang React-Spring-Save

Animasi dengan useSpring

Hook useSpring memudahkan peralihan yang lancar di antara negeri -negeri. Kami menentukan from dan to sifat untuk menentukan titik permulaan dan akhir animasi. from menetapkan keadaan awal, sementara to menentukan keadaan akhir.

Contoh pertama kami menggunakan useSpring untuk menghidupkan kotak yang meluncur ke skrin. Pada mulanya tersembunyi, ternyata apabila butang diklik.

 Import React, {Usestate} dari 'React';
import {usespring, animated} dari 'react-spring';

const app = () => {
  const [showContent, setShowContent] = useState (false);
  const contentProps = usespring ({
    Opacity: showcontent? 1: 0,
    Margintop: Pertunjukan? 0: -1000,
    config: {duration: 500} // Pilihan: tambah tempoh animasi
  });

  kembali (
    <div classname="container">
      <button classname="button" onclick="{()"> setShowContent (! ShowContent)}>
        Togol kandungan
      </button>
      <animated.div classname="box" style="{contentProps}">
        <h1 id="Kandungan-ini-merosot-terima-kasih-kepada-React-Spring">Kandungan ini merosot terima kasih kepada React Spring!</h1>
      </animated.div>
    </div>
  );
};

The useSpring Hook menguruskan animasi. Apabila showContent adalah benar, kotak itu slaid ke bawah dan menjadi kelihatan; Jika tidak, ia tetap tersembunyi di luar skrin.

Senarai Animasi dengan useTrail

useTrail Hook menghidupkan senarai item secara berurutan. Setiap item menghidupkan selepas yang terdahulu. Mari kita mengambil senarai pengguna dan menghidupkan rendering mereka.

 import react, {usestate, useeffect} dari 'react';
import {useTrail, animasi} dari 'React-Spring';

const app = () => {
  const [pengguna, setUsers] = useState ([]);
  useeffect (() => {
    Ambil ('https://jsonplaceholder.typicode.com/users')
      .THEN (res => res.json ())
      .tua (data => setUsers (data));
  }, []);

  const jejak = useTrail (users.length, {
    dari: {marginLeft: -20, kelegapan: 0, transform: 'translate3d (0, -40px, 0)'},
    ke: {marginLeft: 20, kelegapan: 1, transform: 'translate3d (0,0px, 0)'},
    Config: {Mass: 5, Ketegangan: 2000, Geseran: 200} // Pilihan: Animasi Fine-Tune
  });

  kembali (
    <div>
      <h1 id="Pengguna-rawak">Pengguna rawak</h1>
      {trail.map (({style}, index) => (
        <animated.div key="{users[index]?.id}" classname="box" style="{style}">
          {Users [Index] ?. Nama Pengguna}
        </animated.div>
      ))}
    </div>
  );
};

useTrail mencipta animasi yang berperingkat untuk senarai pengguna. Setiap nama pengguna slaid dengan sedikit kelewatan. Pengendalian ralat dan konfigurasi pilihan untuk animasi yang lebih lancar dimasukkan.

Kesimpulan

React Spring menyediakan pendekatan mesra pengguna terhadap animasi dalam aplikasi React. Terokai dokumentasi dan contohnya yang luas untuk membuka kunci kemungkinan animasi kreatif. Ingatlah untuk mempertimbangkan kebolehcapaian semasa melaksanakan animasi.

Atas ialah kandungan terperinci Membuat Animasi Menggunakan React Spring. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!