CSSペイントAPIの探索：BLOBアニメーション

この記事では、CSSペイントAPIを使用して魅惑的なブロブアニメーションの作成を掘り下げています。従来はSVGで達成されていましたが、Paint APIは現在、ChromeとEdgeに限定されていますが、強力なCSSベースの代替品を提供しています。

これはシリーズのパート2です。

• パート1：画像断片化効果
• パート2：BLOBアニメーション（この記事）
• パート3：ポリゴンボーダー
• パート4：丸めの形

塊を作りましょう。理解します<canvas></canvas>アプローチは最初にプロセスを明確にします：

ブロブは本質的に歪んだ円です。円の周りに「n」ポイントを定義します。三角法を使用して、各ポイントの座標を計算します（図の緑色の点）。 CubicBézierCurvesはこれらのポイントを接続し、開始点、制御ポイント、およびエンドポイント（赤い点）を必要とします。赤い点は、緑色のポイント間の中間点です。

コントロールポイント（緑色の点）を調整することにより、BLOBを形作ります。各ポイントを中心に向かってランダムにオフセットすると、BLOB効果が作成されます。

この形状は、CSSペイントAPIを使用して画像のマスクになります。正方形の要素（幅は高さに等しい）が理想的で、半径は幅/高さの半分です。 CSS変数（n）がポイントカウントを制御します。

BLOBをアニメーション化するには、スムーズにシフトポイント位置が含まれます。シンプルなアニメーションは、1ポイントの位置を変更することにより、円からブロブに移行します。遷移を備えたCSS変数（ --b ）が使用されます。ホバーでは、 --b変更、ポイントを移動し、アニメーションを作成します。これを複数のポイント（たとえば偶数のポイント）に拡張すると、より複雑なアニメーションが作成されます。

ランダム性の導入：固定点の動きの代わりに、ランダムオフセットは動的なアニメーションを作成します。変数（ T ）は、均一な構成とランダム構成の間のブールスイッチとして機能します。制御可能なシードを使用したカスタムrandom()関数は、一貫したランダムシーケンスを保証します。

ポイントの動きの制御：多様なアニメーションのために、xとyの座標を個別に操作できます。たとえば、1つの座標をゼロに設定すると、1軸の動き（水​​平または垂直）が作成されます。方向性の動き（左または右）には、角度に基づいてグループ化ポイントが必要であり、オフセットに異なる兆候を適用する必要があります。円のサイズを調整すると、ポイントがマスク領域を超えないようにします。負のマージンを持つラッパーは、ホバーエリアが可視ブロブと一致することを保証します。

アニメーションの組み合わせ：KeyFramesとCubic-Bezier（）関数はアニメーションを強化します。正弦波曲線は、ぐらつき効果を生み出します。変換はスライド効果を追加します。

円形の動き：ポイントは初期位置を周回し、連続アニメーションを作成します。最大軌道半径はオーバーラップを防ぎます。

スパイラルムーブメント：円形と中心的な動きを組み合わせることで、スパイラルアニメーションが作成されます。 2つのアニメーション変数（ BおよびBo ）は、それぞれ軌道とポイントの動きを制御します。

まとめ：

• N：ポイント数（コントロールの詳細）。
• T：動きの種類（均一またはランダム）。
• シード：ランダム構成用。
• Na：動きの性質（中央の構成、1軸、円形、スパイラルなど）。
• B（およびBO）：アニメーション変数。
• V： Bの最大値（形状面積を制御）。

コード構造は簡単です：CSS変数制御パラメーター、およびJavaScript関数（ Fx 、 Fy 、 A ）がアニメーションロジックを定義します。 CSSはマスクを適用し、 B変数をアニメーション化します。

これで、CSSペイントAPIを使用したBLOBアニメーションの調査を終了します。 CSS変数を試して、無数のバリエーションを作成します。

以上がCSSペイントAPIの探索：BLOBアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。