初識(shí)Material Design時(shí)，其按鈕組件的設(shè)計(jì)理念令我印象深刻。它巧妙地運(yùn)用漣漪效果，以簡(jiǎn)潔優(yōu)雅的方式向用戶提供反饋。

這種效果是如何實(shí)現(xiàn)的呢？ Material Design的按鈕不僅僅是簡(jiǎn)單的漣漪動(dòng)畫，動(dòng)畫的位置還會(huì)根據(jù)點(diǎn)擊按鈕的位置而變化。

我們可以通過代碼實(shí)現(xiàn)同樣的效果。首先，我們將使用ES6 JavaScript提供一個(gè)簡(jiǎn)潔的解決方案，然後再探討一些替代方法。

HTML結(jié)構(gòu)

我們的目標(biāo)是避免任何多餘的HTML標(biāo)記，因此我們將使用最少的代碼：

<button>了解更多</button>

按鈕樣式

我們需要使用JavaScript動(dòng)態(tài)設(shè)置漣漪元素的一些樣式，但其他所有樣式都可以用CSS完成。對(duì)於我們的按鈕，只需要包含兩個(gè)屬性。

 button {
  position: relative;
  overflow: hidden;
}

使用position: relative允許我們?cè)跐i漪元素上使用position: absolute ，這是我們控制其位置所必需的。同時(shí)， overflow: hidden防止?jié)i漪超出按鈕的邊緣。其他所有屬性都是可選的。但現(xiàn)在，我們的按鈕看起來有點(diǎn)過時(shí)了。下面是一個(gè)更現(xiàn)代的起點(diǎn)：

 /* Roboto是Material的默認(rèn)字體*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

button {
  position: relative;
  overflow: hidden;
  transition: background 400ms;
  color: #fff;
  background-color: #6200ee;
  padding: 1rem 2rem;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  outline: 0;
  border: 0;
  border-radius: 0.25rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

漣漪樣式

稍後，我們將使用JavaScript將漣漪作為帶有.ripple類的<span></span>元素注入到我們的HTML中。但在轉(zhuǎn)向JavaScript之前，讓我們?cè)贑SS中定義這些漣漪的樣式，以便我們隨時(shí)可以使用：

 span.ripple {
  position: absolute; /* 我們前面提到的絕對(duì)定位*/
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  background-color: rgba(255, 255, 255, 0.7);
}

為了使我們的漣漪呈圓形，我們將border-radius設(shè)置為50%。為了確保每個(gè)漣漪都從無到有出現(xiàn)，我們將默認(rèn)比例設(shè)置為0?，F(xiàn)在，我們還看不到任何內(nèi)容，因?yàn)槲覀冞€沒有為top 、 left 、 width或height屬性設(shè)置值；我們很快就會(huì)使用JavaScript注入這些屬性。

至於我們的CSS，我們需要添加的最後一件事是動(dòng)畫的結(jié)束狀態(tài)：

 @keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

請(qǐng)注意，我們?cè)?code>keyframes中沒有使用from關(guān)鍵字定義起始狀態(tài)？我們可以省略from ，CSS將根據(jù)應(yīng)用於動(dòng)畫元素的值構(gòu)建缺失的值。如果顯式聲明了相關(guān)值（如transform: scale(0) ），或者它們是默認(rèn)值（如opacity: 1 ），則會(huì)發(fā)生這種情況。

JavaScript實(shí)現(xiàn)

最後，我們需要JavaScript動(dòng)態(tài)設(shè)置漣漪的位置和大小。大小應(yīng)基於按鈕的大小，而位置應(yīng)基於按鈕和光標(biāo)的位置。

我們將從一個(gè)空函數(shù)開始，該函數(shù)將點(diǎn)擊事件作為參數(shù)：

 function createRipple(event) {
  //
}

我們將通過查找事件的currentTarget來訪問我們的按鈕。

 const button = event.currentTarget;

接下來，我們將實(shí)例化我們的<span></span>元素，並根據(jù)按鈕的寬度和高度計(jì)算其直徑和半徑。

 const circle = document.createElement("span");
const diameter = Math.max(button.clientWidth, button.clientHeight);
const radius = diameter / 2;

我們現(xiàn)在可以定義漣漪所需的其餘屬性： left 、 top 、 width和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");

在將<span></span>元素添加到DOM之前，最好檢查是否存在任何可能來自先前點(diǎn)擊的剩餘漣漪，並在執(zhí)行下一個(gè)漣漪之前將其刪除。

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

if (ripple) {
  ripple.remove();
}

