Vue は水の波紋効果のクリックフィードバック指示を実装します

Vue は水の波紋効果のクリックフィードバック指示を実装します

水波効果

ユーザーがクリックすると、クリックの中心を中心として波紋効果が生成されます。さまざまなシーンに適しており、誇張することなく美しく、ユーザーに非常に直感的なフィードバックを提供できることが鍵です。

実装を見てみましょう

まず、ここでのカプセル化は Vue3 のカスタム命令に基づいています。Vue3 のカスタム命令は、Vue2 と比べてあまり変わっていません。私たちの目標は、水波コマンドの基本的なプロトタイプを完成させることであり、ここでは段階的に進めていきます。

水の波紋のデフォルトスタイルをカスタマイズする

水の波紋は、実際には、ユーザーがクリックした場所に小さな円が生成され、そのサイズがクリックされた要素全体に徐々に拡大するプロセスです。ここでは、まず水の波の基本的なスタイルを策定し、遷移アニメーションを設定します。遷移アニメーションは、ゆっくりと始まり、その後加速するプロセスである必要があります。ここでは、ベジェ曲線のカスタマイズを使用します。

.my-ripple {
  位置: 絶対;
  上: 0;
  左: 0;
  zインデックス: 100;
  境界線の半径: 50%;
  背景色: 現在の色;
  不透明度: 0;
  遷移: 変換 0.2 秒 キュービックベジェ (0.68, 0.01, 0.62, 0.6)、不透明度 0.08 秒 線形;
  will-change: 変換、不透明度;
  ポインタイベント: なし;
}

水の波紋の位置と直径を計算する

水の波の直径、波が作成されるときの (x, y)、およびトランジションアニメーションが終了するときの (x, y) を決定すると、トランジションを使用して水の波のアニメーションをレンダリングできます。 作成されるときの (x, y) はユーザーがクリックする位置ですが、水の波の直径とトランジションアニメーションが終了するときの (x, y) をどのように計算するのでしょうか。私たちの要素はすべて長方形です。ユーザーが要素のどこをクリックしても、長方形の斜辺を直径とする円が要素全体を完全に覆うことができます。斜辺を計算するには、小学校の算数の知識を使用して、両辺の二乗の合計の平方根を求めます。以下は、遷移アニメーションの最後の水波推論図です。

最初の矢印: 予想される水の波 2 番目の矢印: 要素 (0,0) で作成された水の波 3 番目の矢印: 角が丸くない要素 (0,0) で作成された水の波

要素(0,0)点によって生成された水波をオフセットすることで、必要な水波が得られることがわかります。そこから、

アニメーション終了時の水波の大きさ = 円が作成されたときの斜辺の (x,y) = ユーザーがクリックした位置 遷移アニメーション終了時の (x,y) = 要素 (0,0) で作成された水波は x と y でオフセットされます

関数computeRippleStyles(要素、イベント) {
  const { 上、左 } = element.getBoundingClientRect()
  const { clientWidth, clientHeight } = 要素
  
  定数半径 = Math.sqrt(クライアント幅 ** 2 + クライアント高さ ** 2) / 2
  定数サイズ = 半径 * 2
  
  const localX = event.clientX - 左
  const localY = event.clientY - 上部

  定数 centerX = (クライアント幅 - 半径 * 2) / 2
  定数 centerY = (クライアントの高さ - 半径 * 2) / 2

  定数 x = ローカルX - 半径
  定数 y = ローカルY - 半径

  {x、y、centerX、centerY、サイズ}を返します
}

マウスを押すと水の波を作成します

次に、マウスが押されたときに水の波を作成し、マウスの押下イベントをリッスンする必要があります。ここでは、PC 側を例に挙げます。水の波が作成されたばかりのときは、transform を使用して 0.3 に縮小します。これは、作者が試した比較的適切な作成サイズです。次に、transform を変更して、遷移する水の波の拡散アニメーションをトリガーします。ここでは、水の波紋にさらにテクスチャを付けるために、透明度の遷移も追加されています。

関数createRipple(イベント) {
  const コンテナ = this
  const { x, y, centerX, centerY, サイズ } = computeRippleStyles(コンテナ, イベント)
  const リップル = document.createElement('div')
  ripple.classList.add('my-ripple')
  ripple.style.opacity = `0`
  ripple.style.transform = `translate(${x}px, ${y}px) scale3d(.3, .3, .3)`
  ripple.style.width = `${size}px`
  ripple.style.height = `${size}px`
  // 水波の生成時刻を記録します。ripple.dataset.createdAt = String(performance.now())

  const { 位置 } = window.getComputedStyle(コンテナ)
  container.style.overflow = '隠し'
  位置 === '静的' && (this.style.position = '相対')

  コンテナ.appendChild(リップル)

  ウィンドウ.setTimeout(() => {
    ripple.style.transform = `translate(${centerX}px, ${centerY}px) scale3d(1, 1, 1)`
    ripple.style.opacity = `.25`
  })
}

定数VRipple = {
  マウント(el) {
    el.addEventListener('mousedown', リップルを作成します)
  }
}

マウスを持ち上げるときに水の波を破壊する

マウスを離すと、生成された水波ノードを見つけて透明度を変更し、透明度の変更アニメーションが終了したら水波ノードを削除するだけです。

