Svg morphing dengan reaksi-spring

Saya telah tertarik dengan kesan ubah bentuk sejak saya masih kecil. Animasi perubahan bentuk selalu menarik perhatian saya. Kali pertama saya melihat kesan ubah bentuk membuat saya tertanya -tanya "Wow, bagaimana mereka melakukannya?" Sejak itu, saya telah membuat program demo dan menulis artikel mengenai kesan ini.

Terdapat banyak pilihan ketika datang ke perpustakaan animasi yang berbeza yang menyokong ubah bentuk. Ramai daripada mereka baik dan menawarkan banyak ciri. Baru-baru ini, saya terpesona oleh React-Spring. React-Spring adalah perpustakaan animasi fizikal yang ringkas yang dibina pada React. Adam Rackis baru -baru ini mengeluarkan gambaran yang bagus. Perpustakaan ini mempunyai banyak ciri, termasuk (dan banyak lagi) ubah bentuk SVG. Malah, keindahan reaksi-spring adalah bagaimana ia menyokong ubah bentuk. Ia membolehkan anda untuk mengubah bentuk secara langsung dalam tag yang mentakrifkan deskriptor laluan SVG. Dari sudut pandang pembukuan, ini hebat. Deskriptor laluan SVG biasanya terletak di mana anda mengharapkannya.

Berikut adalah video kandungan yang dibincangkan dalam artikel ini:

Ini adalah kesan ubah bentuk dalam urutan onboarding. Di sini, ia digunakan sebagai kesan latar belakang. Ia direka untuk melengkapkan animasi latar depan; Jadikannya lebih menonjol, dan bukannya menduduki tempat kejadian.

Buat dokumen SVG

Perkara pertama yang perlu kita lakukan ialah mencipta model asas. Biasanya, apabila saya mempunyai pemahaman yang jelas tentang apa yang saya mahu lakukan, saya membuat beberapa jenis reka bentuk. Kebanyakan penerokaan saya bermula dengan model dan berakhir dengan demo. Dalam kebanyakan kes, ini bermakna membuat dokumen SVG dalam editor vektor saya. Saya menggunakan inkscape untuk menarik SVG saya.

Apabila membuat dokumen SVG, saya menggunakan skala yang tepat. Saya mendapati ia lebih baik untuk menjadi tepat. Bagi saya, ia membantu saya melihat apa yang saya ingin buat apabila saya menggunakan sistem koordinat yang sama seperti dalam penyemak editor dan editor kod. Sebagai contoh, katakan anda akan membuat ikon 24px ✕ 30px SVG, termasuk padding. Cara terbaik ialah menggunakan saiz yang sama - 24 piksel lebar dan 30 piksel dokumen SVG tinggi. Sekiranya keputusan berkadar tidak betul, anda boleh menyesuaikannya kemudian pada bila -bila masa. Dalam pengertian ini, SVG adalah toleran. Ia berskala tidak kira apa yang anda lakukan.

Dokumen SVG yang kami buat ialah 256 piksel lebar dan ketinggian 464 piksel.

Lukis model

Apabila membuat model, kita perlu mempertimbangkan di mana nod diletakkan dan berapa banyak nod digunakan. Ini sangat penting. Di sinilah kita meletakkan asas untuk animasi. Pemodelan adalah keseluruhan kandungan ubah bentuk. Kami mempunyai satu set nod yang ditukar kepada satu lagi set nod. Set nod ini mesti mempunyai bilangan nod yang sama. Kedua, set ini harus dikaitkan dengan beberapa cara.

Jika hubungan antara bentuk vektor tidak dipertimbangkan dengan teliti, animasi tidak sempurna. Setiap nod mempengaruhi animasi. Kedudukan dan kelengkungan mereka mesti betul. Untuk maklumat lanjut mengenai bagaimana nod dibina dalam laluan SVG, lihat penjelasan kurva Bezier pada MDN.

Kedua, kita perlu mempertimbangkan kedua -dua bentuk pada masa yang sama. Salah satu vektor mungkin mengandungi bahagian yang tidak dapat dijumpai di vektor lain. Sebagai alternatif, mungkin terdapat perbezaan lain antara kedua -dua model. Untuk kes ini, lebih baik memasukkan nod tambahan di beberapa tempat. Adalah lebih baik untuk membangunkan strategi. Sebagai contoh, sudut ini ada, garis lurus ini berkembang menjadi lengkung, dll.

Saya telah menyusun pen untuk menggambarkan keadaan apabila set itu kurang berkorelasi dengan reka bentuk yang tepat. Dalam contoh berikut, nod dalam kesan ubah bentuk di sebelah kiri diletakkan secara rawak. Tiada hubungan antara nod yang membentuk nombor satu dan dua. Dalam contoh yang betul, penempatan nod dirancang dengan lebih berhati -hati. Ini membawa pengalaman yang lebih koheren.

Model pertama

Alat garis adalah alat yang kami gunakan untuk menarik bentuk vektor pertama. Oleh kerana model yang kami buat lebih abstrak, ia sedikit memaafkan. Kita masih perlu mempertimbangkan kedudukan dan kelengkungan, tetapi ini membolehkan lebih banyak arbitrasyness.

