Éclat gris

Cet effet d'éclatement gris captivant, bien qu'il ne soit pas trop complexe, offre une opportunité d'apprentissage précieuse. Explorons sa création à l'aide de SVG, en nous concentrant sur les techniques clés.

Implémentation SVG

Tirer parti des SVG<line></line> L'élément (avec des attributs x1 , x2 , y1 , y2 ) simplifie la conception de rafale. Le point central ( x1 , y1 ) reste constant, tandis que x2 et y2 sont générés dynamiquement en utilisant des nombres aléatoires. L'attribut viewBox="0 0 100 100" rend les calculs de coordonnées simples. Envisagez d'utiliser viewBox="-50 -50 100 100" pour centrer l'origine pour une manipulation plus facile.

Génération de nombres aléatoires

Une fonction personnalisée génère des entiers aléatoires dans une plage spécifiée:

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

Cette fonction s'avère inestimable pour contrôler le positionnement des lignes, la largeur de course et l'opacité, mettant en évidence la nécessité d'un assistant mathématique JavaScript intégré similaire.

Génération HTML rationalisée

Les modèles littéraux offrent une approche propre et lisible pour générer dynamiquement les lignes SVG:

 Laissez Newlines;
pour (soit i = 0; i <h3 id="Interactivité-de-clic-pour-régénérer"> Interactivité de clic pour régénérer</h3><p> L'ajout d'interactivité est étonnamment simple. Une seule fonction ( <code>doArt()</code> ) gère la génération d'œuvres d'art et un écouteur d'événements déclenche cette fonction à chaque clic:</p><pre class="brush:php;toolbar:false"> Doart ();
window.addeventListener ("click", doart);

Esthétique améliorée avec arrondi

L'utilisation de stroke-linecap="round" améliore considérablement l'attrait visuel en arrondissant les terminaisons de la ligne.

CSS Transforme pour l'animation

L'effet d'animation est réalisé en utilisant les transformations CSS, spécifiquement scale() , plutôt que de modifier directement les coordonnées de ligne. Cela crée un effet pulsant:

 doubler {
  Transform-Origin: Centre;
  Animation: faire 4s infinie alternatif;
}
/ * ... des retards d'animation ... * /

@keyframes do {
  100% {
    transformée: échelle (0,69);
  }
}

Les retards d'animation échelonnés ( animation-delay ) utilisant les sélecteurs nth-child introduisent un aléatoire subtil à l'animation.

Améliorations futures

Plusieurs améliorations pourraient améliorer cet effet:

• Colorisation: l'ajout de couleur augmenterait l'intérêt visuel. La randomisation contrôlée, plutôt que des couleurs complètement aléatoires, donnerait des résultats plus esthétiques.
• Groupement de l'esthétique: le regroupement des largeurs ou des couleurs de course similaires créerait un look plus cohérent.
• Mouvement avancé: l'introduction de la rotation, du mouvement de la page ou des rafales multiples ajouterait du dynamisme.
• Contrôles interactifs: une bibliothèque comme Dat.Gui permettrait aux utilisateurs de régler les paramètres directement dans la démo.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!