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

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

我們可以通過(guò)代碼實(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)在，我們的按鈕看起來(lái)有點(diǎn)過(guò)時(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類(lèi)的<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è)漣漪都從無(wú)到有出現(xiàn)，我們將默認(rèn)比例設(shè)置為0?，F(xiàn)在，我們還看不到任何內(nèi)容，因?yàn)槲覀冞€沒(méi)有為top、left、width或height屬性設(shè)置值；我們很快就會(huì)使用JavaScript注入這些屬性。

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

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

請(qǐng)注意，我們?cè)?code>keyframes中沒(méi)有使用from關(guān)鍵字定義起始狀態(tài)？我們可以省略from，CSS將根據(jù)應(yīng)用于動(dòng)畫(huà)元素的值構(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ù)開(kāi)始，該函數(shù)將點(diǎn)擊事件作為參數(shù)：

function createRipple(event) {
  //
}

我們將通過(guò)查找事件的currentTarget來(lái)訪問(wèn)我們的按鈕。

const button = event.currentTarget;

接下來(lái)，我們將實(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之前，最好檢查是否存在任何可能來(lái)自先前點(diǎn)擊的剩余漣漪，并在執(zhí)行下一個(gè)漣漪之前將其刪除。

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

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

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

button.appendChild(circle);

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

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

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

擴(kuò)展功能

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

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

由于磁鐵效果需要在光標(biāo)每次移動(dòng)時(shí)跟蹤光標(biāo)，因此我們不再需要計(jì)算光標(biāo)位置來(lái)創(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è)新的類(lèi)實(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，我們的漣漪效果沒(méi)有任何后備方案。但是，僅使用CSS，使用:active偽類(lèi)來(lái)響應(yīng)點(diǎn)擊，就可以接近原始效果。主要限制是漣漪只能從一個(gè)點(diǎn)出現(xiàn)——通常是按鈕的中心——而不是響應(yīng)我們的點(diǎn)擊位置。Ben Szabo的這個(gè)例子特別簡(jiǎn)潔：

ES6之前的JavaScript

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

jQuery

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

React

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

此React示例使用與本文第一個(gè)實(shí)現(xiàn)相同的createRipple函數(shù)。主要區(qū)別在于——作為Button組件的方法——我們的函數(shù)的作用域限定為該組件。此外，onClick事件監(jiān)聽(tīng)器現(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)文章！