Semua yang anda perlu tahu mengenai animasi flip dalam React

Selepas kemas kini Safari terkini, API Animasi Web (WAAPI) kini disokong tanpa sebarang bendera dalam semua pelayar moden (kecuali IE). Berikut adalah contoh yang berguna di mana anda boleh menyemak ciri -ciri penyemak imbas anda. Waapi adalah cara yang baik untuk melaksanakan animasi (perlu dilaksanakan dalam JavaScript) kerana ia tergolong dalam API asli - yang bermaksud ia berfungsi tanpa sebarang perpustakaan tambahan. Jika anda tidak tahu Waapi sama sekali, inilah pengenalan yang sangat baik untuk pengenalan yang disediakan oleh Dan Wilson.

Flip adalah salah satu kaedah animasi yang paling berkesan. Flip memerlukan beberapa kod JavaScript untuk dijalankan.

Mari kita lihat di persimpangan menggunakan Waapi, flip dan mengintegrasikannya ke dalam React. Tetapi kita mulakan tanpa reaksi terlebih dahulu dan kemudian peralihan untuk bertindak balas.

Flip dan Waapi

Waapi menjadikan animasi flip lebih mudah!

Kajian cepat Flip: Idea teras adalah untuk meletakkan unsur pertama di mana anda mahu ia berakhir. Seterusnya, gunakan transformasi untuk memindahkannya ke kedudukan permulaan. Kemudian membatalkan penukaran ini.

Penukaran animasi sangat berkesan, jadi Flip sangat berkesan. Sebelum Waapi, kita perlu memanipulasi gaya elemen secara langsung untuk menetapkan penukaran dan tunggu bingkai seterusnya untuk membatalkan/membalikkannya:

 // flip sebelum waapi
el.style.transform = `Translate (200px)`;

requestAnimationFrame (() => {
  el.style.transform = '';
});

Banyak perpustakaan dibina atas pendekatan ini. Walau bagaimanapun, terdapat beberapa masalah dengan ini:

• Segala -galanya terasa seperti hack besar.
• Membalikkan animasi flip sangat sukar. Walaupun penukaran CSS dibalikkan "percuma" apabila kelas dipadam, ini tidak berlaku di sini. Memulakan flip baru sementara animasi sebelumnya sedang berjalan akan menyebabkan kegagalan. Penyongsangan memerlukan matriks transformasi untuk dihuraikan menggunakan GetComputedStyles dan menggunakannya untuk mengira saiz semasa sebelum menubuhkan animasi baru.
• Animasi lanjutan hampir mustahil. Sebagai contoh, untuk mengelakkan memesongkan anak ibu bapa yang berskala, kita perlu mengakses nilai skala semasa pada setiap bingkai. Ini hanya boleh dilakukan dengan menguraikan matriks transformasi.
• Terdapat banyak perkara untuk memberi perhatian kepada penyemak imbas. Sebagai contoh, kadang -kadang untuk menjalankan animasi flip dengan sempurna di Firefox, anda perlu menghubungi RequestAnimationFrame dua kali:

 requestAnimationFrame (() => {
  requestAnimationFrame (() => {
    el.style.transform = '';
  });
});

Kami tidak menghadapi masalah ini apabila menggunakan Waapi. Fungsi terbalik boleh dibalikkan dengan mudah. Skala terbalik kanak -kanak juga mungkin. Apabila kesilapan berlaku, mudah untuk mengetahui pelakunya, kerana kami hanya menggunakan fungsi mudah seperti bernyawa dan terbalik dan bukannya menyisir melalui pelbagai perkara seperti kaedah RequestAnimationFrame.

Berikut adalah ringkasan versi Waapi:

 el.classlist.toggle ('someclass');
const keyframes =/* hitung saiz/perbezaan kedudukan*/;
El.Animate (Keyframes, 2000);

Flip dan React

Untuk memahami bagaimana animasi flip berfungsi dalam React, adalah penting untuk mengetahui bagaimana dan yang paling penting mengapa mereka bekerja di JavaScript tulen. Ingatlah komposisi animasi flip:

Semua kandungan dengan latar belakang ungu perlu berlaku sebelum langkah "menarik". Jika tidak, kita akan melihat gaya baru yang berkelip secara ringkas, yang tidak baik. Dalam React, keadaan menjadi sedikit lebih rumit, kerana semua kemas kini DOM dilakukan oleh kami.

