1# 粒子动画 (Particle) 2 3粒子动画是在一定范围内随机生成的大量粒子产生运动而组成的动画。动画元素是一个个粒子，这些粒子可以是圆点、图片。通过对粒子在颜色、透明度、大小、速度、加速度、自旋角度等维度变化做动画，来营造一种氛围感，比如下雪的动效，雪花飘舞就相当于一个个雪花粒子在做动画。 4 5粒子动画的效果通过Particle组件展现。 6 7 8> **说明：** 9> 10> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 11 12 13## 子组件 14 15无 16 17 18## 接口 19 20```typescript 21interface ParticleInterface { 22 < 23 PARTICLE extends ParticleType, 24 COLOR_UPDATER extends ParticleUpdater, 25 OPACITY_UPDATER extends ParticleUpdater, 26 SCALE_UPDATER extends ParticleUpdater, 27 ACC_SPEED_UPDATER extends ParticleUpdater, 28 ACC_ANGLE_UPDATER extends ParticleUpdater, 29 SPIN_UPDATER extends ParticleUpdater 30 >(particles: Particles< 31 PARTICLE, 32 COLOR_UPDATER, 33 OPACITY_UPDATER, 34 SCALE_UPDATER, 35 ACC_SPEED_UPDATER, 36 ACC_ANGLE_UPDATER, 37 SPIN_UPDATER 38 >): ParticleAttribute; 39} 40``` 41 42**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 43 44**参数：** 45 46| 参数名 | 类型 | 必填 | 描述 | 47| -------- | -------- | -------- | -------- | 48| particles | [Particles](#particles14)<<br/> [PARTICLE](#particletype), <br/> [COLOR_UPDATER](#particleupdater),<br/> [OPACITY_UPDATER](#particleupdater),<br/> [SCALE_UPDATER](#particleupdater),<br/> [ACC_SPEED_UPDATER](#particleupdater),<br/> [ACC_ANGLE_UPDATER](#particleupdater),<br/> [SPIN_UPDATER](#particleupdater)<br/>><br/> | 是 | 粒子动画的集合，详见[Particles](#particles14)属性说明。 | 49 50## 属性 51 52除支持[通用属性](ts-universal-attributes-size.md)外还支持以下属性： 53 54### disturbanceFields<sup>12+</sup> 55 56disturbanceFields(fields: Array<DisturbanceFieldOptions>) 57 58设置扰动场。 59 60**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 61 62**系统能力：** SystemCapability.ArkUI.ArkUI.Full 63 64**参数：** 65 66| 参数名 | 类型 | 必填 | 说明 | 67| ------ | ------- | ---- | ---------------------------- | 68| fields | Array<[DisturbanceFieldOptions](#disturbancefieldoptions12)> | 是 | 扰动场数组。 | 69 70### emitter<sup>12+</sup> 71emitter(value: Array<EmitterProperty>) 72 73支持发射器位置动态更新 74 75**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 76 77**系统能力：** SystemCapability.ArkUI.ArkUI.Full 78 79**参数：** 80 81| 参数名 | 类型 | 必填 | 说明 | 82| ------ | ------- | ---- | ---------------------------- | 83| value | Array<[EmitterProperty](#emitterproperty12)> | 是 | 需要更新的emitter参数数组 | 84 85## 事件 86支持[通用事件](ts-universal-events-click.md) 87 88## ParticleOptions 89 90```typescript 91interface ParticleOptions< 92 PARTICLE extends ParticleType, 93 COLOR_UPDATER extends ParticleUpdater, 94 OPACITY_UPDATER extends ParticleUpdater, 95 SCALE_UPDATER extends ParticleUpdater, 96 ACC_SPEED_UPDATER extends ParticleUpdater, 97 ACC_ANGLE_UPDATER extends ParticleUpdater, 98 SPIN_UPDATER extends ParticleUpdater 99> { 100 emitter: EmitterOptions<PARTICLE>; 101 color?: ParticleColorPropertyOptions<COLOR_UPDATER>; 102 opacity?: ParticlePropertyOptions<number, OPACITY_UPDATER>; 103 scale?: ParticlePropertyOptions<number, SCALE_UPDATER>; 104 velocity?: VelocityOptions; 105 acceleration?: AccelerationOptions<ACC_SPEED_UPDATER, ACC_ANGLE_UPDATER>; 106 spin?: ParticlePropertyOptions<number, SPIN_UPDATER>; 107} 108``` 109 110**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 111 112**系统能力：** SystemCapability.ArkUI.ArkUI.Full 113 114| 名称 | 类型 | 必填 | 说明 | 115| -------- | -------- | -------- | -------- | 116| emitter | [EmitterOptions](#emitteroptions)<[PARTICLE](#particletype)> | 是 | 粒子发射器配置。 | 117| color | [ParticleColorPropertyOptions](#particlecolorpropertyoptions)<[COLOR_UPDATER](#particleupdater)> | 否 | 粒子颜色配置。<br/>**说明**：<br/>默认值：{ range:[Color.White,Color.White] } 。图片粒子不支持设置颜色。| 118| opacity | [ParticlePropertyOptions](#particlepropertyoptions)\<number, [OPACITY_UPDATER](#particleupdater)> | 否 | 粒子透明度配置。<br/>默认值：{ range:[1.0,1.0] } | 119| scale | [ParticlePropertyOptions](#particlepropertyoptions)\<number, [SCALE_UPDATER](#particleupdater)> | 否 | 粒子大小配置。<br/>默认值：{ range:[1.0,1.0] } | 120| velocity | [VelocityOptions](#velocityoptions14) |否 | 粒子速度配置。<br/>**说明**：<br/>speed表示速度大小。angle表示速度的方向（单位为角度），以元素几何中心为坐标原点，水平方向为X轴，正数表示顺时针方向旋转角度。<br/>默认值：{ speed:[0.0,0.0],angle:[0.0,0.0] } | 121| acceleration | [AccelerationOptions](#accelerationoptions14)<[ACC_SPEED_UPDATER](#particleupdater), [ACC_ANGLE_UPDATER](#particleupdater)> | 否 | 粒子加速度配置。 <br/>**说明**：<br/>speed表示加速度大小，angle表示加速度方向（单位为角度）。<br/>默认值：{ speed:{range:[0.0,0.0]},angle:{range:[0.0,0.0]} } | 122| spin | [ParticlePropertyOptions](#particlepropertyoptions)<number, [SPIN_UPDATER](#particleupdater)> | 否 | 粒子自旋角度配置。 <br/>默认值：{range:[0.0,0.0]}<br/>方向：正数表示顺时针旋转，负数表示逆时针旋转。 | 123 124 125## EmitterOptions 126粒子发射器的配置 127 128```typescript 129interface EmitterOptions<PARTICLE extends ParticleType> { 130 particle: EmitterParticleOptions<PARTICLE>; 131 emitRate?: number; 132 shape?: ParticleEmitterShape; 133 position?: ParticleTuple<Dimension, Dimension>; 134 size?: ParticleTuple<Dimension, Dimension>; 135} 136``` 137 138**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 139 140**系统能力：** SystemCapability.ArkUI.ArkUI.Full 141 142| 名称 | 类型 | 必填 | 说明 | 143| -------- | -------- | -------- | -------- | 144| particle | [EmitterParticleOptions](#emitterparticleoptions14)<[PARTICLE](#particletype)> | 是 | 粒子配置。<br>-type表示粒子类型，可以选择图片或者是点。<br/><br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。<br>-config表示对应类型的配置。<br>-config类型和type值有关联：<br>1、如果type为ParticleType.POINT，则config类型为[PointParticleParameters](#pointparticleparameters) 。<br>2、如果type为ParticleType.IMAGE，则config类型为[ImageParticleParameters](#imageparticleparameters) 。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。<br>-count表示发射的粒子总数，count取值>=-1,当count为-1表示粒子总数无限大。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。<br>-lifetime表示单个粒子的生命周期，默认值1000（即1000ms，1s）,lifetime>=-1,当lifetime为-1表示粒子生命周期无限大。当lifetime<-1，取默认值。<br/>**说明：**如果不需要动画一直播放，建议不要将生命周期设置为-1，可能对性能造成较大影响。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。<br>-lifeTimeRange表示粒子生命周期取值范围，设置lifeTimeRange后粒子的生命周期为 [lifetime-lifeTimeRange,lifeTime+lifeTimeRange]中间的一个随机整数。lifeTimeRange 默认值为0，取值范围为为0到正无穷。设置为负值时取默认值。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 145| emitRate | number | 否 | 发射器发射速率（即每秒发射粒子数）。 默认值：5，小于0时取默认值5。emitRate值超过5000时会极大影响性能，建议设置参数小于5000。| 146| shape | [ParticleEmitterShape](#particleemittershape) | 否 | 发射器形状。默认值：ParticleEmitterShape.RECTANGLE。 | 147| position | [ParticleTuple](#particletuple14)<[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)> | 否 | 发射器位置（距离组件左上角的位置。第一个参数为x方向上的相对偏移，第二个参数为y轴方向相对偏移。） <br>默认值：`[0.0, 0.0]`。| 148| size | [ParticleTuple](#particletuple14)<[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)> |否 | 发射窗口的大小。第一个参数为发射器宽，第二个参数为发射器高。<br>默认值：`['100%','100%']`(即发射窗口占满Particle组件)。 | 149 150## ParticleConfigs 151 152```typescript 153interface ParticleConfigs { 154 [ParticleType.POINT]: PointParticleParameters; 155 [ParticleType.IMAGE]: ImageParticleParameters; 156} 157``` 158 159**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 160 161**系统能力：** SystemCapability.ArkUI.ArkUI.Full 162 163| 名称 | 类型 | 必填 | 说明 | 164| -------- | -------------- | -------- | -------- | 165| [ParticleType.POINT] | [PointParticleParameters](#pointparticleparameters) | 是 | 点状粒子配置。 | 166| [ParticleType.IMAGE] | [ImageParticleParameters](#imageparticleparameters) | 是 | 图片粒子配置。 | 167 168## PointParticleParameters 169```typescript 170interface PointParticleParameters { 171 radius: VP; 172} 173``` 174 175**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 176 177**系统能力：** SystemCapability.ArkUI.ArkUI.Full 178 179| 名称 | 类型 | 必填 | 说明 | 180| -------- | -------------- | -------- | -------- | 181| radius | [VP](ts-types.md#vp10)| 是 | 粒子半径。 | 182 183## ImageParticleParameters 184```typescript 185interface ImageParticleParameters { 186 src: ResourceStr; 187 size: ParticleTuple<Dimension, Dimension>; 188 objectFit?: ImageFit; 189} 190``` 191 192**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 193 194**系统能力：** SystemCapability.ArkUI.ArkUI.Full 195 196| 名称 | 类型 | 必填 | 说明 | 197| -------- | -------------- | -------- | -------- | 198| src | [ResourceStr](ts-types.md#resourcestr) | 是 | 图片路径。暂不支持svg图片类型。 | 199| size | [ParticleTuple](#particletuple14)<[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)> | 是 | 图像尺寸。 | 200| objectFit| [ImageFit](ts-appendix-enums.md#imagefit)| 否 | 图片显示模式。 | 201 202## ParticleColorPropertyOptions 203 204```typescript 205interface ParticleColorPropertyOptions<UPDATER extends ParticleUpdater> { 206 range: ParticleTuple<ResourceColor, ResourceColor>; 207 distributionType?: DistributionType; 208 updater?: ParticleColorUpdaterOptions<UPDATER>; 209} 210``` 211**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 212 213**系统能力：** SystemCapability.ArkUI.ArkUI.Full 214 215| 名称 | 类型 | 必填 | 说明 | 216| -------- | -------- | -------- | -------- | 217| range | [ParticleTuple](#particletuple14)<[ResourceColor](ts-types.md#resourcecolor), [ResourceColor](ts-types.md#resourcecolor)> | 是 | 粒子初始颜色区间，粒子发射器生成粒子的初始颜色在range区间随机取值。<br>默认值：range:[Color.White,Color.White] | 218| distributionType<sup>12+<sup> | [DistributionType](#distributiontype12) | 否 | 粒子初始颜色随机值分布，允许用户选择颜色随机值生成的分布类型，支持均匀分布或正态（高斯）分布。<br>默认值：DistributionType.UNIFORM<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 219| updater | [ParticleColorUpdaterOptions](#particlecolorupdateroptions14)<[UPDATER](#particleupdater)> | 否 | 颜色属性变化配置。颜色属性变化类型type有三类：<br>1、当type为ParticleUpdater.NONE，表示无变化，则config类型为[ParticleColorPropertyUpdaterConfigs](#particlecolorpropertyupdaterconfigs)[ParticleUpdater.NONE]。 <br>2、type为ParticleUpdater.RANDOM，表示随机变化，则config类型为[ParticleColorPropertyUpdaterConfigs](#particlecolorpropertyupdaterconfigs)[ParticleUpdater.RANDOM]。 <br>3、type为ParticleUpdater.CURVE,表示按动画曲线变化，则config类型为[ParticleColorPropertyUpdaterConfigs](#particlecolorpropertyupdaterconfigs)[ParticleUpdater.CURVE]。<br>默认值：type默认为 ParticleUpdater.NONE。 <br>**说明**：<br>当type为ParticleUpdater.RANDOM或者ParticleUpdater.CURVE时，updater中颜色配置的优先级高于range中的颜色配置。在updater配置的动画时间周期内，以updater中的颜色配置来变化；在updater配置的动画时间周期外，以range中的颜色配置来变化。 | 220 221 222## ParticleColorPropertyUpdaterConfigs 223```typescript 224interface ParticleColorPropertyUpdaterConfigs { 225 [ParticleUpdater.NONE]: void; 226 [ParticleUpdater.RANDOM]: ParticleColorOptions; 227 [ParticleUpdater.CURVE]: Array<ParticlePropertyAnimation<ResourceColor>>; 228} 229``` 230 231**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 232 233**系统能力：** SystemCapability.ArkUI.ArkUI.Full 234 235| 名称 | 类型 | 必填 | 说明 | 236| -------- | -------- | -------- | -------- | 237|[ParticleUpdater.NONE]|void | 是 | 无变化。| 238| [ParticleUpdater.RANDOM] | [ParticleColorOptions](#particlecoloroptions14) | 是 | 表示变化方式为均匀变化的时候，在区间内随机生成一个差值。r、g、b、a四个颜色通道每秒分别使用差值叠加当前颜色值，生成目标颜色值。实现颜色随机变化的效果。 | 239[ParticleUpdater.CURVE]|Array<[ParticlePropertyAnimation](#particlepropertyanimation)\<[ResourceColor](ts-types.md#resourcecolor)\>> | 是 | 表示变化方式为曲线变化时，颜色变化的配置。数组类型表示当前属性可以设置多段动画，如0ms-3000ms，3000ms-5000ms，5000ms-8000ms分别设置动画。| 240 241## ParticlePropertyOptions 242```typescript 243interface ParticlePropertyOptions<TYPE, UPDATER extends ParticleUpdater> { 244 range: ParticleTuple<TYPE, TYPE>; 245 updater?: ParticleUpdaterOptions<TYPE, UPDATER>; 246} 247``` 248 249**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 250 251**系统能力：** SystemCapability.ArkUI.ArkUI.Full 252 253| 名称 | 类型 | 必填 | 说明 | 254| -------- | -------- | -------- | -------- | 255| range | [ParticleTuple](#particletuple14)<[TYPE](#particleupdater), [TYPE](#particleupdater)> | 是 | 粒子初始属性值区间，粒子发射器生成粒子的属性值在range区间随机取值。<br/>**说明**<br/>各项属性的非法输入取默认值，当最大值小于最小值的时候取默认区间。TYPE为number。<br/>不同属性的默认值不同：<br>1、opacity属性：range:[1.0,1.0]，取值范围0到1，默认值为0.0。<br/>2、scale属性：range:[1.0,1.0]，取值范围大于等于0，默认值为1.0。<br/>3、acceleration加速度speed属性：range:[0.0,0.0]，取值范围大于等于0，默认值为0.0。<br/>4、acceleration加速度angle属性：range:[0.0,0.0]，取值范围为(-∞, +∞) ，默认值为0.0。<br/>5、spin属性：range:[0.0,0.0]，默认值为0.0。 256| updater | [ParticleUpdaterOptions](#particleupdateroptions14)<[TYPE](#particleupdater), [UPDATER](#particleupdater)> | 否 | 属性变化配置。属性变化类型type有三类：<br/>1、当type为ParticleUpdater.NONE，表示无变化，则config类型为[ParticlePropertyUpdaterConfigs](#particlepropertyupdaterconfigs)[ParticleUpdater.NONE]。<br>2、当type为ParticleUpdater.RANDOM，表示变化类型为随机变化，则config类型为[ParticlePropertyUpdaterConfigs](#particlepropertyupdaterconfigs)[ParticleUpdater.RANDOM]。<br>3、当type为ParticleUpdater.CURVE，表示变化类型为曲线变化，则config类型为[ParticlePropertyUpdaterConfigs](#particlepropertyupdaterconfigs)[ParticleUpdater.CURVE] <br>默认值：type默认为ParticleUpdater.NONE。 | 257 258 259## ParticlePropertyUpdaterConfigs 260```typescript 261interface ParticlePropertyUpdaterConfigs<T> { 262 [ParticleUpdater.NONE]: void; 263 [ParticleUpdater.RANDOM]: ParticleTuple<T, T>; 264 [ParticleUpdater.CURVE]: Array<ParticlePropertyAnimation<T>>; 265} 266``` 267 268**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 269 270**系统能力：** SystemCapability.ArkUI.ArkUI.Full 271 272| 名称 | 类型 | 必填 | 说明 | 273| -------- | -------- | -------- | -------- | 274[[ParticleUpdater.NONE]|void | 是 | 无变化。| 275| [ParticleUpdater.RANDOM] | [ParticleTuple](#particletuple14)<T, T> | 是 | 表示变化方式为匀速变化时，每秒的变化差值为设置区间随机生成的值。<br/>目标属性值为当前属性值叠加变化差值。如当前属性值为0.2，config取[0.1,1.0]:<br/>1、如果变化差值在区间[0.1,1.0]取随机值0.5，则目标属性值为0.2+0.5 = 0.7；<br/>2、变化差值也可以取负值。如当前属性值为0.2，config为 [-3.0,2.0],如果变化差值在区间[-3.0,2.0]取随机值-2.0，则目标属性值为0.2-2.0 = -1.8。<br>**说明：**<br>config配置的是变化差值的取值范围，差值的最大最小值没有约束。但是如果当前属性值叠加差值大于属性最大值，目标属性值取属性最大值；如果当前属性值叠加差值小于属性最小值，目标属性值取属性最小值。T为number。<br>例如：opacity的取值范围[0.0,1.0]则当当前属性值叠加差值超过1.0，则取1.0。| 276|[ParticleUpdater.CURVE]|Array<[ParticlePropertyAnimation](#particlepropertyanimation)\<T\>> | 是 | 表示变化方式为曲线变化时，属性变化的配置。数组类型表示当前属性可以设置多段动画，如0ms-3000ms，3000ms-5000ms，5000ms-8000ms分别设置动画。T为number。| 277 278## ParticlePropertyAnimation 279```typescript 280interface ParticlePropertyAnimation<T> { 281 from: T; 282 to: T; 283 startMillis: number; 284 endMillis: number; 285 curve?: Curve | ICurve; 286} 287``` 288 289**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 290 291**系统能力：** SystemCapability.ArkUI.ArkUI.Full 292 293| 名称 | 类型 | 必填 | 说明 | 294| -------- | -------- | -------- | -------- | 295|from| T | 是 | 属性起始值。非法输入取对应属性的默认值。| 296| to | T | 是 | 属性目标值。非法输入取对应属性的默认值。| 297|startMillis|number | 是 | 动画开始时间。| 298|endMillis|number | 是 | 动画结束时间。| 299|curve|[Curve](ts-appendix-enums.md#curve) \| [ICurve](../js-apis-curve.md#icurve)| 否 | 设置动画曲线。<br>默认值：Curve.Linear| 300 301 302## ParticleType 303```typescript 304enum ParticleType { 305 POINT = 'point', 306 IMAGE = 'image', 307} 308``` 309**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 310 311**系统能力：** SystemCapability.ArkUI.ArkUI.Full 312 313| 名称 | 描述 | 314| -------- | -------- | 315POINT |点状粒子| 316IMAGE | 图片粒子| 317 318 319 320## ParticleEmitterShape 321```typescript 322enum ParticleEmitterShape { 323 RECTANGLE = 'rectangle', 324 CIRCLE = 'circle', 325 ELLIPSE = 'ellipse', 326} 327``` 328 329**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 330 331**系统能力：** SystemCapability.ArkUI.ArkUI.Full 332 333| 名称 | 描述 | 334| -------- | -------- | 335RECTANGLE |粒子发射器为矩形| 336CIRCLE | 粒子发射器为圆形| 337ELLIPSE |粒子发射器为椭圆形| 338 339## DistributionType<sup>12+<sup> 340```typescript 341enum DistributionType { 342 UNIFORM = 0, 343 GAUSSIAN = 1, 344} 345``` 346**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 347 348**系统能力：** SystemCapability.ArkUI.ArkUI.Full 349 350| 名称 | 描述 | 351| -------- | -------- | 352| UNIFORM |初始颜色随机值分布为均匀分布。| 353| GAUSSIAN | 初始颜色随机值分布为高斯分布。| 354 355## ParticleUpdater 356```typescript 357enum ParticleUpdater { 358 NONE = 'none', 359 RANDOM = 'random', 360 CURVE = 'curve', 361} 362``` 363 364**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 365 366**系统能力：** SystemCapability.ArkUI.ArkUI.Full 367 368| 名称 | 描述 | 369| -------- | -------- | 370|NONE |无变化| 371|RANDOM | 随机变化| 372|CURVE |动画曲线变化| 373 374## DisturbanceFieldOptions<sup>12+</sup> 375 376**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 377 378**系统能力：** SystemCapability.ArkUI.ArkUI.Full 379 380| 名称 | 类型 | 必填 | 说明 | 381| ------ | ------- | ---- | ---------------------------- | 382| strength | number | 否 |场强，表示场从中心向外的排斥力的强度，默认值0。正数表示排斥力方向朝外，负数表示吸引力，方向朝内。 | 383| shape | [DisturbanceFieldShape](#disturbancefieldshape12) | 否 | 场的形状。<br/>默认为DisturbanceFieldShape.RECT。 | 384| size | [SizeT](../js-apis-arkui-graphics.md#sizett12)<number>| 否 |场的大小。<br/>默认值 {width:0，height:0}。 | 385| position | [PositionT](../js-apis-arkui-graphics.md#positiont12)<number> | 否 |场的位置。<br/>默认值{x:0，y:0}。 | 386| feather | number | 否 |羽化值，表示场从中心点到场边缘的衰减程度，取值范围0到100的整数，如果0则表示场是一个刚体，所有范围内的粒子都被排斥在外。羽化值越大场的缓和程度越大，场范围内出现越多靠近中心点的粒子。<br/>默认值为0。 | 387| noiseScale | number | 否 |噪声尺度，用于控制噪声图案的整体大小，取值大于等于0。<br/>默认值1。 | 388| noiseFrequency | number | 否 |噪声频率，频率越大噪声越细腻，取值大于等于0。<br/> 默认值1。 | 389| noiseAmplitude | number | 否 |噪声震幅，噪声的波动的范围，震幅越大噪音之间差异越大。取值大于等于0。<br/> 默认值1。 | 390 391## DisturbanceFieldShape<sup>12+</sup> 392 393**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 394 395**系统能力：** SystemCapability.ArkUI.ArkUI.Full 396 397| 名称 | 描述 | 398| --------| ----------| 399| RECT | 长方形。 | 400| CIRCLE | 圆。 | 401| ELLIPSE | 椭圆。 | 402 403## EmitterProperty<sup>12+</sup> 404 405**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 406 407**系统能力：** SystemCapability.ArkUI.ArkUI.Full 408 409| 名称 | 类型 | 必填 | 说明 | 410| ------ | ------- | ---- | ---------------------------- | 411| index | number | 是 |索引，取整，按初始化参数中发射器的数组索引指定对应的发射器。异常默认值为0。 | 412| emitRate | number | 否 | 发射器发射速率，即每秒发射粒子的数量。<br/>未传入时保持其当前的发射速率， 传入值小于0时取默认值5。emitRate值超过5000时会极大影响性能，建议设置参数小于5000。 | 413| position | [PositionT](../js-apis-arkui-graphics.md#positiont12)<number> | 否 |发射器位置的数组，只支持number类型。<br/>未传入时保持其当前的发射器位置。需传入两个有效参数，若其中一个为异常值，则position不生效。 | 414| size | [SizeT](../js-apis-arkui-graphics.md#sizett12)<number>| 否 |发射窗口的大小，只支持number类型。<br/>未传入时保持其当前发射窗口大小。需传入两个有效参数且都大于0，若其中一个为异常值，则size不生效。 | 415 416## ParticleTuple<sup>14+</sup> 417 418```typescript 419declare type ParticleTuple<T1, T2> = [T1, T2]; 420``` 421 422粒子元组，表示定义一些动画参数的类型。 423 424**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 425 426**系统能力：** SystemCapability.ArkUI.ArkUI.Full 427 428| 类型 | 说明 | 429| ----------- | ---------------------------------------------- | 430| [T1, T2] | 一些动画参数的类型，可能是任何类型。 | 431 432## Particles<sup>14+</sup> 433 434```typescript 435interface Particles< 436 PARTICLE extends ParticleType, 437 COLOR_UPDATER extends ParticleUpdater, 438 OPACITY_UPDATER extends ParticleUpdater, 439 SCALE_UPDATER extends ParticleUpdater, 440 ACC_SPEED_UPDATER extends ParticleUpdater, 441 ACC_ANGLE_UPDATER extends ParticleUpdater, 442 SPIN_UPDATER extends ParticleUpdater 443> { 444 particles: Array< 445 ParticleOptions< 446 PARTICLE, 447 COLOR_UPDATER, 448 OPACITY_UPDATER, 449 SCALE_UPDATER, 450 ACC_SPEED_UPDATER, 451 ACC_ANGLE_UPDATER, 452 SPIN_UPDATER 453 > 454 >; 455} 456``` 457 458粒子动画的集合。 459 460**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 461 462**系统能力：** SystemCapability.ArkUI.ArkUI.Full 463 464| 名称 | 类型 | 必填 | 说明 | 465| ------ | ------------------------------ | ---- | ----------------------------------------------------------------------------------------------------------------------- | 466| particles | Array<<br/> ParticleOptions<<br/> PARTICLE,<br/> COLOR_UPDATER,<br/> OPACITY_UPDATER,<br/> SCALE_UPDATER,<br/> ACC_SPEED_UPDATER,<br/> ACC_ANGLE_UPDATER,<br/> SPIN_UPDATER<br/> ><br/>> | 是 | 粒子动画的集合。每一个的粒子动画（[ParticleOptions](#particleoptions)）包含粒子发射，同时可配置粒子的颜色、透明度、大小、速度、加速度与旋转速度，旋转速度，详见[ParticleOptions](#particleoptions)属性说明。 | 467 468## VelocityOptions<sup>14+</sup> 469 470```typescript 471declare interface VelocityOptions { 472 speed: ParticleTuple<number, number>; 473 angle: ParticleTuple<number, number>; 474} 475``` 476 477粒子速度配置。 478 479**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 480 481**系统能力：** SystemCapability.ArkUI.ArkUI.Full 482 483| 名称 | 类型 | 必填 | 说明 | 484| ------ | ------------------------------ | ---- | ----------------------------------------------------------------------------------------------------------------------- | 485| speed | [ParticleTuple](#particletuple14)<number, number> | 是 | 表示速度大小。<br/>默认值：{range:[0.0,0.0]} | 486| angle | [ParticleTuple](#particletuple14)<number, number> | 是 | 表示速度的方向（单位为角度）。以元素几何中心为坐标原点，水平方向为X轴，正数表示顺时针方向旋转角度。<br/>默认值：{range:[0.0,0.0]} | 487 488## AccelerationOptions<sup>14+</sup> 489 490```typescript 491declare interface AccelerationOptions< 492 ACC_SPEED_UPDATER extends ParticleUpdater, 493 ACC_ANGLE_UPDATER extends ParticleUpdater 494> { 495 speed?: ParticlePropertyOptions<number, ACC_SPEED_UPDATER>; 496 angle?: ParticlePropertyOptions<number, ACC_ANGLE_UPDATER>; 497} 498``` 499 500粒子加速度配置。 501 502**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 503 504**系统能力：** SystemCapability.ArkUI.ArkUI.Full 505 506| 名称 | 类型 | 必填 | 说明 | 507| ------ | --------------------------------------------------- | ---- | --------------------------------------------------------- | 508| speed | [ParticlePropertyOptions](#particlepropertyoptions)<number, [ACC_SPEED_UPDATER](#particleupdater)> | 否 | 表示加速度大小。<br/>默认值：{range:[0.0,0.0]} | 509| angle | [ParticlePropertyOptions](#particlepropertyoptions)<number, [ACC_SPEED_UPDATER](#particleupdater)> | 否 | 表示加速度方向（单位为角度）。<br/>默认值：{range:[0.0,0.0]} | 510 511## EmitterParticleOptions<sup>14+</sup> 512 513```typescript 514interface EmitterParticleOptions<PARTICLE extends ParticleType> { 515 type: PARTICLE; 516 config: ParticleConfigs[PARTICLE]; 517 count: number; 518 lifetime?: number; 519 lifetimeRange?: number; 520} 521``` 522 523粒子配置。 524 525**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 526 527**系统能力：** SystemCapability.ArkUI.ArkUI.Full 528 529| 名称 | 类型 | 必填 | 说明 | 530| ------ | --------------------------------------------------- | ---- | --------------------------------------------------------- | 531| type | [PARTICLE](#particletype) | 是 | 表示粒子类型，可以选择图片或者是点。 | 532| config | [ParticleConfigs](#particleconfigs)[PARTICLE] | 是 | 表示对应类型的配置。<br/>config类型和type值有关联：<br>1、如果type为ParticleType.POINT，则config类型为[PointParticleParameters](#pointparticleparameters) 。<br>2、如果type为ParticleType.IMAGE，则config类型为[ImageParticleParameters](#imageparticleparameters) 。 | 533| count | number | 是 | 表示发射的粒子总数，count取值>=-1,当count为-1表示粒子总数无限大。 | 534| lifetime | number | 否 | 表示单个粒子的生命周期，默认值1000（即1000ms，1s），lifetime>=-1。当lifetime为-1表示粒子生命周期无限大。当lifetime<-1，取默认值。<br/>**说明：** 如果不需要动画一直播放，建议不要将生命周期设置为-1，可能对性能造成较大影响。 | 535| lifeTimeRange | number | 否 | 表示粒子生命周期取值范围，设置lifeTimeRange后粒子的生命周期为 [lifetime-lifeTimeRange,lifeTime+lifeTimeRange]中间的一个随机整数。lifeTimeRange 默认值为0，取值范围为为0到正无穷。设置为负值时取默认值。 | 536 537## ParticleUpdaterOptions<sup>14+</sup> 538 539```typescript 540interface ParticleUpdaterOptions<TYPE, UPDATER extends ParticleUpdater> { 541 type: UPDATER; 542 config: ParticlePropertyUpdaterConfigs<TYPE>[UPDATER]; 543} 544``` 545 546颜色属性变化配置。 547 548**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 549 550**系统能力：** SystemCapability.ArkUI.ArkUI.Full 551 552| 名称 | 类型 | 必填 | 说明 | 553| ------ | --------------------------------------------------- | ---- | --------------------------------------------------------- | 554| type | [UPDATER](#particleupdater) | 是 | 表示颜色属性变化类型。 <br>默认值：type默认为ParticleUpdater.NONE。 | 555| config | [UPDATER](#particleupdater) | 是 | 属性变化配置。属性变化类型type有三类：<br/>1、当type为ParticleUpdater.NONE，表示无变化，则config类型为[ParticlePropertyUpdaterConfigs](#particlepropertyupdaterconfigs)[ParticleUpdater.NONE]。<br>2、当type为ParticleUpdater.RANDOM，表示变化类型为随机变化，则config类型为[ParticlePropertyUpdaterConfigs](#particlepropertyupdaterconfigs)[ParticleUpdater.RANDOM]。<br>3、当type为ParticleUpdater.CURVE，表示变化类型为曲线变化，则config类型为[ParticlePropertyUpdaterConfigs](#particlepropertyupdaterconfigs)[ParticleUpdater.CURVE]。 | 556 557## ParticleColorUpdaterOptions<sup>14+</sup> 558 559```typescript 560interface ParticleColorUpdaterOptions<UPDATER extends ParticleUpdater> { 561 type: UPDATER; 562 config: ParticleColorPropertyUpdaterConfigs[UPDATER]; 563} 564``` 565 566颜色属性变化配置。 567 568**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 569 570**系统能力：** SystemCapability.ArkUI.ArkUI.Full 571 572| 名称 | 类型 | 必填 | 说明 | 573| ------ | --------------------------------------------------- | ---- | --------------------------------------------------------- | 574| type | [UPDATER](#particleupdater) | 是 | 表示颜色属性变化类型。<br>默认值：type默认为 ParticleUpdater.NONE。 | 575| config | [UPDATER](#particleupdater) | 是 | 颜色属性变化类型type有三类：<br>1、当type为ParticleUpdater.NONE，表示无变化，则config类型为[ParticleColorPropertyUpdaterConfigs](#particlecolorpropertyupdaterconfigs)[ParticleUpdater.NONE]。 <br>2、type为ParticleUpdater.RANDOM，表示随机变化，则config类型为[ParticleColorPropertyUpdaterConfigs](#particlecolorpropertyupdaterconfigs)[ParticleUpdater.RANDOM]。 <br>3、type为ParticleUpdater.CURVE,表示按动画曲线变化，则config类型为[ParticleColorPropertyUpdaterConfigs](#particlecolorpropertyupdaterconfigs)[ParticleUpdater.CURVE]。 <br>**说明**：<br>当type为ParticleUpdater.RANDOM或者ParticleUpdater.CURVE时，updater中颜色配置的优先级高于range中的颜色配置。在updater配置的动画时间周期内，以updater中的颜色配置来变化；在updater配置的动画时间周期外，以range中的颜色配置来变化。 | 576 577## ParticleColorOptions<sup>14+</sup> 578 579```typescript 580interface ParticleColorOptions { 581 r: ParticleTuple<number, number>; 582 g: ParticleTuple<number, number>; 583 b: ParticleTuple<number, number>; 584 a: ParticleTuple<number, number>; 585} 586``` 587 588颜色变化方式为均匀变化的时候，在区间内随机生成一个差值。r、g、b、a四个颜色通道每秒分别使用差值叠加当前颜色值，生成目标颜色值。实现颜色随机变化的效果。 589 590**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 591 592**系统能力：** SystemCapability.ArkUI.ArkUI.Full 593 594| 名称 | 类型 | 必填 | 说明 | 595| ---- | ------------------------------ | ---- | --------------------------- | 596| r | [ParticleTuple](#particletuple14)<number, number> | 是 | r颜色通道的差值。 | 597| g | [ParticleTuple](#particletuple14)<number, number> | 是 | g颜色通道的差值。 | 598| b | [ParticleTuple](#particletuple14)<number, number> | 是 | b颜色通道的差值。 | 599| a | [ParticleTuple](#particletuple14)<number, number> | 是 | a颜色通道的差值。 | 600 601## 示例 602 603### 示例1（圆形初始化粒子） 604 605描述粒子动画基础用法，通过圆形初始化粒子。 606 607```ts 608// xxx.ets 609@Entry 610@Component 611struct ParticleExample { 612 build() { 613 Stack() { 614 Text() 615 .width(300).height(300).backgroundColor(Color.Black) 616 Particle({particles:[ 617 { 618 emitter:{ 619 particle:{ 620 type:ParticleType.POINT,//粒子类型 621 config:{ 622 radius:10//圆点半径 623 }, 624 count: 500,//粒子总数 625 lifetime:10000,//粒子生命周期，单位ms 626 lifetimeRange:100//粒子生命周期取值范围，单位ms 627 }, 628 emitRate:10,//每秒发射粒子数 629 position:[0,0], 630 shape:ParticleEmitterShape.RECTANGLE//发射器形状 631 }, 632 color:{ 633 range:[Color.Red,Color.Yellow],//初始颜色范围 634 updater:{ 635 type:ParticleUpdater.CURVE,//变化方式为曲线变化 636 config:[ 637 { 638 from:Color.White,//变化起始值 639 to:Color.Pink,//变化终点值 640 startMillis:0,//开始时间 641 endMillis:3000,//结束时间 642 curve:Curve.EaseIn//变化曲线 643 }, 644 { 645 from:Color.Pink, 646 to:Color.Orange, 647 startMillis:3000, 648 endMillis:5000, 649 curve:Curve.EaseIn 650 }, 651 { 652 from:Color.Orange, 653 to:Color.Pink, 654 startMillis:5000, 655 endMillis:8000, 656 curve:Curve.EaseIn 657 }, 658 ] 659 } 660 }, 661 opacity:{ 662 range:[0.0,1.0],//粒子透明度的初始值从【0.0到1.0】随机产生 663 updater:{ 664 type:ParticleUpdater.CURVE, 665 config:[ 666 { 667 from:0.0, 668 to:1.0, 669 startMillis:0, 670 endMillis:3000, 671 curve:Curve.EaseIn 672 }, 673 { 674 from:1.0, 675 to:0.0, 676 startMillis:5000, 677 endMillis:10000, 678 curve:Curve.EaseIn 679 } 680 ] 681 } 682 }, 683 scale:{ 684 range:[0.0,0.0], 685 updater:{ 686 type:ParticleUpdater.CURVE, 687 config:[ 688 { 689 from:0.0, 690 to:0.5, 691 startMillis:0, 692 endMillis:3000, 693 curve: Curve.EaseIn 694 } 695 ] 696 } 697 }, 698 acceleration:{//加速度的配置，从大小和方向两个维度变化，speed表示加速度大小，angle表示加速度方向 699 speed:{ 700 range:[3,9], 701 updater:{ 702 type:ParticleUpdater.RANDOM,//Speed的变化方式是随机变化 703 config:[1,20] 704 } 705 }, 706 angle:{ 707 range:[90,90] 708 } 709 } 710 711 } 712 ] 713 }).width(300).height(300) 714 }.width("100%").height("100%").align(Alignment.Center) 715 } 716} 717``` 718 719 720 721### 示例2（图片初始化粒子） 722 723描述粒子动画基础用法，通过图片初始化粒子。 724 725```ts 726@Entry 727@Component 728struct ParticleExample { 729 @State 730 myCount : number = 100 731 flag : boolean = false; 732 build() { 733 Column(){ 734 Stack() { 735 Particle({particles:[ 736 { 737 emitter:{ 738 particle:{ 739 type:ParticleType.IMAGE, 740 config:{ 741 src:$r("app.media.book"), 742 size:[10,10] 743 }, 744 count: this.myCount, 745 lifetime:10000, 746 lifetimeRange:100 747 }, 748 emitRate:3, 749 shape:ParticleEmitterShape.CIRCLE 750 }, 751 color:{ 752 range:[Color.White,Color.White] 753 }, 754 opacity:{ 755 range:[1.0,1.0], 756 updater:{ 757 type:ParticleUpdater.CURVE, 758 config:[ 759 { 760 from:0, 761 to:1.0, 762 startMillis:0, 763 endMillis:6000 764 }, 765 { 766 from:1.0, 767 to:.0, 768 startMillis:6000, 769 endMillis:10000 770 } 771 ] 772 } 773 }, 774 scale:{ 775 range:[0.1,1.0], 776 updater:{ 777 type:ParticleUpdater.CURVE, 778 config:[ 779 { 780 from: 0, 781 to: 1.5, 782 startMillis: 0, 783 endMillis: 8000, 784 curve: Curve.EaseIn 785 } 786 787 ] 788 } 789 }, 790 acceleration:{ 791 speed:{ 792 range:[3,9], 793 updater:{ 794 type: ParticleUpdater.CURVE, 795 config:[ 796 { 797 from:10, 798 to:20, 799 startMillis:0, 800 endMillis:3000, 801 curve:Curve.EaseIn 802 }, 803 { 804 from:10, 805 to:2, 806 startMillis:3000, 807 endMillis:8000, 808 curve:Curve.EaseIn 809 } 810 ] 811 } 812 }, 813 angle:{ 814 range:[0,180], 815 updater:{ 816 type:ParticleUpdater.CURVE, 817 config:[{ 818 from:1, 819 to:2, 820 startMillis:0, 821 endMillis:1000, 822 curve:Curve.EaseIn 823 }, 824 { 825 from:50, 826 to:-50, 827 startMillis:1000, 828 endMillis:3000, 829 curve:Curve.EaseIn 830 }, 831 { 832 from:3, 833 to:5, 834 startMillis:3000, 835 endMillis:8000, 836 curve:Curve.EaseIn 837 } 838 ] 839 } 840 } 841 }, 842 spin:{ 843 range:[0.1,1.0], 844 updater:{ 845 type:ParticleUpdater.CURVE, 846 config:[ 847 { 848 from: 0, 849 to: 360, 850 startMillis: 0, 851 endMillis: 8000, 852 curve: Curve.EaseIn 853 } 854 ] 855 } 856 }, 857 } 858 ,{ 859 emitter:{ 860 particle:{ 861 type:ParticleType.IMAGE, 862 config:{ 863 src:$r('app.media.heart'), 864 size:[10,10] 865 }, 866 count: this.myCount, 867 lifetime:10000, 868 lifetimeRange:100 869 }, 870 emitRate:3, 871 shape:ParticleEmitterShape.CIRCLE 872 }, 873 color:{ 874 range:[Color.White,Color.White] 875 }, 876 opacity:{ 877 range:[1.0,1.0], 878 updater:{ 879 type:ParticleUpdater.CURVE, 880 config:[ 881 { 882 from:0, 883 to:1.0, 884 startMillis:0, 885 endMillis:6000 886 }, 887 { 888 from:1.0, 889 to:.0, 890 startMillis:6000, 891 endMillis:10000 892 } 893 ] 894 } 895 }, 896 scale:{ 897 range:[0.1,1.0], 898 updater:{ 899 type:ParticleUpdater.CURVE, 900 config:[ 901 { 902 from: 0, 903 to: 2.0, 904 startMillis: 0, 905 endMillis: 10000, 906 curve: Curve.EaseIn 907 } 908 909 ] 910 } 911 }, 912 acceleration:{ 913 speed:{ 914 range:[3,9], 915 updater:{ 916 type: ParticleUpdater.CURVE, 917 config:[ 918 { 919 from:10, 920 to:20, 921 startMillis:0, 922 endMillis:3000, 923 curve:Curve.EaseIn 924 }, 925 { 926 from:10, 927 to:2, 928 startMillis:3000, 929 endMillis:8000, 930 curve:Curve.EaseIn 931 } 932 ] 933 } 934 }, 935 angle:{ 936 range:[0,180], 937 updater:{ 938 type:ParticleUpdater.CURVE, 939 config:[{ 940 from:1, 941 to:2, 942 startMillis:0, 943 endMillis:1000, 944 curve:Curve.EaseIn 945 }, 946 { 947 from:50, 948 to:-50, 949 startMillis:0, 950 endMillis:3000, 951 curve:Curve.EaseIn 952 }, 953 { 954 from:3, 955 to:5, 956 startMillis:3000, 957 endMillis:10000, 958 curve:Curve.EaseIn 959 } 960 ] 961 } 962 } 963 }, 964 spin:{ 965 range:[0.1,1.0], 966 updater:{ 967 type:ParticleUpdater.CURVE, 968 config:[ 969 { 970 from: 0, 971 to: 360, 972 startMillis: 0, 973 endMillis: 10000, 974 curve: Curve.EaseIn 975 } 976 ] 977 } 978 }, 979 },{ 980 emitter:{ 981 particle:{ 982 type:ParticleType.IMAGE, 983 config:{ 984 src:$r('app.media.sun'), 985 size:[10,10] 986 }, 987 count: this.myCount, 988 lifetime:10000, 989 lifetimeRange:100 990 }, 991 emitRate:3, 992 shape:ParticleEmitterShape.CIRCLE 993 }, 994 color:{ 995 range:[Color.White,Color.White] 996 }, 997 opacity:{ 998 range:[1.0,1.0], 999 updater:{ 1000 type:ParticleUpdater.CURVE, 1001 config:[ 1002 { 1003 from:0, 1004 to:1.0, 1005 startMillis:0, 1006 endMillis:6000 1007 }, 1008 { 1009 from:1.0, 1010 to:.0, 1011 startMillis:6000, 1012 endMillis:10000 1013 } 1014 ] 1015 } 1016 }, 1017 scale:{ 1018 range:[0.1,1.0], 1019 updater:{ 1020 type:ParticleUpdater.CURVE, 1021 config:[ 1022 { 1023 from: 0, 1024 to: 2.0, 1025 startMillis: 0, 1026 endMillis: 10000, 1027 curve: Curve.EaseIn 1028 } 1029 1030 ] 1031 } 1032 }, 1033 acceleration:{ 1034 speed:{ 1035 range:[3,9], 1036 updater:{ 1037 type: ParticleUpdater.CURVE, 1038 config:[ 1039 { 1040 from:10, 1041 to:20, 1042 startMillis:0, 1043 endMillis:3000, 1044 curve:Curve.EaseIn 1045 }, 1046 { 1047 from:10, 1048 to:2, 1049 startMillis:3000, 1050 endMillis:8000, 1051 curve:Curve.EaseIn 1052 } 1053 ] 1054 } 1055 }, 1056 angle:{ 1057 range:[0,180], 1058 updater:{ 1059 type:ParticleUpdater.CURVE, 1060 config:[{ 1061 from:1, 1062 to:2, 1063 startMillis:0, 1064 endMillis:1000, 1065 curve:Curve.EaseIn 1066 }, 1067 { 1068 from:50, 1069 to:-50, 1070 startMillis:1000, 1071 endMillis:3000, 1072 curve:Curve.EaseIn 1073 }, 1074 { 1075 from:3, 1076 to:5, 1077 startMillis:3000, 1078 endMillis:8000, 1079 curve:Curve.EaseIn 1080 } 1081 ] 1082 } 1083 } 1084 }, 1085 spin:{ 1086 range:[0.1,1.0], 1087 updater:{ 1088 type:ParticleUpdater.CURVE, 1089 config:[ 1090 { 1091 from: 0, 1092 to: 360, 1093 startMillis: 0, 1094 endMillis: 10000, 1095 curve: Curve.EaseIn 1096 } 1097 ] 1098 } 1099 }, 1100 } 1101 ] 1102 }).width(300).height(300) 1103 1104 }.width(500).height(500).align(Alignment.Center) 1105 }.width("100%").height("100%") 1106 1107 } 1108} 1109``` 1110 1111 1112### 示例3（粒子扰动场的干扰下运动轨迹发生变化） 1113 1114该示例主要演示如何通过粒子扰动场的干扰下来实现运动轨迹发生变化的效果。 1115 1116``` 1117@Entry 1118@Component 1119struct ParticleExample { 1120 build() { 1121 Stack() { 1122 Text() 1123 .width(300).height(300).backgroundColor(Color.Black) 1124 Particle({particles:[ 1125 { 1126 emitter:{ 1127 particle:{ 1128 type:ParticleType.POINT,//粒子类型 1129 config:{ 1130 radius:10//圆点半径 1131 }, 1132 count: 500,//粒子总数 1133 lifetime:10000//粒子生命周期，单位ms 1134 }, 1135 emitRate:10,//每秒发射粒子数 1136 position:[0,0], 1137 shape:ParticleEmitterShape.RECTANGLE//发射器形状 1138 }, 1139 color:{ 1140 range:[Color.Red,Color.Yellow],//初始颜色范围 1141 updater:{ 1142 type:ParticleUpdater.CURVE,//变化方式为曲线变化 1143 config:[ 1144 { 1145 from:Color.White,//变化起始值 1146 to:Color.Pink,//变化终点值 1147 startMillis:0,//开始时间 1148 endMillis:3000,//结束时间 1149 curve:Curve.EaseIn//变化曲线 1150 }, 1151 { 1152 from:Color.Pink, 1153 to:Color.Orange, 1154 startMillis:3000, 1155 endMillis:5000, 1156 curve:Curve.EaseIn 1157 }, 1158 { 1159 from:Color.Orange, 1160 to:Color.Pink, 1161 startMillis:5000, 1162 endMillis:8000, 1163 curve:Curve.EaseIn 1164 }, 1165 ] 1166 } 1167 }, 1168 opacity:{ 1169 range:[0.0,1.0],//粒子透明度的初始值从[0.0,1.0]随机产生 1170 updater:{ 1171 type:ParticleUpdater.CURVE, 1172 config:[ 1173 { 1174 from:0.0, 1175 to:1.0, 1176 startMillis:0, 1177 endMillis:3000, 1178 curve:Curve.EaseIn 1179 }, 1180 { 1181 from:1.0, 1182 to:0.0, 1183 startMillis:5000, 1184 endMillis:10000, 1185 curve:Curve.EaseIn 1186 } 1187 ] 1188 } 1189 }, 1190 scale:{ 1191 range:[0.0,0.0], 1192 updater:{ 1193 type:ParticleUpdater.CURVE, 1194 config:[ 1195 { 1196 from:0.0, 1197 to:0.5, 1198 startMillis:0, 1199 endMillis:3000, 1200 curve: Curve.EaseIn 1201 } 1202 ] 1203 } 1204 }, 1205 acceleration:{//加速度的配置，从大小和方向两个维度变化，speed表示加速度大小，angle表示加速度方向 1206 speed:{ 1207 range:[3,9], 1208 updater:{ 1209 type:ParticleUpdater.RANDOM, 1210 config:[1,20] 1211 } 1212 }, 1213 angle:{ 1214 range:[90,90] 1215 } 1216 } 1217 1218 } 1219 ] 1220 }).width(300).height(300).disturbanceFields([{ 1221 strength:10, 1222 shape:DisturbanceFieldShape.RECT, 1223 size:{width:100,height:100}, 1224 position:{x:100,y:100}, 1225 feather:15, 1226 noiseScale:10, 1227 noiseFrequency:15, 1228 noiseAmplitude:5 1229 }]) 1230 }.width("100%").height("100%").align(Alignment.Center) 1231 } 1232} 1233 1234``` 1235 1236 1237### 示例4（调整粒子发射器位置） 1238通过emitter()调整粒子发射器的位置。 1239```ts 1240@Entry 1241@Component 1242struct ParticleExample { 1243 @State emitterProperties: Array<EmitterProperty> = [ 1244 { 1245 index: 0, 1246 emitRate: 100, 1247 position: { x: 60, y: 80 }, 1248 size: { width: 200, height: 200 } 1249 } 1250 ] 1251 1252 build() { 1253 Stack() { 1254 Text() 1255 .width(300).height(300).backgroundColor(Color.Black) 1256 Particle({ particles: [ 1257 { 1258 emitter: { 1259 particle: { 1260 type: ParticleType.POINT, // 粒子类型 1261 config: { 1262 radius: 5// 圆点半径 1263 }, 1264 count: 400, // 粒子总数 1265 lifetime: -1// 粒子的生命周期，-1表示粒子生命周期无限大 1266 }, 1267 emitRate: 10, // 每秒发射粒子数 1268 position: [0, 0], // 粒子发射位置 1269 shape: ParticleEmitterShape.CIRCLE// 发射器形状 1270 }, 1271 color: { 1272 range: [Color.Red, Color.Yellow], // 初始颜色范围 1273 updater: { 1274 type: ParticleUpdater.CURVE, // 变化方式为曲线变化 1275 config: [ 1276 { 1277 from: Color.White, 1278 to: Color.Pink, 1279 startMillis: 0, 1280 endMillis: 3000, 1281 curve: Curve.EaseIn 1282 }, 1283 { 1284 from: Color.Pink, 1285 to: Color.Orange, 1286 startMillis: 3000, 1287 endMillis: 5000, 1288 curve: Curve.EaseIn 1289 }, 1290 { 1291 from: Color.Orange, 1292 to: Color.Pink, 1293 startMillis: 5000, 1294 endMillis: 8000, 1295 curve: Curve.EaseIn 1296 }, 1297 ] 1298 } 1299 }, 1300 }, 1301 ] 1302 }) 1303 .width(300) 1304 .height(300) 1305 .emitter(this.emitterProperties) 1306 }.width("100%").height("100%").align(Alignment.Center) 1307 } 1308} 1309``` 1310
