序文
まずはファンデンH5の効果を見てみましょう。
実装は複雑ではなく、主に以下の実装ステップを把握するためのステップバイステップです：
ステップ1：ボールは一定の範囲内で滑るように制限されています。
ステップ2：ボールはスライドを止めるとエッジを吸います。
ステップ3：エッジを吸った状態のボールをクリックし、オーディオ再生コントロールパネルに変更し、毛皮のガラスをクリックし、ボールに戻ります。
ステップ4: 背景の毛皮のガラスの効果
ステップバイステップ。
ステップ1: ブロブのスライドを一定範囲内に制限します。
touchmoveはボールのスライドイベントを取得できるので、touchmoveを使ってボールのスライド範囲を制限することができます。
まずボールのtouchmoveにhandleTouchMove関数を渡し、handleTouchMoveでスライドイベントeを取得し、e.targetTouches[0]で指がスライドする座標clientXとclientYを取得し、ボールのleftとtopの値を計算します。を使ってボールの左と上の値を計算し、指によるボールのスライドを制御します。
<div
class="circle"
v-if="!showCircleContent"
@click="handleClickCircle"
@touchend="handleTouchEnd"
@touchmove.prevent="handleTouchMove"
></div>
指またはマウスが画面の左境界を越えてスライドすると、ボールの左は0にリセットされ、ボールが左境界を越えないようにします。右の境界線を越えてスライドするとき、ボールの左は、ボールが右の境界線を越えないようにするために、ビューポートの幅からボールの幅を引いた値にリセットされます。
上部と下部の境界も同様で、指やマウスが上部の境界を越えてスライドすると、ボールの上部は0にリセットされます。 下部の境界を超えると、上部はビューポートの高さからボールの高さを引いた値にリセットされます。
もちろん、スライド範囲は自分でコントロールできます。ボールのスライドをコントロールする詳細なコードは次のとおりです：
//ホバーボールを1つの範囲に限定する
handleTouchMove(e) {
this.isAnimated = false; //指をドラッグしてボールをスライドさせるときにはアニメーションは必要なく、スライドが止まったときにアニメーションが追加される。
this.$refs.circle.style.borderRadius = "50%";
let offsetX = e.targetTouches[0].clientX - this.circleWidth / 2; // this.circleWidth / 2目標は、ホバーボールの中心を指で押すことだ。
let offsetY = e.targetTouches[0].clientY - this.circleHeight / 2; // this.circleHeight / 2目標は、ホバーボールの中心を指で押すことだ。
if (offsetX <= 0 + this.placeholderWidth) {
offsetX = 0 + this.placeholderWidth; //ホバーボールを端に密着させない
} else if (
offsetX >=
document.documentElement.clientWidth -
this.circleWidth -
this.placeholderWidth //ホバーボールは完全に画面の端に寄っているわけではなく、画面の端から距離がある。
) {
offsetX =
document.documentElement.clientWidth -
this.circleWidth -
this.placeholderWidth;
}
if (offsetY <= 0 + this.placeholderWidth) {
offsetY = 0 + this.placeholderWidth;
} else if (
offsetY >=
document.documentElement.clientHeight -
this.circleHeight -
this.placeholderWidth
) {
offsetY =
document.documentElement.clientHeight -
this.circleHeight -
this.placeholderWidth;
}
this.$refs.circle.style.left = offsetX + "px";
this.$refs.circle.style.top = offsetY + "px";
},
ステップ2：スライドを停止し、ホバーボール吸引エッジ効果
ボールをスライドさせ、指を離したときに、ボールが画面の端に吸着する必要があります。ボールの中心のx座標によって、x座標が画面幅の半分以下なら、画面の左側に吸着され、画面幅の半分以上なら、画面の右側に吸着され、コードは画面の右側に行くことができます：
//touchendbackdrop-filterを使うと、ホバーボールがディスプレイの端に吸い付く。
handleTouchEnd(e) {
this.isAnimated = true; //指をドラッグしてボールをスライドさせるときにはアニメーションは必要なく、スライドが止まったときにアニメーションが追加される。
let circleCenterX =
parseInt(this.$refs.circle.style.left.replace("px", "")) +
this.circleWidth / 2; //ホバーボールの中心のx座標
let circleCenterY =
parseInt(this.$refs.circle.style.top.replace("px", "")) +
this.circleHeight / 2; //ホバーボールの中心のy座標
if (circleCenterX < this.clientWidth / 2) {
//吸着左
this.$refs.circle.style.left = 0;
this.$refs.circle.style.borderRadius = "0 ";
} else {
//右側の吸着
this.$refs.circle.style.left =
this.clientWidth - this.circleWidth + "px";
this.$refs.circle.style.borderRadius = "%";
}
if (circleCenterY >= this.clientHeight - this.placeholderBottom) {
this.$refs.circle.style.top =
this.clientHeight - this.placeholderBottom + "px";
}
},
## ステップ3: ボールをクリックすると、オーディオ再生コントロールパネルに変化します。
ボールが画面の端に吸着されたら、ボールをクリックすると、ボールはオーディオコントロールパネルに拡大し、ガラスの背景をクリックすると、ボールは元の状態に縮小します。
実現にあたっては、サークルとオーディオコントロールパネルの内容を別々のレイアウトに分離したので、こんな感じです。
<div
class="circle-box"
:class="{
opened: showCircleContent,
animation: isAnimated
}"
ref="circle"
>
<div class="content" v-if="showCircleContent">
<!-- オーディオコントロールパネル、曲名、再生時間を表示し、オーディオの再生と一時停止をコントロールできる。 -->
</div>
<div class="circle" v-if="!showCircleContent">
<!-- ボールのホバリング状態 -->
</div>
</div>
circle-boxを使ってホバーボールのサークルとオーディオコントロールパネルのコンテンツを囲み、showCircleContentを使ってホバーボールとオーディオコントロールパネルのどちらを表示するかを決定します。
ホバーボールがクリックされると、showCircleContentがtrueになり、円が引き伸ばされてオーディオコントロールパネルに変わります。
ガラスの背景をクリックしてshowCircleContentをfalseに設定すると、オーディオ再生コントロールパネルは縮小され、ホバーボールに戻ります。
ストレッチアニメーション
ボールがホバーボールからオーディオコントロールパネルに、またはコントロールパネルからホバーボールに変わるとき、アニメーションがあります。ボールがスライドするときにアニメーションがあると、ラグが発生します。
ステップ4：背景のヘアガラス効果
backdrop-filter属性は、現在の要素にぼかし効果を与えるだけで、現在の要素より下の要素はクリアなままです。しかし、backdrop-filter属性は、現在の要素とそれ以降の要素をぼかすことができ、ガラスのような効果を得ることができます。
backdrop-filter: blur(10px); //髪のガラス効果、iosで有効
-webkit-backdrop-filter: blur(10px);
しかし、backdrop-filterの互換性はあまり良くなく、IOSプラットフォームではガラス効果を見ることができますが、Androidプラットフォームでは見ることができません。