Keajaiban animasi flip adalah bahawa unsur -unsur ditukar sebelum penyemak imbas mempunyai peluang untuk menarik. Jadi bagaimana kita tahu "sebelum melukis" momen dalam React?

Mari kita lihat cangkuk useLayoutEffect . Jika anda ingin tahu apa itu ... ini! Apa -apa sahaja yang kita lalui dalam panggilan balik ini akan berlaku serentak selepas kemas kini DOM tetapi sebelum melukis . Dalam erti kata lain, ini adalah tempat yang bagus untuk menubuhkan Flip!

Mari kita buat sesuatu yang teknologi flip sangat baik di: kedudukan dom animasi. Jika kita mahu menghidupkan bagaimana elemen bergerak dari satu kedudukan dom ke yang lain, tidak ada yang dapat dilakukan CSS. (Bayangkan menyelesaikan tugas dalam senarai tugasan dan memindahkannya ke senarai tugas yang lengkap, sama seperti anda akan mengklik pada projek dalam contoh di bawah.)

Mari lihat contoh yang paling mudah. Mengklik salah satu daripada dua blok dalam contoh berikut menyebabkan mereka menukar kedudukan. Tanpa flip, ia berlaku dengan segera.

Terdapat banyak perkara yang perlu dilakukan. Perhatikan bagaimana semua kerja berlaku dalam panggilan balik kitaran hidup: useEffect dan useLayoutEffect . Apa yang membuatnya sedikit mengelirukan adalah bahawa garis masa animasi flip kami tidak jelas dari kod itu sendiri, kerana ia berlaku dalam dua penulisan reaksi. Berikut adalah komposisi Animasi React Flip untuk memaparkan urutan operasi yang berbeza:

Walaupun useEffect selalu berjalan selepas useLayoutEffect dan selepas penyemak imbas menarik, adalah penting untuk kita cache kedudukan dan saiz unsur -unsur selepas rendering pertama. Kami tidak mempunyai peluang untuk melakukan ini dalam render kedua kerana useLayoutEffect berjalan selepas semua kemas kini DOM. Tetapi proses ini pada dasarnya sama dengan animasi flip biasa.

Perkara yang perlu diperhatikan

Seperti kebanyakan perkara, terdapat beberapa perkara yang perlu dipertimbangkan ketika menggunakan FLIP dalam React.

Tinggal dalam 100 milisaat

Animasi flip adalah pengiraan. Pengiraan mengambil masa, dan anda perlu melakukan sedikit kerja sebelum anda dapat menunjukkan penukaran 60fps yang lancar. Sekiranya kelewatan berada di bawah 100 milisaat, orang tidak akan melihat kelewatan itu, jadi pastikan semuanya berada di bawah nilai ini. Tab Prestasi di DevTools adalah tempat yang bagus untuk memeriksa kandungan ini.

Rendering yang tidak perlu

Kami tidak boleh menggunakan useState untuk saiz cache, kedudukan, dan objek animasi, kerana setiap setState akan menyebabkan penyerahan yang tidak perlu dan melambatkan permohonan. Dalam kes yang paling teruk, ia juga boleh menyebabkan kesilapan. Cuba gunakan useRef sebaliknya dan merawatnya sebagai objek yang boleh diubah suai tanpa memberikan apa -apa.

Susun atur berjabat

Elakkan pencetus susun atur penyemak imbas berulang. Dalam konteks animasi flip, ini bermakna mengelakkan gelung melalui unsur -unsur dan membaca lokasi mereka dengan getBoundingClientRect , dan kemudian animate dengan segera. Batch "Baca" dan "Tulis" sebanyak mungkin. Ini akan membolehkan animasi yang sangat lancar.

Animasi dibatalkan

Cuba klik secara rawak di dataran dalam demo sebelumnya ketika mereka bergerak, dan klik lagi setelah berhenti. Anda akan melihat kesalahannya. Dalam kehidupan sebenar, pengguna berinteraksi dengan unsur -unsur ketika mereka bergerak, jadi patut memastikan mereka dibatalkan dengan lancar, dijeda, dan dikemas kini.

