私が最初にマテリアルデザインに會ったとき、私はそのボタンコンポーネントのデザインコンセプトに感銘を受けました。リップル効果を巧みに使用して、シンプルでエレガントな方法でユーザーにフィードバックを提供します。

この効果はどのように達成されますか？マテリアルデザインのボタンは、単純なリップルアニメーションだけでなく、アニメーションの位置もクリックされたボタンの位置によって異なります。

コードを介して同じ効果を達成できます。まず、ES6 JavaScriptを使用してクリーンなソリューションを提供し、次にいくつかの代替案を調(diào)査します。

HTML構(gòu)造

私たちの目標は、不要なHTMLタグを回避することです。そのため、最小コードを使用します。

<button>もっと詳しく知る</button>

ボタンスタイル

JavaScriptを使用してリップル要素のスタイルを動的に設(shè)定する必要がありますが、他のすべてのスタイルはCSSで実行できます。ボタンの場合、2つのプロパティのみを含める必要があります。

ボタン {
  位置：相対;
  オーバーフロー：隠し;
}

position: relative position: absolute 、それはその位置を制御するために必要です。一方、 overflow: hidden波紋がボタンの端を超えることを防ぎます。他のすべてのプロパティはオプションです。しかし今、私たちのボタンは少し時代遅れに見えます。これがより現(xiàn)代的な出発點です：

 /* robotoは材料のデフォルトのフォントです*/
@import url（ 'https://fonts.googleapis.com/css2?family=roboto&display=swap'）;

ボタン {
  位置：相対;
  オーバーフロー：隠し;
  遷移：背景400ms;
  色：#ffff;
  バックグラウンドカラー：＃6200EE;
  パディング：1REM 2REM;
  font-family： 'roboto'、sans-serif;
  フォントサイズ：1.5rem;
  アウトライン：0;
  ボーダー：0;
  ボーダーラジウス：0.25rem;
  Box-Shadow：0 0 0.5REM RGBA（0、0、0、0.3）;
  カーソル：ポインター;
}

波紋スタイル

後で、JavaScriptを使用して、リップルを.rippleクラスとして使用します<span></span>要素がHTMLに注入されます。しかし、JavaScriptに移動する前に、CSSのこれらの波紋のスタイルを定義して、いつでも使用できるようにしましょう。

 span.ripple {
  位置：絶対; /*上記の絶対的な位置決め*/
  ボーダーラジウス：50％;
  変換：スケール（0）;
  アニメーション：リップル600ms線形。
  背景色：RGBA（255、255、255、0.7）;
}

波紋を回すために、 border-radius 50％に設(shè)定します。すべてのリップルがゼロから表示されるようにするために、デフォルトスケールを0に設(shè)定します。今では、 top 、 left 、 width 、またはheight特性の値を設(shè)定していないため、まだ何も見えません。 JavaScriptを使用して、これらのプロパティをすぐに注入します。

私たちのCSSに関しては、最後に追加する必要があるのは、アニメーションの終了狀態(tài)です。

 @keyframes ripple {
  に {
    変換：スケール（4）;
    不透明：0;
  }
}

from使用してkeyframesで開始狀態(tài)を定義しないことに注意してください。 fromでき、CSSはアニメーション要素に適用される値に基づいて欠損値を構(gòu)築します。これは、関連する値が明示的に宣言されている場合（ transform: scale(0) ）、またはデフォルト値（ opacity: 1など）である場合に発生します。

JavaScriptの実裝

最後に、波紋の位置とサイズを動的に設(shè)定するためにJavaScriptが必要です。サイズはボタンのサイズに基づいている必要があり、位置はボタンとカーソルの位置に基づいている必要があります。

クリックイベントを引數(shù)として取得する空の関數(shù)から始めます。

 function createripple（event）{
  //
}

イベントのcurrentTargetを探してボタンにアクセスします。

 const button = event.currentTarget;

次に、私たちのものを即座にします<span></span>要素とボタンの幅と高さに基づいて、その直徑と半徑を計算します。

 const circle = document.createelement（ "span"）;
const diameter = math.max（button.clientwidth、button.clientheight）;
const radius = ameter / 2;

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に要素を追加する前に、次のリップルを?qū)g行する前に、前のクリックから來た可能性のあるリップルが殘っているかどうかを確認するのが最善です。

 const ripple = button.getelementsbyclassname（ "ripple"）[0];

