회색 버스트

이 매혹적인 회색 버스트 효과는 지나치게 복잡하지는 않지만 귀중한 학습 기회를 제공합니다. 주요 기술에 중점을 둔 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 ( "클릭", Doart);

반올림으로 향상된 미학

stroke-linecap="round" 사용하면 라인 엔딩을 반올림하여 시각적 매력이 크게 향상됩니다.

애니메이션을 위해 CSS 변환

애니메이션 효과는 라인 좌표를 직접 변경하는 대신 CSS 변환, 특히 scale() 사용하여 달성됩니다. 이것은 맥동 효과를 만듭니다.

 선 {
  변형-오리진 : 센터;
  애니메이션 : 4S 무한 대체;
}
/ * ... 애니메이션 지연 ... */

@keyframes do {
  100% {
    변환 : 스케일 (0.69);
  }
}

nth-child Selectors를 사용한 비틀 거리는 애니메이션 지연 ( animation-delay )은 애니메이션에 미묘한 무작위성을 소개합니다.

향후 향상

몇 가지 개선으로 인해이 효과가 향상 될 수 있습니다.

• 색상화 : 색상을 추가하면 시각적 관심이 높아집니다. 완전히 무작위 색상이 아닌 제어 된 무작위 배정은 더 미적으로 유쾌한 결과를 얻을 수 있습니다.
• 미학 그룹화 : 비슷한 스트로크 너비 또는 색상을 그룹화하면보다 응집력있는 모양이 생길 수 있습니다.
• Advanced Movement : 회전, 페이지 이동 또는 다중 버스트를 도입하면 역학이 추가됩니다.
• 대화식 컨트롤 : Dat.Gui와 같은 라이브러리를 사용하면 사용자가 데모 내에서 직접 매개 변수를 조정할 수 있습니다.

위 내용은 회색 버스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!