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