水波効果ユーザーがクリックすると、クリックの中心を中心として波紋効果が生成されます。さまざまなシーンに適しており、誇張することなく美しく、ユーザーに非常に直感的なフィードバックを提供できることが鍵です。 実装を見てみましょうまず、ここでのカプセル化は 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の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: CentOS7.3 での MySQL 8.0.13 のインストールと設定のチュートリアル
序文Linux カーネルプログラミングでは、マクロ関数 container_of(ptr, type...
序文プロジェクトのニーズに応じて、Vue-touch を使用して、vue モバイル端末の左スワイプ編...
目次まず、package.jsonを設定します次にwebpackツールをインストールしますwebpa...
他の人のウェブページを保存して見たことがあると思いますが、特にdwで開くと、多くのウェブページに&l...
この記事は、参考のためにMySQL 8.0.18のインストールと設定のグラフィックチュートリアルを記...
困り果てて、ふと、私がよく行くSinaのタッチスクリーン版はどうやって作られているのだろう?と考えま...
この記事の例では、Vueスライダー検証の実装を共有しています。コードは次のとおりです。 <テン...
1. haslayout と bfc は IE 固有の標準属性です。 2. BFC はページ上の分離...
目次遷移フック関数カスタム遷移クラス名遷移グループの使用まとめまずは例を見てみましょうコードは次のと...
共同インデックスこの記事におけるジョイントインデックスの定義は次のとおりです (MySQL): AL...
この記事では、水平棒グラフを実現するためのvue echartsの具体的なコードを参考までに共有しま...
データURI Data URI は、小さなファイルをドキュメントに直接埋め込むために RFC 239...
通常の開発では、凸型の丸い角、つまり border-radius 属性を使用するのが一般的です。凹角...
<br />作業を簡単に完了できる Web ページ作成ツールは数多くありますが、HTML...
目次MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法1. 非同...