在前端开发中，很多时候我们需要给网站添加一些动态效果，比如粒子效果。这时候，在 npm 包中找到合适的库会省去很多繁琐的工作。
其中一个非常流行的粒子效果库是 ng-particle，它可以帮助我们快速实现 JavaScript 颗粒效果，只需要简单的几行代码就能实现。在本文中，我们将详细介绍如何使用 ng-particle。
安装
ng-particle 是一个基于 Angular 的 npm 包。要使用它，我们首先需要在命令行中安装它。在你的项目根目录下使用以下命令进行安装：
npm install ng-particle
导入依赖
安装完成后，我们需要在 app.module.ts 中导入 ng-particle 的依赖：
import { NgParticleModule } from 'ng-particle';
@NgModule({
imports: [
NgParticleModule,
],
})
export class AppModule { }现在我们已经可以在组件中使用 ng-particle。
使用 ng-particle
我们来看一个简单的 ng-particle 示例，这里将会是一个病毒感应器的特效，当鼠标靠近时，这些小球会“爆炸”。
首先，我们需要定义一组常量，来配置我们的特效：
-- -------------------- ---- -------
----- --------------- - -
------------ -
--------- -
-------- ---
---------- -
--------- -----
------------- ---
-
--
-------- -
-------- ---------
--
-------- -
------- ---------
--------- -
-------- --
-------- ---------
--
---------- -
----------- -
--
-------- -
------ -----------------
-------- ----
--------- ---
-
--
---------- -
-------- ----
--------- -----
------- -
--------- ------
-------- --
-------------- ----
------- -----
-
--
------- -
-------- --
--------- -----
------- -
--------- ------
-------- ---
----------- ----
------- -----
-
--
-------------- -
--------- -----
----------- ----
-------- ----------
---------- ----
-------- -
--
------- -
--------- -----
-------- --
------------ -------
--------- ------
----------- ------
----------- ------
--------- ------
---------- -
--------- ------
---------- ----
---------- ----
-
-
--
---------------- -
------------ ------------
--------- -
---------- -
--------- -----
------- ------
--
---------- -
--------- -----
------- ------
--
--------- ----
--
-------- -
------- -
----------- ----
-------------- -
---------- -
-
--
--------- -
----------- ----
------- ---
----------- --
---------- --
-------- -
--
---------- -
----------- ----
----------- ---
--
------- -
--------------- -
--
--------- -
--------------- -
-
-
--
---------------- ----
--这个例子中，我们定义了一些球的属性，如数量、颜色和形状，然后还定义了一些交互效果，比如当鼠标放在上面时发生的事件。
接下来，我们需要在组件中定义一个属性，将它传递给 ng-particle：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------ -------------------------- ------------------ ------- --------- -----------------------
--
--
------ ----- ------------ -
--------------- - ----------------
-在这里，我们定义了一个组件，并在模板中使用了 ng-particle。我们将之前定义的属性传递给了 ng-particle，并且在样式中定义了它的宽度和高度。
可以进行的拓展
此外，ng-particle 还有许多可以拓展的功能，比如：
- 通过监听事件来取消滑过和点击事件；
- 通过在不同时间的配置文件之间切换来创建动态效果；
- 通过使用脚本来动态更改粒子图案。
总之，ng-particle 是一个非常强大的库，它可以帮助我们快速地实现粒子效果，比以往更加简单。希望大家可以通过本文了解到如何使用 ng-particle，从而能够在你的网站中添加出色的动态效果。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
----- --------------- - -
------------ -
--------- -
-------- ---
---------- -
--------- -----
------------- ---
-
--
-------- -
-------- ---------
--
-------- -
------- ---------
--------- -
-------- --
-------- ---------
--
---------- -
----------- -
--
-------- -
------ -----------------
-------- ----
--------- ---
-
--
---------- -
-------- ----
--------- -----
------- -
--------- ------
-------- --
-------------- ----
------- -----
-
--
------- -
-------- --
--------- -----
------- -
--------- ------
-------- ---
----------- ----
------- -----
-
--
-------------- -
--------- -----
----------- ----
-------- ----------
---------- ----
-------- -
--
------- -
--------- -----
-------- --
------------ -------
--------- ------
----------- ------
----------- ------
--------- ------
---------- -
--------- ------
---------- ----
---------- ----
-
-
--
---------------- -
------------ ------------
--------- -
---------- -
--------- -----
------- ------
--
---------- -
--------- -----
------- ------
--
--------- ----
--
-------- -
------- -
----------- ----
-------------- -
---------- -
-
--
--------- -
----------- ----
------- ---
----------- --
---------- --
-------- -
--
---------- -
----------- ----
----------- ---
--
------- -
--------------- -
--
--------- -
--------------- -
-
-
--
---------------- ----
--
------------
--------- -----------
--------- -
------------ -------------------------- ------------------ ------- --------- -----------------------
--
--
------ ----- ------------ -
--------------- - ----------------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f9d9381d61a3540fb0