입자 JS : 제어 입자 수와 모양

이전 Particles.js 튜토리얼은 라이브러리가 제공하는 다양한 기능과 시작 방법을 간단히 다루었습니다. 이 튜토리얼은 입자에서 입자의 물리적 외관과 관련된 모든 측면에 대한 자세한 소개를 제공합니다.

입자 수, 색상 및 불투명도 먼저, 우리는 입자의 수와 밀도를 다룰 것입니다. 밀도는 주어진 영역에서 함께 모이는 입자의 수를 결정합니다. 기본적으로 활성화되고 는 800으로 설정됩니다. 다음 JSON 코드를 사용하면 입자 수를 제어 할 수 있습니다.

밀도로

를

로 설정하면 표시된 입자의 수는 정확히 50입니다. 의 값을 두 배로 늘리면 입자 수가 약 절반을 줄입니다. value_area 입자의 색상을 설정하는 세 가지 방법이 있습니다. 16 진 형식, RGB 형식 또는 HSL 형식을 사용하여 색상을 설정할 수 있습니다. 라이브러리의 오류로 인해 RGB 및 HSL 형식은 기본 색상 값이 라이브러리에서 제거 될 때만 유효합니다.

입자 색상을 무작위로 설정하려면 "Random"값을 사용할 수 있습니다. 마지막으로, 색상 목록에서 색상을 무작위로 설정하려면 색상을 16 진 형식으로 배열로 제공해야합니다. 다음은 입자 색상을 설정하기위한 JSON 코드입니다.

<code>"number": {<br>  "value": 50, <br>  "density": {<br>    "enable": true,<br>    "value_area": 500<br>  }<br>}<br></code>

불투명 속성은 많은 제어를 제공합니다. 정확한 값으로 설정하거나

로 를 설정하여 임의 값을 사용할 수 있습니다. 뿐만 아니라 입자의 불투명도를 설정할 수도 있습니다. 불투명 속성에 대한 JSON 코드는 다음과 같습니다 enable false 설정 to value_area는 모든 입자에 대한 불투명도 애니메이션을 동시에 설정합니다. 애니메이션 프로세스 중에 모든 입자의 불투명도가 0.4 미만으로 떨어지지 않도록 0.4의 값을 사용하십시오. 이것은 공간을 통과하는 별의 시연입니다. 입자의 숫자, 색상 또는 불투명도를 변경하여 작동 방식을 확인하십시오.

모양과 크기 particles.js는 기본 모양을 만들기위한 5 가지 값을 가지고 있습니다. 와 같은 단순한 모양은 원형 입자를 생성하고

는 삼각형 입자를 생성하고

는 사각형을 생성합니다. 를 사용하여

<code>"color": {<br>  "value": "#fff" //使用十六进制设置白色 (我们使用此版本)<br>  "value": {r:255, g:255, b:255} //使用RGB设置白色<br>  "value": {h:0, s:100%, l:100%} //使用HSL设置白色<br>  "value": ["#f00", "#0f0", "#00f"] //随机设置红色、绿色和蓝色<br>  "value": "random" //随机设置颜色<br>}<br></code>

가장자리가있는 다각형을 만들 수 있습니다. 로 설정할 수 있습니다. "random" 파라미터는 모든 입자 주위에 주어진 색상과 너비의 개요를 추가합니다. 다음 JSON 코드는 육각형을 만듭니다. true

<code>"number": {<br>  "value": 50, <br>  "density": {<br>    "enable": true,<br>    "value_area": 500<br>  }<br>}<br></code>

는 기본 모양 대신 이미지를 표시 할 수도 있습니다. 먼저, 모양 유형을

로 지정해야합니다. 그런 다음 이미지 소스와 원하는 높이와 너비를 설정할 수 있습니다. 너비와 높이가 이미지 입자의 크기를 결정하지 않고 종횡비를 결정한다는 것을 기억할 가치가 있습니다. 다음은 축구 이미지를 사용하여 입자를 만드는 몇 가지 JSON 코드입니다. image

<code>"color": {<br>  "value": "#fff" //使用十六进制设置白色 (我们使用此版本)<br>  "value": {r:255, g:255, b:255} //使用RGB设置白色<br>  "value": {h:0, s:100%, l:100%} //使用HSL设置白色<br>  "value": ["#f00", "#0f0", "#00f"] //随机设置红色、绿色和蓝色<br>  "value": "random" //随机设置颜色<br>}<br></code>

이 라이브러리를 사용하면 여러 모양을 혼합 할 수 있습니다. 예를 들어, 원, 사각형 및 육각형을 동시에 만들기로 결정할 수 있습니다. 이 경우 이러한 모든 모양을 포함하는 배열 만 전달합니다.

로 를 설정하면 모든 입자의 크기는 25입니다.

>가

<code>"opacity": {<br>  "value": 1,<br>  "random": true, // 在我们的例子中设置为false<br>  "anim": {<br>    "enable": true,<br>    "speed": 8,<br>    "opacity_min": 0.4,<br>    "sync": false<br>  }<br>}<br></code>

로 설정되면 크기는 입자의 최대 크기 한계 역할을합니다. 애니메이션에서

로 설정하면 모든 요소의 크기가 동시에 변경됩니다. 데모를 열고 다각형 가장자리, 애니메이션 및 기타 속성의 수에 대해 다른 값을 시도하여 최종 결과에 어떤 영향을 미치는지 확인해야합니다.

<code>"shape": {<br>  "type": "polygon",<br>  "stroke": {<br>     "width": 4,<br>     "color": "#fff"<br>  },<br>  "polygon": {<br>     "nb_sides": 6<br>  }<br>}<br></code>

연결된 입자 random 입자가 충분히 가까워지면 속성을 ​​활성화하여 연결 라인을 그릴 수 있습니다. false 이 속성에는 4 개의 부가가치가 있습니다. 속성은 선이 그릴 최대 거리를 지정합니다. 를 16 진수로 설정할 수도 있습니다. 선의 불투명도는 입자 사이의 거리에 따라 다릅니다. random로 지정한 값은 입자가 매우 가까운 경우 라인의 불투명도입니다. 마지막으로, 는 선의 너비를 결정합니다. 다음은 동반 시연을위한 JSON 코드 스 니펫입니다. true sync true

입자 사이의 거리가 200 픽셀을 초과하면 선이 사라지는 것을 알 수 있습니다.

다음 튜토리얼은 입자의 움직임과 서로의 상호 작용과 상호 작용을 제어하는 ​​방법을 알려줍니다.

이 기사는 업데이트되었으며 Kingsley Ubah의 기여를 포함합니다. Kingsley는 독자들에게 교육하고 영감을주는 콘텐츠를 만드는 데 열정적입니다. 취미에는 독서, 축구 및 자전거가 포함됩니다.

위 내용은 입자 JS : 제어 입자 수와 모양의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!