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-component-general-attributes.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-component-general-events.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]，默认值为1.0。<br/>2、scale属性：range:[1.0,1.0]，取值范围为[0, 10000]，默认值为1.0。<br/>3、acceleration加速度speed属性：range:[0.0,0.0]，取值范围为[0, 10000]，默认值为0.0。<br/>4、acceleration加速度angle属性：range:[0.0,0.0]，取值范围为[-10000, 10000]，默认值为0.0。<br/>5、spin属性：range:[0.0,0.0]，取值范围为[-10000, 10000]，默认值为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 | 是 | 动画开始时间。<br/>单位：毫秒。<br/>取值范围：[0, +∞)。| 298|endMillis|number | 是 | 动画结束时间。<br/>单位：毫秒。<br/>取值范围：[0, +∞)。| 299|curve|[Curve](ts-appendix-enums.md#curve) \| [ICurve](../js-apis-curve.md#icurve9)| 否 | 设置动画曲线。<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。正数表示排斥力方向朝外，负数表示吸引力，方向朝内。<br/>取值范围：(-∞, +∞)。 | 383| shape | [DisturbanceFieldShape](#disturbancefieldshape12) | 否 | 场的形状。<br/>默认为DisturbanceFieldShape.RECT。 | 384| size | [SizeT](../js-apis-arkui-graphics.md#sizett12)<number>| 否 |场的大小。<br/>默认值 {width:0，height:0}。<br/>width和height的取值范围：[0, +∞)。 | 385| position | [PositionT](../js-apis-arkui-graphics.md#positiont12)<number> | 否 |场的位置。<br/>默认值{x:0，y:0}。<br/>x、y的取值范围：(-∞, +∞)。 | 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不生效。<br/>x、y的取值范围：(-∞, +∞)。 | 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({ 617 particles: [ 618 { 619 emitter: { 620 particle: { 621 type: ParticleType.POINT, //粒子类型 622 config: { 623 radius: 10//圆点半径 624 }, 625 count: 500, //粒子总数 626 lifetime: 10000, //粒子生命周期，单位ms 627 lifetimeRange: 100//粒子生命周期取值范围，单位ms 628 }, 629 emitRate: 10, //每秒发射粒子数 630 position: [0, 0], 631 shape: ParticleEmitterShape.RECTANGLE//发射器形状 632 }, 633 color: { 634 range: [Color.Red, Color.Yellow], //初始颜色范围 635 updater: { 636 type: ParticleUpdater.CURVE, //变化方式为曲线变化 637 config: [ 638 { 639 from: Color.White, //变化起始值 640 to: Color.Pink, //变化终点值 641 startMillis: 0, //开始时间 642 endMillis: 3000, //结束时间 643 curve: Curve.EaseIn//变化曲线 644 }, 645 { 646 from: Color.Pink, 647 to: Color.Orange, 648 startMillis: 3000, 649 endMillis: 5000, 650 curve: Curve.EaseIn 651 }, 652 { 653 from: Color.Orange, 654 to: Color.Pink, 655 startMillis: 5000, 656 endMillis: 8000, 657 curve: Curve.EaseIn 658 }, 659 ] 660 } 661 }, 662 opacity: { 663 range: [0.0, 1.0], //粒子透明度的初始值从【0.0到1.0】随机产生 664 updater: { 665 type: ParticleUpdater.CURVE, 666 config: [ 667 { 668 from: 0.0, 669 to: 1.0, 670 startMillis: 0, 671 endMillis: 3000, 672 curve: Curve.EaseIn 673 }, 674 { 675 from: 1.0, 676 to: 0.0, 677 startMillis: 5000, 678 endMillis: 10000, 679 curve: Curve.EaseIn 680 } 681 ] 682 } 683 }, 684 scale: { 685 range: [0.0, 0.0], 686 updater: { 687 type: ParticleUpdater.CURVE, 688 config: [ 689 { 690 from: 0.0, 691 to: 0.5, 692 startMillis: 0, 693 endMillis: 3000, 694 curve: Curve.EaseIn 695 } 696 ] 697 } 698 }, 699 acceleration: { 700 //加速度的配置，从大小和方向两个维度变化，speed表示加速度大小，angle表示加速度方向 701 speed: { 702 range: [3, 9], 703 updater: { 704 type: ParticleUpdater.RANDOM, //Speed的变化方式是随机变化 705 config: [1, 20] 706 } 707 }, 708 angle: { 709 range: [90, 90] 710 } 711 } 712 713 } 714 ] 715 }).width(300).height(300) 716 }.width("100%").height("100%").align(Alignment.Center) 717 } 718} 719``` 720 721 722 723### 示例2（图片初始化粒子） 724 725描述粒子动画基础用法，通过图片初始化粒子。 726 727```ts 728@Entry 729@Component 730struct ParticleExample { 731 @State 732 myCount: number = 100 733 flag: boolean = false; 734 735 build() { 736 Column() { 737 Stack() { 738 Particle({ 739 particles: [ 740 { 741 emitter: { 742 particle: { 743 type: ParticleType.IMAGE, 744 config: { 745 src: $r("app.media.book"), 746 size: [10, 10] 747 }, 748 count: this.myCount, 749 lifetime: 10000, 750 lifetimeRange: 100 751 }, 752 emitRate: 3, 753 shape: ParticleEmitterShape.CIRCLE 754 }, 755 color: { 756 range: [Color.White, Color.White] 757 }, 758 opacity: { 759 range: [1.0, 1.0], 760 updater: { 761 type: ParticleUpdater.CURVE, 762 config: [ 763 { 764 from: 0, 765 to: 1.0, 766 startMillis: 0, 767 endMillis: 6000 768 }, 769 { 770 from: 1.0, 771 to: .0, 772 startMillis: 6000, 773 endMillis: 10000 774 } 775 ] 776 } 777 }, 778 scale: { 779 range: [0.1, 1.0], 780 updater: { 781 type: ParticleUpdater.CURVE, 782 config: [ 783 { 784 from: 0, 785 to: 1.5, 786 startMillis: 0, 787 endMillis: 8000, 788 curve: Curve.EaseIn 789 } 790 791 ] 792 } 793 }, 794 acceleration: { 795 speed: { 796 range: [3, 9], 797 updater: { 798 type: ParticleUpdater.CURVE, 799 config: [ 800 { 801 from: 10, 802 to: 20, 803 startMillis: 0, 804 endMillis: 3000, 805 curve: Curve.EaseIn 806 }, 807 { 808 from: 10, 809 to: 2, 810 startMillis: 3000, 811 endMillis: 8000, 812 curve: Curve.EaseIn 813 } 814 ] 815 } 816 }, 817 angle: { 818 range: [0, 180], 819 updater: { 820 type: ParticleUpdater.CURVE, 821 config: [{ 822 from: 1, 823 to: 2, 824 startMillis: 0, 825 endMillis: 1000, 826 curve: Curve.EaseIn 827 }, 828 { 829 from: 50, 830 to: -50, 831 startMillis: 1000, 832 endMillis: 3000, 833 curve: Curve.EaseIn 834 }, 835 { 836 from: 3, 837 to: 5, 838 startMillis: 3000, 839 endMillis: 8000, 840 curve: Curve.EaseIn 841 } 842 ] 843 } 844 } 845 }, 846 spin: { 847 range: [0.1, 1.0], 848 updater: { 849 type: ParticleUpdater.CURVE, 850 config: [ 851 { 852 from: 0, 853 to: 360, 854 startMillis: 0, 855 endMillis: 8000, 856 curve: Curve.EaseIn 857 } 858 ] 859 } 860 }, 861 } 862 , { 863 emitter: { 864 particle: { 865 type: ParticleType.IMAGE, 866 config: { 867 src: $r('app.media.heart'), 868 size: [10, 10] 869 }, 870 count: this.myCount, 871 lifetime: 10000, 872 lifetimeRange: 100 873 }, 874 emitRate: 3, 875 shape: ParticleEmitterShape.CIRCLE 876 }, 877 color: { 878 range: [Color.White, Color.White] 879 }, 880 opacity: { 881 range: [1.0, 1.0], 882 updater: { 883 type: ParticleUpdater.CURVE, 884 config: [ 885 { 886 from: 0, 887 to: 1.0, 888 startMillis: 0, 889 endMillis: 6000 890 }, 891 { 892 from: 1.0, 893 to: .0, 894 startMillis: 6000, 895 endMillis: 10000 896 } 897 ] 898 } 899 }, 900 scale: { 901 range: [0.1, 1.0], 902 updater: { 903 type: ParticleUpdater.CURVE, 904 config: [ 905 { 906 from: 0, 907 to: 2.0, 908 startMillis: 0, 909 endMillis: 10000, 910 curve: Curve.EaseIn 911 } 912 913 ] 914 } 915 }, 916 acceleration: { 917 speed: { 918 range: [3, 9], 919 updater: { 920 type: ParticleUpdater.CURVE, 921 config: [ 922 { 923 from: 10, 924 to: 20, 925 startMillis: 0, 926 endMillis: 3000, 927 curve: Curve.EaseIn 928 }, 929 { 930 from: 10, 931 to: 2, 932 startMillis: 3000, 933 endMillis: 8000, 934 curve: Curve.EaseIn 935 } 936 ] 937 } 938 }, 939 angle: { 940 range: [0, 180], 941 updater: { 942 type: ParticleUpdater.CURVE, 943 config: [{ 944 from: 1, 945 to: 2, 946 startMillis: 0, 947 endMillis: 1000, 948 curve: Curve.EaseIn 949 }, 950 { 951 from: 50, 952 to: -50, 953 startMillis: 0, 954 endMillis: 3000, 955 curve: Curve.EaseIn 956 }, 957 { 958 from: 3, 959 to: 5, 960 startMillis: 3000, 961 endMillis: 10000, 962 curve: Curve.EaseIn 963 } 964 ] 965 } 966 } 967 }, 968 spin: { 969 range: [0.1, 1.0], 970 updater: { 971 type: ParticleUpdater.CURVE, 972 config: [ 973 { 974 from: 0, 975 to: 360, 976 startMillis: 0, 977 endMillis: 10000, 978 curve: Curve.EaseIn 979 } 980 ] 981 } 982 }, 983 }, { 984 emitter: { 985 particle: { 986 type: ParticleType.IMAGE, 987 config: { 988 src: $r('app.media.sun'), 989 size: [10, 10] 990 }, 991 count: this.myCount, 992 lifetime: 10000, 993 lifetimeRange: 100 994 }, 995 emitRate: 3, 996 shape: ParticleEmitterShape.CIRCLE 997 }, 998 color: { 999 range: [Color.White, Color.White] 1000 }, 1001 opacity: { 1002 range: [1.0, 1.0], 1003 updater: { 1004 type: ParticleUpdater.CURVE, 1005 config: [ 1006 { 1007 from: 0, 1008 to: 1.0, 1009 startMillis: 0, 1010 endMillis: 6000 1011 }, 1012 { 1013 from: 1.0, 1014 to: .0, 1015 startMillis: 6000, 1016 endMillis: 10000 1017 } 1018 ] 1019 } 1020 }, 1021 scale: { 1022 range: [0.1, 1.0], 1023 updater: { 1024 type: ParticleUpdater.CURVE, 1025 config: [ 1026 { 1027 from: 0, 1028 to: 2.0, 1029 startMillis: 0, 1030 endMillis: 10000, 1031 curve: Curve.EaseIn 1032 } 1033 1034 ] 1035 } 1036 }, 1037 acceleration: { 1038 speed: { 1039 range: [3, 9], 1040 updater: { 1041 type: ParticleUpdater.CURVE, 1042 config: [ 1043 { 1044 from: 10, 1045 to: 20, 1046 startMillis: 0, 1047 endMillis: 3000, 1048 curve: Curve.EaseIn 1049 }, 1050 { 1051 from: 10, 1052 to: 2, 1053 startMillis: 3000, 1054 endMillis: 8000, 1055 curve: Curve.EaseIn 1056 } 1057 ] 1058 } 1059 }, 1060 angle: { 1061 range: [0, 180], 1062 updater: { 1063 type: ParticleUpdater.CURVE, 1064 config: [{ 1065 from: 1, 1066 to: 2, 1067 startMillis: 0, 1068 endMillis: 1000, 1069 curve: Curve.EaseIn 1070 }, 1071 { 1072 from: 50, 1073 to: -50, 1074 startMillis: 1000, 1075 endMillis: 3000, 1076 curve: Curve.EaseIn 1077 }, 1078 { 1079 from: 3, 1080 to: 5, 1081 startMillis: 3000, 1082 endMillis: 8000, 1083 curve: Curve.EaseIn 1084 } 1085 ] 1086 } 1087 } 1088 }, 1089 spin: { 1090 range: [0.1, 1.0], 1091 updater: { 1092 type: ParticleUpdater.CURVE, 1093 config: [ 1094 { 1095 from: 0, 1096 to: 360, 1097 startMillis: 0, 1098 endMillis: 10000, 1099 curve: Curve.EaseIn 1100 } 1101 ] 1102 } 1103 }, 1104 } 1105 ] 1106 }).width(300).height(300) 1107 1108 }.width(500).height(500).align(Alignment.Center) 1109 }.width("100%").height("100%") 1110 1111 } 1112} 1113``` 1114 1115 1116### 示例3（粒子扰动场的干扰下运动轨迹发生变化） 1117 1118该示例主要演示如何通过粒子扰动场的干扰下来实现运动轨迹发生变化的效果。 1119 1120``` 1121@Entry 1122@Component 1123struct ParticleExample { 1124 build() { 1125 Stack() { 1126 Text() 1127 .width(300).height(300).backgroundColor(Color.Black) 1128 Particle({ 1129 particles: [ 1130 { 1131 emitter: { 1132 particle: { 1133 type: ParticleType.POINT, //粒子类型 1134 config: { 1135 radius: 10//圆点半径 1136 }, 1137 count: 500, //粒子总数 1138 lifetime: 10000//粒子生命周期，单位ms 1139 }, 1140 emitRate: 10, //每秒发射粒子数 1141 position: [0, 0], 1142 shape: ParticleEmitterShape.RECTANGLE//发射器形状 1143 }, 1144 color: { 1145 range: [Color.Red, Color.Yellow], //初始颜色范围 1146 updater: { 1147 type: ParticleUpdater.CURVE, //变化方式为曲线变化 1148 config: [ 1149 { 1150 from: Color.White, //变化起始值 1151 to: Color.Pink, //变化终点值 1152 startMillis: 0, //开始时间 1153 endMillis: 3000, //结束时间 1154 curve: Curve.EaseIn//变化曲线 1155 }, 1156 { 1157 from: Color.Pink, 1158 to: Color.Orange, 1159 startMillis: 3000, 1160 endMillis: 5000, 1161 curve: Curve.EaseIn 1162 }, 1163 { 1164 from: Color.Orange, 1165 to: Color.Pink, 1166 startMillis: 5000, 1167 endMillis: 8000, 1168 curve: Curve.EaseIn 1169 }, 1170 ] 1171 } 1172 }, 1173 opacity: { 1174 range: [0.0, 1.0], //粒子透明度的初始值从[0.0,1.0]随机产生 1175 updater: { 1176 type: ParticleUpdater.CURVE, 1177 config: [ 1178 { 1179 from: 0.0, 1180 to: 1.0, 1181 startMillis: 0, 1182 endMillis: 3000, 1183 curve: Curve.EaseIn 1184 }, 1185 { 1186 from: 1.0, 1187 to: 0.0, 1188 startMillis: 5000, 1189 endMillis: 10000, 1190 curve: Curve.EaseIn 1191 } 1192 ] 1193 } 1194 }, 1195 scale: { 1196 range: [0.0, 0.0], 1197 updater: { 1198 type: ParticleUpdater.CURVE, 1199 config: [ 1200 { 1201 from: 0.0, 1202 to: 0.5, 1203 startMillis: 0, 1204 endMillis: 3000, 1205 curve: Curve.EaseIn 1206 } 1207 ] 1208 } 1209 }, 1210 acceleration: { 1211 //加速度的配置，从大小和方向两个维度变化，speed表示加速度大小，angle表示加速度方向 1212 speed: { 1213 range: [3, 9], 1214 updater: { 1215 type: ParticleUpdater.RANDOM, 1216 config: [1, 20] 1217 } 1218 }, 1219 angle: { 1220 range: [90, 90] 1221 } 1222 } 1223 1224 } 1225 ] 1226 }).width(300).height(300).disturbanceFields([{ 1227 strength: 10, 1228 shape: DisturbanceFieldShape.RECT, 1229 size: { width: 100, height: 100 }, 1230 position: { x: 100, y: 100 }, 1231 feather: 15, 1232 noiseScale: 10, 1233 noiseFrequency: 15, 1234 noiseAmplitude: 5 1235 }]) 1236 }.width("100%").height("100%").align(Alignment.Center) 1237 } 1238} 1239 1240``` 1241 1242 1243### 示例4（调整粒子发射器位置） 1244通过emitter()调整粒子发射器的位置。 1245```ts 1246@Entry 1247@Component 1248struct ParticleExample { 1249 @State emitterProperties: Array<EmitterProperty> = [ 1250 { 1251 index: 0, 1252 emitRate: 100, 1253 position: { x: 60, y: 80 }, 1254 size: { width: 200, height: 200 } 1255 } 1256 ] 1257 1258 build() { 1259 Stack() { 1260 Text() 1261 .width(300).height(300).backgroundColor(Color.Black) 1262 Particle({ 1263 particles: [ 1264 { 1265 emitter: { 1266 particle: { 1267 type: ParticleType.POINT, // 粒子类型 1268 config: { 1269 radius: 5// 圆点半径 1270 }, 1271 count: 400, // 粒子总数 1272 lifetime: -1// 粒子的生命周期，-1表示粒子生命周期无限大 1273 }, 1274 emitRate: 10, // 每秒发射粒子数 1275 position: [0, 0], // 粒子发射位置 1276 shape: ParticleEmitterShape.CIRCLE// 发射器形状 1277 }, 1278 color: { 1279 range: [Color.Red, Color.Yellow], // 初始颜色范围 1280 updater: { 1281 type: ParticleUpdater.CURVE, // 变化方式为曲线变化 1282 config: [ 1283 { 1284 from: Color.White, 1285 to: Color.Pink, 1286 startMillis: 0, 1287 endMillis: 3000, 1288 curve: Curve.EaseIn 1289 }, 1290 { 1291 from: Color.Pink, 1292 to: Color.Orange, 1293 startMillis: 3000, 1294 endMillis: 5000, 1295 curve: Curve.EaseIn 1296 }, 1297 { 1298 from: Color.Orange, 1299 to: Color.Pink, 1300 startMillis: 5000, 1301 endMillis: 8000, 1302 curve: Curve.EaseIn 1303 }, 1304 ] 1305 } 1306 }, 1307 }, 1308 ] 1309 }) 1310 .width(300) 1311 .height(300) 1312 .emitter(this.emitterProperties) 1313 }.width("100%").height("100%").align(Alignment.Center) 1314 } 1315} 1316``` 1317
