Cara mencipta semula kesan riak butang reka bentuk bahan

Apabila saya pertama kali bertemu dengan reka bentuk bahan, saya kagum dengan konsep reka bentuk komponen butangnya. Ia bijak menggunakan kesan riak untuk memberi maklum balas kepada pengguna dengan cara yang mudah dan elegan.

Bagaimana kesan ini dicapai? Butang reka bentuk bahan bukan hanya animasi riak mudah, tetapi kedudukan animasi juga akan berubah mengikut kedudukan butang yang diklik.

Kita boleh mencapai kesan yang sama melalui kod. Pertama, kami akan menggunakan ES6 JavaScript untuk menyediakan penyelesaian yang bersih, dan kemudian meneroka beberapa alternatif.

Struktur HTML

Matlamat kami adalah untuk mengelakkan sebarang tag HTML yang tidak perlu, jadi kami akan menggunakan kod paling sedikit:

 <button>Ketahui lebih lanjut</button>

Gaya butang

Kita perlu menetapkan beberapa gaya elemen riak menggunakan JavaScript, tetapi semua gaya lain boleh dilakukan di CSS. Untuk butang kami, hanya dua sifat yang perlu dimasukkan.

 butang {
  Kedudukan: Relatif;
  Limpahan: Tersembunyi;
}

Menggunakan position: relative membolehkan kita menggunakan position: absolute pada unsur -unsur riak, yang diperlukan untuk kita mengawal kedudukannya. Sementara itu, overflow: hidden menghalang riak dari melebihi pinggir butang. Semua sifat lain adalah pilihan. Tetapi sekarang, butang kami kelihatan sedikit bertarikh. Berikut adalah titik permulaan yang lebih moden:

 /* Roboto adalah font lalai untuk bahan*/
@import url ('https://fonts.googleapis.com/css2?family=roboto&display=swap');

butang {
  Kedudukan: Relatif;
  Limpahan: Tersembunyi;
  Peralihan: Latar Belakang 400ms;
  Warna: #ffff;
  latar belakang warna: #6200EE;
  Padding: 1rem 2rem;
  Font-keluarga: 'Roboto', Sans-Serif;
  saiz font: 1.5rem;
  garis besar: 0;
  Sempadan: 0;
  Radius sempadan: 0.25rem;
  box-shadow: 0 0 0.5REM RGBA (0, 0, 0, 0.3);
  kursor: penunjuk;
}

Gaya riak

Kemudian, kami akan menggunakan JavaScript untuk menggunakan riak sebagai kelas .ripple<span></span> Unsur -unsur disuntik ke dalam HTML kami. Tetapi sebelum berpindah ke JavaScript, mari kita tentukan gaya riak ini dalam CSS supaya kita boleh menggunakan bila -bila masa:

 span.ripple {
  Kedudukan: Mutlak; /* Kami menyebutkan di atas kedudukan mutlak*/
  Radius sempadan: 50%;
  Transform: Skala (0);
  Animasi: Ripple 600ms linear;
  latar belakang warna: RGBA (255, 255, 255, 0.7);
}

Untuk menjadikan riak kami bulat, kami menetapkan border-radius kepada 50%. Untuk memastikan bahawa setiap riak muncul dari awal, kami menetapkan skala lalai ke 0. Sekarang, kami tidak dapat melihat apa -apa lagi, kerana kami belum menetapkan nilai untuk sifat top , left , width , atau height ; Kami akan menyuntik sifat -sifat ini tidak lama lagi menggunakan JavaScript.

Bagi CSS kami, perkara terakhir yang perlu kita tambahkan ialah keadaan akhir animasi:

 @keyframes ripple {
  ke {
    Transform: Skala (4);
    Kelegapan: 0;
  }
}

Sila ambil perhatian bahawa kami tidak menggunakan kata kunci from untuk menentukan keadaan permulaan dalam keyframes ? Kita boleh from dan CSS akan membina nilai yang hilang berdasarkan nilai yang digunakan untuk elemen animasi. Ini berlaku jika nilai -nilai yang relevan diisytiharkan secara eksplisit (seperti transform: scale(0) ), atau mereka adalah nilai lalai (seperti opacity: 1 ).

Pelaksanaan JavaScript

Akhirnya, kita memerlukan JavaScript untuk menetapkan kedudukan dan saiz riak. Saiznya harus berdasarkan saiz butang, dan kedudukannya harus berdasarkan kedudukan butang dan kursor.

Kami akan bermula dengan fungsi kosong yang mengambil acara klik sebagai hujah:

 fungsi createrple (event) {
  //
}

Kami akan mengakses butang kami dengan mencari currentTarget acara.

 Const Button = Event.CurrentTarget;

Seterusnya, kami akan meneliti kami<span></span> elemen dan hitung diameter dan jejari berdasarkan lebar dan ketinggian butang.

 const circle = document.createElement ("span");
const diameter = Math.max (Button.ClientWidth, Button.ClientHeight);
Radius const = diameter / 2;

Kita kini boleh menentukan sifat -sifat yang tersisa yang diperlukan oleh riak: left , top , width , dan height .

 Circle.style.width = Circle.style.height = `$ {diameter} px`;
Circle.style.left = `$ {event.clientx - (Button.OffsetLeft Radius)} px`;
Circle.style.top = `$ {event.clienty - (Button.offsettop Radius)} px`;
Circle.classlist.add ("Ripple");

