1# 粒子动画
2
3[粒子动画](../reference/apis-arkui/arkui-ts/ts-particle-animation.md)是通过在限定区域内随机生成大量粒子的运动，进而组合成的动画效果，通过Particle组件来实现。动画的基本构成元素为单个粒子，这些粒子可以表现为圆点或图片等形式。开发者能够通过对粒子在颜色、透明度、大小、速度、加速度、自旋角度等多个维度上的动态变化做动画，以营造特定的氛围，例如模拟下雪场景时，飘舞的雪花实际上是由一个个雪花粒子的动画效果所构成。
4
5粒子动画的简单实现如下所示。
6```ts
7@Entry
8@Component
9struct ParticleExample {
10  build() {
11    Stack() {
12      Text()
13        .width(300).height(300).backgroundColor('rgb(240, 250, 255)')
14      Particle({ particles: [
15        {
16          emitter: {
17            particle: {
18              type: ParticleType.POINT, // 粒子类型
19              config: {
20                radius: 5 // 圆点半径
21              },
22              count: 100, // 粒子总数
23            },
24          },
25          color:{
26            range:['rgb(39, 135, 217)','rgb(0, 74, 175)'],//初始颜色范围
27          },
28        },
29      ]
30      }).width(250).height(250)
31    }.width("100%").height("100%").align(Alignment.Center)
32  }
33}
34```
35
36![particle-base](figures/particle-base.gif)
37
38
39## 实现粒子发射器
40
41粒子发射器（Particle Emitter）主要定义粒子的初始属性（如类型、位置和颜色），控制粒子的生成速率，以及管理粒子的生命周期。可通过[emitter](../reference/apis-arkui/arkui-ts/ts-particle-animation.md#emitter12)方法调整粒子发射器的位置、发射速率和发射窗口的大小，实现发射器位置的动态更新。
42
43```ts
44// ...
45@State emitterProperties: Array<EmitterProperty> = [
46  {
47    index: 0,
48    emitRate: 100,
49    position: { x: 60, y: 80 },
50    size: { width: 200, height: 200 }
51  }
52]
53
54Particle(...).width(300).height(300).emitter(this.emitterProperties) // 动态调整粒子发射器的位置
55// ...
56```
57
58![particle-emitter](figures/particle-emitter.gif)
59
60
61## 设置粒子颜色
62
63可以通过[range](../reference/apis-arkui/arkui-ts/ts-particle-animation.md#particlecolorpropertyoptions)来确定粒子的初始颜色范围，而[distributionType](../reference/apis-arkui/arkui-ts/ts-particle-animation.md#particlecolorpropertyoptions)则用于指定粒子初始颜色随机值的分布方式，具体可选择均匀分布或者高斯（正态）分布。
64
65```ts
66// ...
67color: {
68  range: ['rgb(39, 135, 217)','rgb(0, 74, 175)'], // 初始颜色范围
69  distributionType: DistributionType.GAUSSIAN // 初始颜色随机值分布
70},
71// ...
72```
73
74![particle-color](figures/particle-color.gif)
75
76
77## 粒子的生命周期
78
79粒子的生命周期（Lifecycle）是粒子从生成至消亡的整个过程，用于确定粒子的存活时间长度。粒子的生命周期可通过设置[lifetime](../reference/apis-arkui/arkui-ts/ts-particle-animation.md#emitteroptions)和[lifetimeRange](../reference/apis-arkui/arkui-ts/ts-particle-animation.md#emitteroptions)来指定。
80
81```ts
82// ...
83emitter: {
84  particle: {
85    // ...
86    lifetime: 300, // 粒子生命周期，单位ms
87    lifetimeRange: 100 // 粒子生命周期取值范围，单位ms
88  },
89  emitRate: 10, // 每秒发射粒子数
90  position: [0, 0],
91  shape: ParticleEmitterShape.RECTANGLE // 发射器形状
92},
93color: {
94  range: ['rgb(39, 135, 217)','rgb(0, 74, 175)'], // 初始颜色范围
95},
96// ...
97```
98
99![particle-lifetime](figures/particle-lifetime.gif)
100
101
102## 设置粒子扰动场
103
104扰动场（Disturbance Field）是一种影响粒子运动的机制。通过在粒子所在的空间区域内施加特定的力，扰动场能够改变粒子的轨迹和行为，进而实现更为复杂和自然的动画效果。扰动场的配置可以通过[disturbanceFields](../reference/apis-arkui/arkui-ts/ts-particle-animation.md#disturbancefields12)方法来完成。
105
106```ts
107// ...
108Particle({ particles: [
109  {
110    emitter: // ...
111    color: // ...
112    scale: {
113      range: [0.0, 0.0],
114      updater: {
115        type: ParticleUpdater.CURVE,
116        config: [
117          {
118            from: 0.0,
119            to: 0.5,
120            startMillis: 0,
121            endMillis: 3000,
122            curve: Curve.EaseIn
123          }
124        ]
125      }
126    },
127    acceleration: { //加速度的配置，从大小和方向两个维度变化，speed表示加速度大小，angle表示加速度方向
128      speed: {
129        range: [3, 9],
130        updater: {
131          type: ParticleUpdater.RANDOM,
132          config: [1, 20]
133        }
134      },
135      angle: {
136        range: [90, 90]
137      }
138    }
139
140  }
141]
142}).width(300).height(300).disturbanceFields([{
143  strength: 10,
144  shape: DisturbanceFieldShape.RECT,
145  size: { width: 100, height: 100 },
146  position: { x: 100, y: 100 },
147  feather: 15,
148  noiseScale: 10,
149  noiseFrequency: 15,
150  noiseAmplitude: 5
151}])
152// ...
153```
154
155![particle-disturbance](figures/particle-disturbance.gif)