関数removeRipple() {
  const コンテナ = this
  const リップル = container.querySelectorAll('.my-ripple')
  波紋の長さが等しい場合
    戻る
  }

  const lastRipple = ripples[ripples.length - 1]
  // 水の波の作成時間に基づいて拡散アニメーションの実行にかかる時間を計算して、各水の波が拡散アニメーションを完了するようにします。const delay = 300 - performance.now() + Number(lastRipple.dataset.createdAt)

  タイムアウトを設定する(() => {
    lastRipple.style.opacity = `0`
    
    タイムアウトを設定します(() => lastRipple.parentNode?.removeChild(lastRipple), 300)
  }、 遅れ)
}

定数VRipple = {
  マウント(el) {
    el.addEventListener('mousedown', リップルを作成します)
    document.addEventListener('mouseup', リップルを削除)
  },
  アンマウント(el) {
    el.removeEventListener('mousedown', createRipple)
    document.removeEventListener('mouseup', リップルの削除)
  }
}

コマンドバインディングで水波オプションを拡張

また、バインディングを通じて指示を拡張することもできます。たとえば、色の変更、ステータスの無効化などのオプションを提供できますが、ここでは詳しく説明しません。結果を見てみましょう。

最後に

これまで、単純なリップル命令を実装してきました。当社のコンポーネント ライブラリにも同様の命令がありますので、より完全なバージョンについては当社のソース コードをご覧ください。 まず、Nuggets コミュニティに感謝したいと思います。何人かの友人はすでに私たちのウェアハウスにいくつかのコードを PR し始めています。私たちもコミュニティの友人たちとこのようなことをできることをとても嬉しく思っています。また、私たちのコンポーネント ライブラリ チームは、貢献に参加する熱心なファンを募集しています。興味のある友人は、ぜひディスカッションに参加してください。参加方法は、ウェアハウスに直接行って問題を提起し、メールを残すことです。できるだけ早く対処します。興味があるかどうかにかかわらず、私たちにスターを付けて注目していただければ幸いです。コミュニティ パートナーのサポートと関心が私たちの最大のモチベーションです。

倉庫住所 書類住所

上記は、水波効果を実現するためのVueのクリックフィードバック命令の詳細です。Vueのクリックフィードバック命令の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue でポップアップ ウィンドウをクリックしたときにクリック イベントを自動的にトリガーするソリューション (シミュレーション シナリオ)
  • Vue.jsはアイコンをクリックしてズームインし、
  • Vueの空白部分をクリックしてポップアップウィンドウを閉じる2つの方法
  • Vueは現在の行をクリックして色を変更することを実装しています
  • Vue3.0はクリックして切り替える検証コード(コンポーネント)と検証を実装します
  • Vue の親コンポーネントのボタンをクリックして子コンポーネントをトリガーするイベントの詳細な説明
  • Vueは、短時間に連続してクリックされた後に複数のトリガーリクエストが発生するのを防ぎます。
  • VueはIDの動的な割り当てと、現在クリックされている要素のID操作を取得するクリックイベントを実装しています。
  • クリックしてポップアップボックスを表示するVueの例
  • Vueはantデザインのテーブルを使用して、行をクリックしたときにイベント操作をトリガーします。

<<:  CentOS7.3 での MySQL 8.0.13 のインストールと設定のチュートリアル

>>:  Linuxカーネルで中国語の文字を出力する方法

推薦する

Linux カーネルプログラミングにおけるコンテナの of() 関数の紹介

序文Linux カーネルプログラミングでは、マクロ関数 container_of(ptr, type...

Vueモバイル端末は左スライド編集と削除の全プロセスを実現します

序文プロジェクトのニーズに応じて、Vue-touch を使用して、vue モバイル端末の左スワイプ編...

webpackでvue環境を構築する際の異常なエラーを解決する

目次まず、package.jsonを設定します次にwebpackツールをインストールしますwebpa...

tbodyタグの魔法はテーブルコンテンツの表示を高速化します

他の人のウェブページを保存して見たことがあると思いますが、特にdwで開くと、多くのウェブページに&l...

MySQL 8.0.18 のインストールと設定方法のグラフィックチュートリアル

この記事は、参考のためにMySQL 8.0.18のインストールと設定のグラフィックチュートリアルを記...

メタビューポートはiPhoneでウェブページをフルスクリーン表示コントロールします

困り果てて、ふと、私がよく行くSinaのタッチスクリーン版はどうやって作られているのだろう?と考えま...

Vueはシンプルなスライダー検証を実装する

この記事の例では、Vueスライダー検証の実装を共有しています。コードは次のとおりです。 <テン...

haslaylout と bfc 解析の理解

1. haslayout と bfc は IE 固有の標準属性です。 2. BFC はページ上の分離...

Vue のトランジション効果とアニメーショントランジションの使用例の詳細な説明

目次遷移フック関数カスタム遷移クラス名遷移グループの使用まとめまずは例を見てみましょうコードは次のと...

MySQL ジョイントインデックス(複合インデックス)の実装

共同インデックスこの記事におけるジョイントインデックスの定義は次のとおりです (MySQL): AL...

Vue echarts は水平棒グラフを実現します

この記事では、水平棒グラフを実現するためのvue echartsの具体的なコードを参考までに共有しま...

すべてのブラウザに対応したデータURIとMHTMLの完全なソリューション

データURI Data URI は、小さなファイルをドキュメントに直接埋め込むために RFC 239...

CSS で div 凹角スタイルを実装するサンプル コード

通常の開発では、凸型の丸い角、つまり border-radius 属性を使用するのが一般的です。凹角...

HTML ウェブページ作成のための 8 つの強力なテクニック

<br />作業を簡単に完了できる Web ページ作成ツールは数多くありますが、HTML...

MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法

目次MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法1. 非同...