if（ripple）{
  ripple.remove（）;
}

最後のステップでは、そうします<span></span>ボタン要素としてボタン要素を追加して、ボタンの內(nèi)側(cè)に注入するようにします。

 Button.AppendChild（Circle）;

機能が終了した後、殘っているのはそれを呼び出すことだけです。これはさまざまな方法で実行できます。ページ上の各ボタンにリップルを追加する場合は、次のようなコードを使用できます。

 const bottons = document.getElementsByTagname（ "ボタン"）;
for（ボタンのconstボタン）{
  button.addeventlistener（ "click"、createripple）;
}

今、私たちは動作の波及効果を持っています！

拡張機能

この効果とボタンの位置またはサイズの他の変更を組み合わせて、さらに一歩進めたい場合はどうなりますか？結(jié)局のところ、カスタマイズは、自分で効果を再現(xiàn)することを選択することの主な利點の1つです。拡張機能の容易さをテストするために、特定の領(lǐng)域內(nèi)にあるときにカーソルに向かってボタンを移動する「マグネット」効果を追加することにしました。

リップル関數(shù)で定義されている同じ変數(shù)のいくつかに依存する必要があります。コードの不必要な複製を避けるために、両方の方法がそれらにアクセスできるように、コードをどこかに保存する必要があります。ただし、共有変數(shù)の範囲を個々のボタンに制限する必要があります。これを達成する1つの方法は、次の例に示すようにクラスを使用することです。

マグネット効果は、カーソルが移動するたびにカーソルを追跡する必要があるため、リップルを作成するためにカーソル位置を計算する必要はなくなりました。代わりに、 cursorXとcursorYに頼ることができます。

2つの重要な新しい変數(shù)は、 magneticPullXとmagneticPullYです。それらは、カーソルの後ろのボタンを引っ張るマグネットメソッドの強度を制御します。したがって、波紋の中心を定義するときは、位置（xとy）と新しいボタンの磁気を調(diào)整する必要があります。

 const offsetLeft = this.left this.x * this.magneticPullx;
const offsettop = this.top this.y * this.magneticPully;

これらの組み合わせ効果をすべてのボタンに適用するには、各ボタンの新しいクラスインスタンスをインスタンスする必要があります。

 const bottons = document.getElementsByTagname（ "ボタン"）;
for（ボタンのconstボタン）{
  新しいボタン（ボタン）;
}

その他のテクノロジー

もちろん、これはリップル効果を達成する1つの方法にすぎません。 Codepenには、さまざまな実裝を示す多くの例があります。これが私のお気に入りの例をいくつか紹介します。

純粋なCSS実裝

ユーザーがJavaScriptを無効にした場合、リップル効果にはバックアップソリューションがありません。ただし、CSSのみを使用して、 :active擬似クラスを使用してクリックに応答すると、元の効果に近づくことができます。主な制限は、リップルが1つのポイント（通常はボタンの中心）からのみ表示されることであり、クリック位置に応答しないことです。 Ben Szaboによるこの例は特に簡潔です。

ES6の前のJavaScript

Leandro Pariceのデモは実裝に似ていますが、JavaScriptの以前のバージョンと互換性があります。

jquery

この例では、jQueryを使用してリップル効果を?qū)g現(xiàn)します。依存関係としてjQueryを既に持っている場合、コードの數(shù)行を節(jié)約するのに役立ちます。

反応します

最後に、私の別の例があります。狀態(tài)や參照などのReactの機能を使用してリップル効果を作成することができますが、これは絶対に必要ではありません。リップルの位置とサイズは、クリックするたびに計算する必要があるため、この情報を州に保持する上で利點はありません。さらに、クリックイベントからボタン要素にアクセスできるため、參照も必要ありません。

このReactの例は、この記事の最初の実裝と同じcreateRipple関數(shù)を使用します。主な違いは、 Buttonコンポーネントの方法として、私たちの関數(shù)がそのコンポーネントに閉じ込められていることです。さらに、 onClickイベントリスナーはJSXの一部になりました。

この応答は、元の畫像のフォーマットを維持し、テキストのコアの意味を変更することを避けながら、より自然な流れと読みやすさを改善するためにフレーズや文に報いることを避けます。また、畫像にもっと説明的なALTテキストを使用します。

以上が材料デザインボタンの波紋効果を再現(xiàn)する方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。