particle-canvas-pro 1.0.1 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -28
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,19 +4,19 @@
|
|
|
4
4
|
|
|
5
5
|
# 核心优势
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
✨ 高性能渲染：基于 `requestAnimationFrame` 实现帧同步动画，自动适配屏幕刷新率，兼顾流畅度与性能开销；
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
💡 智能资源调度：监听页面可见性变化，切换标签 / 最小化窗口时自动暂停动画、停止帧请求，避免后台无意义的 CPU/GPU 消耗；页面恢复可见时自动恢复动画状态，兼顾体验与资源节省，适配多标签页场景；
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
🎨 双模式适配：支持全屏背景模式（覆盖视口）和内嵌元素模式（自定义尺寸），适配不同业务场景，带来沉浸式体验；
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
🔧 多维度配置：粒子数量、速度、大小、颜色等参数均可自定义配置，并支持单色 / 多色粒子；
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
🔄 实时交互控制：支持即时启动、暂停和销毁等操作，且实现动态FPS监控；
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
🌈 炫酷视觉效果：内置轨迹效果、粒子脉动、连线交互等多种特效；
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
📱 响应式适配：全屏背景模式下，可以自动响应窗口大小变化，无需手动调整；
|
|
20
20
|
|
|
21
21
|
# 安装
|
|
22
22
|
|
|
@@ -40,10 +40,10 @@ yarn add particle-canvas-pro
|
|
|
40
40
|
### 全屏背景模式
|
|
41
41
|
|
|
42
42
|
```javascript
|
|
43
|
-
import
|
|
43
|
+
import ParticleCanvasPro from 'particle-canvas-pro';
|
|
44
44
|
|
|
45
|
-
//
|
|
46
|
-
const particleSystem = new
|
|
45
|
+
// 创建粒子动画实例
|
|
46
|
+
const particleSystem = new ParticleCanvasPro({
|
|
47
47
|
isBackground: true, // 全屏背景模式，默认模式
|
|
48
48
|
particleNumber: 150, // 粒子数量
|
|
49
49
|
particleColor: '#9c4aff', // 粒子颜色
|
|
@@ -58,10 +58,10 @@ particleSystem.start();
|
|
|
58
58
|
### 内嵌模式（自定义容器）
|
|
59
59
|
|
|
60
60
|
```javascript
|
|
61
|
-
import
|
|
61
|
+
import ParticleCanvasPro from 'particle-canvas-pro';
|
|
62
62
|
|
|
63
63
|
// 在指定容器中创建粒子画布
|
|
64
|
-
const particleSystem = new
|
|
64
|
+
const particleSystem = new ParticleCanvasPro({
|
|
65
65
|
canvasContainer: '#particle-container', // 容器选择器
|
|
66
66
|
isBackground: false, // 非背景模式
|
|
67
67
|
canvasSize: [800, 600], // 画布尺寸
|
|
@@ -76,22 +76,22 @@ particleSystem.start();
|
|
|
76
76
|
|
|
77
77
|
# 参数配置
|
|
78
78
|
|
|
79
|
-
| 参数名 | 说明
|
|
80
|
-
|
|
81
|
-
| canvasContainer | 画布容器元素或选择器
|
|
82
|
-
| isBackground | 是否作为页面背景
|
|
83
|
-
| canvasBackgroundColor | 画布背景颜色
|
|
84
|
-
| particleNumber | 粒子数量
|
|
85
|
-
| particleSpeed | 粒子运动速度
|
|
86
|
-
| particleSize | 粒子大小（像素）
|
|
87
|
-
| particleColor | 粒子颜色（单色或多色）
|
|
88
|
-
| lineWidth | 连线宽度（像素）
|
|
89
|
-
| lineColor | 连线颜色
|
|
90
|
-
| lineOpacity | 连线透明度
|
|
91
|
-
| linkDistance | 连线距离（像素）
|
|
92
|
-
| showLinkLine | 是否显示连线
|
|
93
|
-
| canvasSize | 画布尺寸（非背景模式）
|
|
94
|
-
| trailValue | 轨迹效果强度
|
|
79
|
+
| 参数名 | 说明 | 类型 | 取值范围 | 默认值 |
|
|
80
|
+
|------------------------|--------------------------------------|--------------------------|-----------------------------|---------------------------|
|
|
81
|
+
| canvasContainer | 画布容器元素或选择器 | `string` / `HTMLElement` | - | `document.body` |
|
|
82
|
+
| isBackground | 是否作为页面背景 | `boolean` | `true` / `false` | `true` |
|
|
83
|
+
| canvasBackgroundColor | 画布背景颜色 | `string` | - | `rgba(10, 10, 25, 1)` |
|
|
84
|
+
| particleNumber | 粒子数量 | `number` | 1-800 | 150 |
|
|
85
|
+
| particleSpeed | 粒子运动速度 | `number` | 0.1-3 | 1 |
|
|
86
|
+
| particleSize | 粒子大小（像素） | `number` | 1-10 | 5 |
|
|
87
|
+
| particleColor | 粒子颜色（单色或多色） | `string` / `string[]` | - | `rgba(156, 74, 255, 0.6)` |
|
|
88
|
+
| lineWidth | 连线宽度（像素） | `number` | 0.1-5 | 1 |
|
|
89
|
+
| lineColor | 连线颜色 | `string` | - | `#ffffff` |
|
|
90
|
+
| lineOpacity | 连线透明度 | `number` | 0-1 | 0.3 |
|
|
91
|
+
| linkDistance | 连线距离（像素） | `number` | 10-300 | 120 |
|
|
92
|
+
| showLinkLine | 是否显示连线 | `boolean` | `true` / `false` | `true` |
|
|
93
|
+
| canvasSize | 画布尺寸（非背景模式） | `[number, number]` | - | [800, 600] |
|
|
94
|
+
| trailValue | 轨迹效果强度 | `number` | 0-1 | 0.2 |
|
|
95
95
|
|
|
96
96
|
# 实例方法
|
|
97
97
|
|
package/package.json
CHANGED