Pecah kelabu

Kesan pecah kelabu yang menawan ini, sementara tidak terlalu kompleks, memberikan peluang pembelajaran yang berharga. Mari kita meneroka penciptaannya menggunakan SVG, memberi tumpuan kepada teknik utama.

Pelaksanaan SVG

Memanfaatkan SVG<line></line> elemen (dengan atribut x1 , x2 , y1 , y2 ) memudahkan reka bentuk pecah. Titik tengah ( x1 , y1 ) tetap malar, manakala x2 dan y2 dihasilkan secara dinamik menggunakan nombor rawak. Atribut viewBox="0 0 100 100" membuat pengiraan koordinat langsung. Pertimbangkan menggunakan viewBox="-50 -50 100 100" untuk memusatkan asal untuk manipulasi yang lebih mudah.

Penjanaan nombor rawak

Fungsi tersuai menjana bilangan bulat rawak dalam julat yang ditentukan:

 const getRandomint = (min, max) => {
  min = math.ceil (min);
  max = math.floor (max);
  kembali math.floor (math.random () * (max - min 1)) min;
};

Fungsi ini membuktikan tidak ternilai untuk mengawal kedudukan garis, lebar strok, dan kelegapan, yang menonjolkan keperluan untuk pembantu matematik JavaScript terbina dalam yang serupa.

Generasi HTML yang diselaraskan

Literasi templat menawarkan pendekatan yang bersih dan boleh dibaca untuk menghasilkan garis SVG secara dinamik:

 biarkan garis baru;
untuk (biarkan i = 0; i <h3 id="Klik-ke-regenerasi-interaktiviti"> Klik-ke-regenerasi interaktiviti</h3><p> Menambah interaktiviti sangat mudah. Fungsi tunggal ( <code>doArt()</code> ) mengendalikan penjanaan karya seni, dan pendengar acara mencetuskan fungsi ini pada setiap klik:</p><pre class="brush:php;toolbar:false"> doart ();
window.addeventListener ("klik", doart);

Estetika yang dipertingkatkan dengan pembulatan

Menggunakan stroke-linecap="round" dengan ketara meningkatkan daya tarikan visual dengan membulatkan ujung garis.

CSS Transform untuk Animasi

Kesan animasi dicapai menggunakan transformasi CSS, khususnya scale() , dan bukannya mengubah koordinat garis secara langsung. Ini menghasilkan kesan berdenyut:

 garis {
  Transform-asal: pusat;
  Animasi: Adakah 4S Infinite Alternate;
}
/ * ... kelewatan animasi ... */

@keyframes lakukan {
  100% {
    Transform: Skala (0.69);
  }
}

Kelewatan animasi yang terhuyung-huyung ( animation-delay ) menggunakan pemilih nth-child memperkenalkan rawak halus kepada animasi.

Peningkatan masa depan

Beberapa penambahbaikan dapat meningkatkan kesan ini:

• Pewarna: Menambah warna akan meningkatkan minat visual. Rawak terkawal, bukannya warna rawak sepenuhnya, akan menghasilkan lebih banyak hasil yang menyenangkan secara estetik.
• Pengumpulan estetika: Menggabungkan lebar strok yang sama atau warna akan menghasilkan rupa yang lebih kohesif.
• Pergerakan Lanjutan: Memperkenalkan putaran, pergerakan halaman, atau pelbagai pecah akan menambah dinamisme.
• Kawalan Interaktif: Perpustakaan seperti dat.gui akan membolehkan pengguna menyesuaikan parameter secara langsung dalam demo.

Atas ialah kandungan terperinci Pecah kelabu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!