입자 JS : 운동 및 상호 작용

이 튜토리얼에서는 입자로 뛰어 들어 입자 운동, 상호 작용 패턴 및 이벤트를 제어하는 ​​방법을 배웁니다. 이전 자습서에서는 다양한 모양과 크기의 입자를 만드는 방법을 배웠습니다. 그러나 입자간에 상호 작용이 부족하며 다른 입자가없는 것처럼 서로를 통과합니다. 이 튜토리얼은이 단점을 보충합니다.

제어 입자 움직임

입자 시스템의 모든 입자가 무작위 방향으로 움직이는 것은 아닙니다. 무작위 운동의 경우에도 다른 힘이 있습니다. 예를 들어, 입자는 서로 접근 할 때 가속하거나 충돌 후 반등 할 수 있습니다. 이러한 모든 옵션은

속성에 따라 다양한 매개 변수로 제어 할 수 있습니다. 입자가 움직이지 않으려면 로 를 설정할 수 있습니다. 입자의 속도는

파라미터를 사용하여 지정할 수 있습니다. 각 입자가 무작위 속도로 움직이게하려면 로 를 설정하십시오. 반면에, 무작위 방향으로 움직이게하려면

를 move로 지정하십시오.

입자는 결국 시스템 경계로 이동합니다. 파라미터는 입자가 다른 방향으로 반동되는지 또는 나타나는지 여부를 결정합니다.

로 설정되면 입자가 캔버스에서 벗어나면 경계를 치면 입자가 반등합니다. enable 속도는 변하지 않은 상태에서 입자가 서로 통과하는 것이 부자연 스럽습니다. 각 충돌시 입자 속도를 변경하려면 false를 speed로 설정하십시오. 흥미롭게도,이 설정은 또는 random 속성이 활성화 된 경우에만 유효합니다. 입자가 충돌 할 때마다 정면 충돌이 아니더라도 방향을 뒤집습니다. true 마지막으로, 매력에 대해 논의합시다. 매력이 활성화되면 입자는 다른 입자 근처에 존재할 때 속도를 변화시킵니다. 다른 매개 변수의 값에 따라 변화가 양수 또는 부정적 일 수 있습니다. 각 방향의 매개 변수는 각각의 매개 변수 direction 및 의 값에 반비례합니다. 명백한 매력이 관찰되도록 기본값이 높습니다. 반면에, 이러한 값이 너무 낮게 설정되면 입자는 일정 기간 후에 매우 높은 속도를 얻게됩니다. none

위의 입자 모션에 대한 JSON 코드는 다음과 같습니다. <code>out_mode out가 bounce 및

로 로 설정되면 동시에 입자가 움직이지 않을 것입니다.

bounce 대화식 이벤트 및 패턴 true 사용자가 입자와 상호 작용할 수 있습니까? 대답은 예입니다. Particles.js는 세 가지 이벤트에 응답 할 수 있습니다. 매개 변수의 값을 설정함으로써 캔버스 또는 창 자체의 이벤트를 감지 할 수 있습니다. 이 모든 이벤트는 캔버스/창을 호버링, 클릭 또는 크기 조정할 때 트리거됩니다.

hover click가 로 설정되면 입자는 변형없이 나머지 공간에서 스스로 조정됩니다. resize>가 detect_on로 설정되면 입자는 캔버스 크기의 변화에 ​​맞게 모양이 변경됩니다.

매개 변수는 사용자가 입자와 상호 작용하는 방식을 정의합니다. 라이브러리는 5 가지 상호 작용 모드를 정의합니다 : , resize, , , true 및 . resize false 모드는 특정 거리 내에서 호버링 또는 클릭 및 근처 입자 사이에 연결 라인을 만듭니다. 이 모드는 호버 이벤트에만 적용됩니다. 아래의 JSON 코드는 800 픽셀 내의 모든 입자를 연결하기 위해 1의 불투명도가있는 선을 그립니다.

"move": {
  "enable": true,
  "speed": 20,
  "random": true,
  "direction": "none",
  "bounce": true,
  "out_mode": "bounce",
  "attract": {
    "enable": true,
    "rotateX": 10,
    "rotateY": 10
  }
}

모드는 특정 거리 내에서 모든 입자의 크기와 불투명도를 변경하면 지속 시간이 귀하에게 달려 있습니다. 모드는 입자를 클릭 위치에서 멀어지게합니다. 두 모드 모두

또는 mode에 추가 할 수 있습니다. 지속 시간은 두 경우 모두 이벤트를 클릭하는 데만 적용됩니다. grab bubble 데모를 더 잘 작동시키기 위해 다양한 매개 변수를 변경해 볼 수 있습니다. repulse push remove

모드는 마우스가 클릭 할 때마다 특정 수의 입자를 추가합니다. 입자가 클릭 된 위치에 추가됩니다. 마찬가지로, 모드는 캔버스에서 입자를 제거합니다. 제거 할 입자는 무작위로 선택됩니다.

grab

"detect_on": "canvas",
"events": {
  "onhover": {
    "enable": true,
    "mode": "repulse"
  },
  "onclick": {
    "enable": true,
    "mode": "push"
  },
  "resize": true
}

요약

bubble 이 일련의 튜토리얼은 Particles.js의 모든 기능을 다룹니다. 입자와 같은 문제를 때때로 반복하지 않는 문제를 피하기 위해 때때로 몇 가지 예방 조치를 언급했습니다. repulse 우리가 논의한 모든 매개 변수에 대한 자세한 정보가 필요한 경우이 라이브러리의 문서를 참조하십시오. 또한 라이브러리 사용에 문제가 있거나 일부 기능이 비정상적으로 작동하는 경우 내부적으로 작동하는 방식을 이해하기 위해 소스 코드를 읽는 것이 좋습니다. hover click 이 기사는 업데이트되었으며 Kingsley Ubah의 기여를 포함합니다. Kingsley는 독자들에게 교육하고 영감을주는 콘텐츠를 만드는 데 열정적입니다. 그의 취미에는 독서, 축구 및 사이클링이 포함됩니다.

위 내용은 입자 JS : 운동 및 상호 작용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!