Particles.js: 기본 사항 소개

이리저리 움직이며 서로 상호 작용하거나 여러분과 상호 작용하는 많은 작은 입자에는 특정한 매력이 있습니다. 많은 수의 입자로 작업해야 하는 상황에 직면하면 Particles.js가 도움이 될 것입니다. 이름에서 알 수 있듯이 입자 시스템을 만드는 데 도움이 되는 JavaScript 라이브러리입니다. 게다가 가볍고, 사용하기 쉬우며, 많은 제어 기능을 제공합니다.

이 튜토리얼에서는 이 라이브러리의 모든 기능을 소개하고 시작하는 데 도움을 드리겠습니다. 이 튜토리얼은 시리즈의 첫 번째 부분이며 기본 사항만 다룹니다.

설치 및 사용

먼저 도서관을 호스팅해야 합니다. 자신의 서버에 업로드하거나 저처럼 jsdeliver CDN을 사용할 수 있습니다.

으아악

Particles.js가 입자를 생성할 DOM 요소도 생성해야 합니다. 나중에 참조할 수 있도록 쉽게 식별할 수 있는 id 이름을 지정하세요.

으아악

이제 기본 설정으로 기본 입자 시스템을 만들려면 라이브러리를 초기화하는 데 JavaScript 한 줄만 있으면 됩니다.

으아악

기본적으로 입자는 흰색입니다. 그들은 또한 얇은 흰색 선으로 서로 연결되어 있습니다. 그러니 지금 당장 아무것도 보이지 않는다면 배경을 다른 것으로 바꾸세요. 이것은 입자의 스타일을 지정하는 데 사용하는 CSS입니다 div:

으아악

아래 데모의 아무 곳이나 클릭해 보세요. 클릭할 때마다 Particles.js는 4개의 새로운 입자를 생성합니다.

맞춤 옵션 설정

이전 데모를 만드는 데 코드 네 줄만 필요했지만 최종 결과는 원하는 것이 아닐 수도 있습니다. 알갱이가 나에게는 너무 크고 밀도가 너무 높은 것 같았습니다. 어쩌면 입자의 모양이 다르거나 크기가 임의적이기를 원할 수도 있습니다. Particles.js를 사용하면 초기화 중에 참조할 수 있는 JSON에서 이러한 모든 속성과 그 이상을 설정할 수 있습니다. 이 함수를 호출하는 일반적인 구문은 다음과 같습니다.

으아악

여기서 dom-id 是您希望粒子出现的元素的 id。 path-json 是包含所有配置选项的 JSON 文件的路径，callback는 선택적 콜백 함수입니다. 경로 대신 두 번째 매개변수에 JSON 코드를 직접 넣을 수 있습니다.

이 멋진 라이브러리를 사용하여 떨어지는 눈송이를 만들어 봅시다. 먼저, 우리의 함수는 다음과 같습니다:

으아악

콜백 함수를 제거하고 DOMId을 좀 더 구체적인 것으로 변경했습니다. 눈송이는 대부분 구형이다. 아래쪽으로 떨어지고 크기가 고르지 않게 됩니다. 또한 첫 번째 데모와는 달리 전선으로 연결되지 않습니다.

입자 이동

처음에는 snowflakes.json 파일에 다음 코드가 포함됩니다.

으아악

모양, 크기, 동작 등 물리적 특성과 관련된 모든 구성 옵션은 articles 内。所有决定交互行为的配置选项都将放在 interactivity에 있습니다.

파티클 수를 100으로 설정했습니다. 이는 일반적으로 사용 가능한 공간에 따라 다릅니다. 앞서 말했듯이 모양도 circle로 설정했습니다. 이 시점에서 파일은 다음과 같아야 합니다:

으아악

눈송이의 크기를 설정하기 위해 값 10을 사용했습니다. 눈송이의 크기는 다양하므로 random 设置为 true。这样，雪花可以具有零到我们指定的最大限制之间的任何大小。要禁用或删除将这些粒子链接在一起的所有行，您可以将 enable 设置为 false for line_linked하겠습니다.

입자를 이동하려면 enable 속성을 ​​true로 설정해야 합니다. 다른 설정이 없으면 입자는 우주에서처럼 무작위로 움직입니다. "bottom"과 같은 문자열 값을 사용하여 이러한 입자의 방향을 설정할 수 있습니다. 입자의 일반적인 움직임은 아래쪽이지만 자연스럽게 보이려면 여전히 약간 무작위로 움직여야 합니다. 이는 straight를 false로 설정하여 달성할 수 있습니다. 이 시점에서 enable 属性设置为 true。如果没有任何其他设置，粒子将随意移动，就像在太空中一样。您可以使用字符串值设置这些粒子的方向，例如 "bottom"。尽管粒子的一般运动是向下的，但它们仍然需要稍微随机地移动才能看起来自然。这可以通过将 straight 设置为 false 来实现。此时，snowflakes.json에는 다음과 같은 코드가 있습니다:

으아악

위의 JSON 코드를 사용하면 다음과 같은 결과를 얻을 수 있습니다.

更改交互行为

如果将鼠标悬停在上面的演示上，您会注意到线条仍然存在，但仅在悬停期间暂时显示。要完全删除它们，您可以将 onhover 事件的 enable 属性设置为 false。尝试在上面的演示中单击，您会注意到每次单击都会生成四个粒子。这是默认行为。您还可以使用 push 下的 articles_nb 属性更改粒子数量。在本例中，我已将此数字设置为 12。

您还可以使用 detect_on 选项确定是否检测窗口或画布上的事件。

以下是 JSON 文件的完整代码：

{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    },
    "size": {
      "value": 10,
      "random": true
    },
    "line_linked": {
      "enable": false
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "bottom",
      "straight": false
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false
      }
    },
    "modes": {
      "push": {
        "particles_nb": 12
      }
    }
  }
}

如您所见，我不必专门启用 onclick 事件。默认情况下它是启用的。同样，我可以删除其他选项，例如 "detect_on": "canvas" under interactivity 和 "straight": false under move。我保留它们是为了让初学者不会对粒子为何不沿直线移动等问题感到困惑。

您可以尝试不同的值来修改上面CodePen中的雪花。只需单击 JS 选项卡即可编辑 JSON。

最终想法

开始使用 Particles.js 很简单。如果您以前从未使用过粒子系统，这个库将帮助您立即入门。本教程只是对该库的基本介绍。在本系列的接下来的两个教程中，我将更详细地介绍该库的所有方面。

如果您对本教程有任何疑问，请在论坛上告诉我。

위 내용은 Particles.js: 기본 사항 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!