Bagi vektor dan saiz, perkara yang sama berlaku untuk membuat model ubah bentuk. Ini adalah proses berulang. Jika kali pertama tidak betul, kami sentiasa boleh kembali dan membuat penyesuaian. Ia biasanya mengambil satu atau dua lelaran untuk membuat animasi bersinar. Inilah rupa model selesai.

Hasilnya adalah bentuk SVG abstrak yang lancar dengan lapan nod.

Model kedua dan ketiga

Sebaik sahaja model pertama selesai, model kedua boleh ditarik (kita juga boleh merawatnya sebagai negeri ). Ini adalah set pertama bentuk yang akan cacat. Ini mungkin keadaan akhir, iaitu satu kesan ubah bentuk. Atau ia boleh menjadi langkah di sepanjang jalan, seperti kerangka utama. Sekiranya kita melihat, terdapat tiga langkah. Begitu juga, setiap model mesti dikaitkan dengan model sebelumnya. Salah satu cara untuk memastikan bahawa padanan model adalah untuk membuat vektor kedua sebagai salinan vektor pertama. Dengan cara ini, kita tahu bahawa model ini mempunyai bilangan nod yang sama dan penampilan dan rasa yang sama.

Berhati -hati dengan editor. Editor vektor biasanya dioptimumkan untuk saiz dan format fail. Apabila menyimpan perubahan, ia mungkin menjadikan model tidak serasi. Saya telah membangunkan tabiat memeriksa kod SVG selepas menyimpan fail. Ini juga boleh membantu jika anda sudah biasa dengan format deskriptor jalan. Jika anda tidak terbiasa dengannya, ia agak misteri. Ia juga merupakan idea yang baik untuk melumpuhkan pengoptimuman dalam keutamaan editor vektor.

Ulangi proses di atas untuk bentuk ketiga. Salin, meletakkan semula semua nod dan tetapkan warna ketiga.

Lampu, Kamera ... Tindakan!

Selepas mencipta model, kami melakukan kebanyakan kerja. Kini tiba masanya untuk menyemak bahagian animasi. React-Spring dilengkapi dengan satu set cangkuk yang boleh kita gunakan untuk animasi dan ubah bentuk. Penggunaan adalah sesuai untuk kesan dalam contoh ini. Ia bertujuan untuk digunakan dengan satu animasi seperti yang kita buat. Berikut adalah cara memulakan animasi menggunakan Hook Usespring.

 <code>const [{ x }, set] = useSpring(() => ({ x: 0, }));</code>

Di atas memberikan kita harta animasi X, yang membina kesan ubah bentuk kita di sekelilingnya. Salah satu kelebihan yang hebat dari sifat animasi ini ialah kita boleh mengubahnya untuk membuat hampir apa -apa jenis animasi. Jika nilai tidak betul, kita boleh mengubahnya dengan interpolasi.

Parameter kedua, fungsi set, membolehkan kita mencetuskan kemas kini. Berikut adalah coretan kod yang menunjukkan penggunaannya. Ia mengemas kini nilai animasi x menggunakan pengendali isyarat dari perpustakaan guna-guna. Terdapat banyak cara kita boleh mencetuskan animasi dalam React-Spring.

 <code>const bind = useDrag( ({ movement: [x] }) => {  // ...  set({ x }); }, );</code>

Kami kini bersedia untuk menggabungkan model kami (Descriptor Path) dengan tag. Dengan menambah kata kunci animasi ke kod JSX, kami mengaktifkan sistem animasi React-Spring. Dengan membuat panggilan interpolasi ke interpolasi yang dinamakan sebelum ini, kami menukar jarak seret ke bentuk yang cacat. Arahan output mengandungi model yang dibincangkan sebelumnya. Untuk meletakkannya di tempat, kami hanya menyalin deskriptor jalan dari fail SVG ke dalam tag. Sekarang, tiga deskriptor yang berbeza d, dari tiga elemen laluan yang berbeza, disalin dari tiga fail SVG yang berbeza, dan digabungkan menjadi satu. Berikut adalah bagaimana nod JSX mencari didorong menggunakan animasi reaksi-spring.

<code><svg ...="">
<animated.path c="" d="{x.to({" first="" model="" output:="" range:="" second="" third="" z=""></animated.path></svg></code>

Mari kita lihat perbezaan antara elemen laluan JSX standard dan yang kita ada sekarang. Untuk mendapatkan animasi ubah bentuk, kami ada:

• Menambah kata kunci animasi untuk menjadikan elemen laluan jsx bernyawa dengan react spring,
• Tukar deskriptor d dari rentetan ke reaksi interpolasi musim bunga, dan
• Tukar jarak X ke animasi kerangka utama antara tiga deskriptor jalan.

Persekitaran pembangunan

Saya tidak menemui persekitaran pembangunan yang sempurna untuk mengendalikan SVG. Pada masa ini, saya beralih ke antara editor vektor, IDE, dan penyemak imbas. Beberapa replikasi dan beberapa redundansi yang terlibat. Ia tidak sempurna, tetapi ia berfungsi. Saya telah mencuba skrip parsing untuk SVG pada masa lalu. Saya masih belum menemui apa -apa yang boleh digunakan untuk semua senario. Mungkin hanya saya melakukan sesuatu yang salah. Jika tidak, ia akan menjadi lebih baik jika pembangunan web menggunakan SVG boleh menjadi lebih lancar.

Mari mulakan!

Akhir sekali, demo!

Terima kasih kerana membaca!

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