Dalam<span></span> Sebelum menambah elemen ke DOM, sebaiknya periksa sama ada terdapat riak yang tersisa yang mungkin datang dari klik sebelumnya dan padamkannya sebelum melaksanakan riak seterusnya.

 const ripple = button.getElementsByClassName ("ripple") [0];

jika (riak) {
  ripple.remove ();
}

Dalam langkah terakhir, kita akan<span></span> Tambah ke elemen butang sebagai elemen kanak -kanak supaya ia disuntik ke dalam butang.

 Button.AppendChild (Circle);

Selepas fungsi kami selesai, semua yang tersisa adalah memanggilnya. Ini boleh dilakukan dalam beberapa cara. Jika kita mahu menambah riak ke setiap butang pada halaman, kita boleh menggunakan kod seperti ini:

 butang const = document.getElementsByTagName ("Button");
untuk (butang butang const) {
  button.addeventListener ("klik", createrple);
}

Sekarang kita mempunyai kesan riak kerja!

Ciri -ciri yang dilanjutkan

Bagaimana jika kita mahu melangkah lebih jauh, menggabungkan kesan ini dengan perubahan lain dalam kedudukan atau saiz butang? Lagipun, penyesuaian adalah salah satu kelebihan utama memilih untuk mencipta kesan diri kita sendiri. Untuk menguji kemudahan fungsi lanjutan, saya memutuskan untuk menambah kesan "magnet" yang menggerakkan butang kami ke arah kursor apabila berada di dalam kawasan tertentu.

Kita perlu bergantung pada beberapa pembolehubah yang sama yang ditakrifkan dalam fungsi riak. Untuk mengelakkan duplikasi kod yang tidak perlu, kita harus menyimpannya di suatu tempat supaya kedua -dua kaedah dapat mengaksesnya. Tetapi kita juga harus mengehadkan skop pembolehubah yang dikongsi kepada setiap butang individu. Salah satu cara untuk mencapai matlamat ini ialah menggunakan kelas seperti yang ditunjukkan dalam contoh berikut:

Oleh kerana kesan magnet memerlukan penjejakan kursor setiap kali bergerak kursor, kita tidak lagi perlu mengira kedudukan kursor untuk membuat riak. Sebaliknya, kita boleh bergantung pada cursorX dan cursorY .

Dua pembolehubah baru yang penting ialah magneticPullX dan magneticPullY . Mereka mengawal intensiti kaedah magnet kami menarik butang di belakang kursor. Oleh itu, apabila kita menentukan pusat riak, kita perlu menyesuaikan kedudukan (x dan y) dan magnetisme butang baru.

 const offsetLeft = this.left this.x * this.magneticpullx;
const offsettop = this.top this.y * this.magneticpully;

Untuk memohon kesan gabungan ini kepada semua butang, kita perlu memberi contoh contoh kelas baru untuk setiap butang:

 butang const = document.getElementsByTagName ("Button");
untuk (butang butang const) {
  butang baru (butang);
}

Teknologi lain

Sudah tentu, ini hanya satu cara untuk mencapai kesan riak. Pada Codepen, terdapat banyak contoh yang menunjukkan pelaksanaan yang berbeza. Berikut adalah beberapa contoh kegemaran saya.

Pelaksanaan CSS tulen

Jika pengguna melumpuhkan JavaScript, kesan riak kami tidak mempunyai penyelesaian sandaran. Walau bagaimanapun, menggunakan CSS sahaja, menggunakan :active untuk bertindak balas kepada klik, anda boleh mendekati kesan asal. Batasan utama ialah riak hanya boleh muncul dari satu titik -biasanya pusat butang -dan bukan sebagai tindak balas kepada kedudukan klik kami. Contoh ini oleh Ben Szabo sangat ringkas:

JavaScript sebelum ES6

Demo Leandro Parice adalah serupa dengan pelaksanaan kami, tetapi ia serasi dengan versi awal JavaScript:

jQuery

Contoh ini menggunakan jQuery untuk mencapai kesan riak. Jika anda sudah mempunyai jQuery sebagai pergantungan, ia dapat membantu anda menyimpan beberapa baris kod.

Bertindak balas

Akhirnya, ada satu lagi contoh saya. Walaupun ciri -ciri React seperti keadaan dan ref boleh digunakan untuk membantu mewujudkan kesan riak, ini tidak semestinya diperlukan. Kedudukan dan saiz riak perlu dikira untuk setiap klik, jadi tidak ada kelebihan untuk menyimpan maklumat ini di negeri ini. Di samping itu, kami boleh mengakses elemen butang dari acara klik, jadi kami tidak perlu ref sama ada.

Contoh React ini menggunakan fungsi createRipple yang sama sebagai pelaksanaan pertama dalam artikel ini. Perbezaan utama ialah - sebagai kaedah komponen Button - fungsi kami dilancarkan ke komponen tersebut. Di samping itu, pendengar acara onClick kini menjadi sebahagian daripada JSX kami:

Tanggapan ini mengekalkan pemformatan imej asal dan mengelakkan mengubah makna teras teks sambil memberi ganjaran frasa dan ayat untuk aliran yang lebih semula jadi dan kebolehbacaan yang lebih baik. Ia juga menggunakan lebih banyak teks alt deskriptif untuk imej.

Atas ialah kandungan terperinci Cara mencipta semula kesan riak butang reka bentuk bahan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!