Walau bagaimanapun, tidak semua animasi boleh diterbalikkan menggunakan reverse . Kadang -kadang kita mahu mereka berhenti dan kemudian berpindah ke kedudukan baru (mis. Apabila senarai elemen terganggu secara rawak). Dalam kes ini, kita perlukan:

• Dapatkan saiz/kedudukan elemen yang dipindahkan
• Lengkapkan animasi semasa
• Kirakan dimensi baru dan perbezaan kedudukan
• Mulakan Animasi Baru

Dalam React, ini lebih sukar daripada yang kelihatannya. Saya membuang banyak masa untuk mengatasi masalah ini. Objek animasi semasa mesti di -cache. Cara yang baik adalah untuk membuat peta untuk mendapatkan animasi dengan ID. Kemudian kita perlu mendapatkan saiz dan kedudukan elemen yang dipindahkan. Terdapat dua cara untuk melakukan ini:

1. Menggunakan komponen fungsi: Hanya gelung melalui setiap elemen animasi dalam badan fungsi dan cache kedudukan semasa.
2. Gunakan Komponen Kelas: Gunakan kaedah kitaran hayat getSnapshotBeforeUpdate .

Malah, dokumentasi React rasmi mencadangkan menggunakan getSnapshotBeforeUpdate , "kerana mungkin terdapat kelewatan antara kitaran hayat fasa rendering (seperti render ) dan kitaran hayat fasa komit (seperti getSnapshotBeforeUpdate dan componentDidUpdate ).

Jangan melawan penyemak imbas

Saya telah mengatakannya sebelum ini, tetapi elakkan berhadapan dengan penyemak imbas dan cuba membuat perkara berlaku dengan cara penyemak imbas. Jika kita perlu menghidupkan perubahan saiz mudah, maka pertimbangkan sama ada CSS mencukupi (mis. transform: scale() ). Saya mendapati bahawa animasi flip adalah yang terbaik untuk di mana penyemak imbas benar -benar tidak dapat membantu:

• Perubahan kedudukan DOM animasi (seperti yang diterangkan di atas)
• Animasi susun atur yang dikongsi

Yang kedua adalah versi yang lebih kompleks dari yang pertama. Terdapat dua elemen DOM yang bertindak sebagai satu keseluruhan dan mengubah kedudukannya (dan yang lain dipasang/tersembunyi). Trik ini boleh mencapai beberapa animasi yang sejuk. Sebagai contoh, animasi ini dibuat dengan perpustakaan yang saya bina dipanggil React-Easy-flip yang menggunakan kaedah ini:

Perpustakaan

Terdapat banyak perpustakaan yang boleh membuat animasi flip dalam kod boilerplate yang lebih mudah dan abstrak. Perpustakaan yang kini diselenggarakan secara aktif termasuk: react-flip-toolkit dan Perpustakaan saya react-easy-flip .

Jika anda tidak keberatan sesuatu yang lebih berat tetapi mampu animasi yang lebih umum, lihat framer-motion . Ia juga membolehkan animasi susun atur yang sejuk! Terdapat video yang meneroka perpustakaan secara mendalam.

Sumber dan rujukan

• Animasi Josh W. Comeau-Tidak Animasi
• Membina pengembangan prestasi tinggi dan animasi lipat oleh Paul Lewis dan Stephen McGruer
• "Gerakan Magic Inside" oleh Matt Perry
• @KeyFramers Tweet "Menggunakan pembolehubah CSS animasi dari JavaScript"
• "Senarai Dalaman Pelayar Web Moden Mariko Kosaka (Bahagian 3)"
• Animasi UI Kompleks Membina Alex Holachek dalam React
• "Animasi susun atur dengan teknologi flip" David Khourshid "
• Kirill Vasiltsov "Animasi Fasih Dengan Cangkuk React"
• Jayant Bhawal's "Gunakan Cangkuk Reacts untuk Penukaran Unsur Dikongsi"

Output yang disemak semula ini mengekalkan format dan penempatan imej asal sambil memupuk teks untuk membuat kandungan yang unik. Ia juga menangani beberapa isu tatabahasa dan gaya kecil.

Atas ialah kandungan terperinci Semua yang anda perlu tahu mengenai animasi flip dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!