灰色のバースト

この魅惑的な灰色のバースト効果は、過度に複雑ではありませんが、貴重な学習の機会を提供します。 SVGを使用して、重要なテクニックに焦点を当てた作成を検討しましょう。

SVG実装

SVGを活用します<line></line>要素（属性x1 、 x2 、 y1 、 y2 ）は、バーストデザインを簡素化します。中心点（ x1 、 y1 ）は一定のままですが、 x2とy2は乱数を使用して動的に生成されます。 viewBox="0 0 100 100"属性は、座標計算を簡単にします。 viewBox="-50 -50 100 100"を使用して、操作を容易にするために原点を中央に配置することを検討してください。

乱数生成

カスタム関数は、指定された範囲内でランダムな整数を生成します。

 const getRandomint =（min、max）=> {
  min = math.ceil（min）;
  max = math.floor（max）;
  return math.floor（math.random（） *（max -min 1））min;
};

この機能は、ラインの位置付け、ストローク幅、および不透明度を制御するために非常に貴重であり、同様の内蔵JavaScript数学ヘルパーの必要性を強調しています。

合理化されたHTML生成

テンプレートリテラルは、SVGラインを動的に生成するためのクリーンで読みやすいアプローチを提供します。

 Newlinesを使用してください。
for（i = 0; i <h3 id="クリックするのは-インタラクティブを繰り返します">クリックするのは、インタラクティブを繰り返します</h3><p>インタラクティブ性を追加するのは驚くほど簡単です。単一の関数（ <code>doArt()</code> ）がアートワークの生成を処理し、イベントリスナーは各クリックでこの関数をトリガーします。</p><pre class="brush:php;toolbar:false"> doart（）;
window.addeventlistener（ "click"、doart）;

丸みを帯びた美学の強化

stroke-linecap="round"を使用すると、ラインエンディングを丸めることで視覚的な魅力が大幅に向上します。

アニメーション用のCSS変換

アニメーション効果は、ライン座標を直接変更するのではなく、CSS変換、特にscale()を使用して達成されます。これにより、脈動効果が生まれます。

ライン {
  変換オリジン：センター;
  アニメーション：4S Infinite Alternateを行います。
}
/ * ...アニメーションの遅延... */

@KeyFrames do {
  100％{
    変換：スケール（0.69）;
  }
}

nth-childセレクターを使用したずらしたアニメーションの遅延（ animation-delay ）は、アニメーションに微妙なランダム性を導入します。

将来の強化

いくつかの改善により、この効果が向上する可能性があります。

• 色付け：色を追加すると、視覚的な関心が高まります。完全にランダムな色ではなく、制御されたランダム化は、より審美的に心地よい結果をもたらします。
• 審美的なグループ化：同様のストローク幅または色をグループ化すると、よりまとまりのある外観が作成されます。
• 高度な動き：回転、ページの動き、または複数のバーストを導入すると、ダイナミズムが追加されます。
• インタラクティブコントロール： dat.guiのようなライブラリにより、ユーザーはデモ内でパラメーターを直接調整できます。

以上が灰色のバーストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。