最後一步，我們將<span></span>作為子元素附加到按鈕元素，以便將其註入到按鈕內(nèi)部。

 button.appendChild(circle);

我們的函數(shù)完成後，剩下的就是調(diào)用它了。這可以通過多種方式完成。如果我們想將漣漪添加到頁面上的每個(gè)按鈕，我們可以使用類似這樣的代碼：

 const buttons = document.getElementsByTagName("button");
for (const button of buttons) {
  button.addEventListener("click", createRipple);
}

現(xiàn)在我們已經(jīng)有了工作的漣漪效果！

擴(kuò)展功能

如果我們想更進(jìn)一步，將此效果與按鈕位置或大小的其他更改結(jié)合起來呢？畢竟，自定義能力是我們選擇自己重新創(chuàng)建效果的主要優(yōu)勢(shì)之一。為了測(cè)試擴(kuò)展函數(shù)的難易程度，我決定添加一個(gè)“磁鐵”效果，當(dāng)光標(biāo)位於特定區(qū)域內(nèi)時(shí)，該效果會(huì)使我們的按鈕向光標(biāo)移動(dòng)。

我們需要依賴在漣漪函數(shù)中定義的一些相同變量。為了避免不必要地重複代碼，我們應(yīng)該將它們存儲(chǔ)在某個(gè)地方，以便這兩個(gè)方法都可以訪問它們。但是我們也應(yīng)該將共享變量的作用域限定為每個(gè)單獨(dú)的按鈕。實(shí)現(xiàn)此目標(biāo)的一種方法是使用類，如下例所示：

由於磁鐵效果需要在光標(biāo)每次移動(dòng)時(shí)跟蹤光標(biāo)，因此我們不再需要計(jì)算光標(biāo)位置來創(chuàng)建漣漪。相反，我們可以依賴cursorX和cursorY 。

兩個(gè)重要的新的變量是magneticPullX和magneticPullY 。它們控制我們的磁鐵方法在光標(biāo)之後拉動(dòng)按鈕的強(qiáng)度。因此，當(dāng)我們定義漣漪的中心時(shí)，我們需要調(diào)整新按鈕的位置（x和y）和磁力。

 const offsetLeft = this.left this.x * this.magneticPullX;
const offsetTop = this.top this.y * this.magneticPullY;

要將這些組合效果應(yīng)用於所有按鈕，我們需要為每個(gè)按鈕實(shí)例化一個(gè)新的類實(shí)例：

 const buttons = document.getElementsByTagName("button");
for (const button of buttons) {
  new Button(button);
}

其他技術(shù)

當(dāng)然，這只是實(shí)現(xiàn)漣漪效果的一種方法。在CodePen上，有很多示例展示了不同的實(shí)現(xiàn)方式。以下是一些我最喜歡的例子。

純CSS實(shí)現(xiàn)

如果用戶禁用了JavaScript，我們的漣漪效果沒有任何後備方案。但是，僅使用CSS，使用:active偽類來響應(yīng)點(diǎn)擊，就可以接近原始效果。主要限制是漣漪只能從一個(gè)點(diǎn)出現(xiàn)——通常是按鈕的中心——而不是響應(yīng)我們的點(diǎn)擊位置。 Ben Szabo的這個(gè)例子特別簡(jiǎn)潔：

ES6之前的JavaScript

Leandro Parice的演示類似於我們的實(shí)現(xiàn)，但它與早期版本的JavaScript兼容：

jQuery

此示例使用jQuery來實(shí)現(xiàn)漣漪效果。如果您已經(jīng)將jQuery作為依賴項(xiàng)，它可以幫助您節(jié)省幾行代碼。

React

最後，還有一個(gè)我的例子。雖然可以使用React的功能（如狀態(tài)和refs）來幫助創(chuàng)建漣漪效果，但這並不是絕對(duì)必要的。漣漪的位置和大小都需要為每次點(diǎn)擊計(jì)算，因此將這些信息保存在狀態(tài)中沒有任何優(yōu)勢(shì)。此外，我們可以從點(diǎn)擊事件中訪問按鈕元素，因此我們也不需要refs。

此React示例使用與本文第一個(gè)實(shí)現(xiàn)相同的createRipple函數(shù)。主要區(qū)別在於——作為Button組件的方法——我們的函數(shù)的作用域限定為該組件。此外， onClick事件監(jiān)聽器現(xiàn)在是我們JSX的一部分：

This response maintains the original image formatting and avoids altering the core meaning of the text while rewording phrases and sentences for a more natural flow and improved readability. It also uses more descriptive alt text for the images.

以上是如何重新創(chuàng)建材料設(shè)計(jì)按鈕的連鎖效果的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！