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 >(value: { 31 particles: Array< 32 ParticleOptions< 33 PARTICLE, 34 COLOR_UPDATER, 35 OPACITY_UPDATER, 36 SCALE_UPDATER, 37 ACC_SPEED_UPDATER, 38 ACC_ANGLE_UPDATER, 39 SPIN_UPDATER 40 > 41 >; 42 }): ParticleAttribute; 43} 44``` 45 46**参数：** 47 48| 参数名 | 类型 | 必填 | 描述 | 49| -------- | -------- | -------- | -------- | 50| value | {<br/>particles:Array<[ParticleOptions](#particleoptions)<<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/>} | 是 | 粒子动画的集合。每一个的粒子动画（ParticleOptions）包含粒子发射，同时可配置粒子的颜色、透明度、大小、速度、加速度与旋转速度，旋转速度，详见[ParticleOptions](#particleoptions)属性说明。 51 52## 属性 53支持[通用属性](ts-universal-attributes-size.md) 54 55## 事件 56支持[通用事件](ts-universal-events-click.md) 57 58## ParticleOptions 59 60```typescript 61interface ParticleOptions< 62 PARTICLE extends ParticleType, 63 COLOR_UPDATER extends ParticleUpdater, 64 OPACITY_UPDATER extends ParticleUpdater, 65 SCALE_UPDATER extends ParticleUpdater, 66 ACC_SPEED_UPDATER extends ParticleUpdater, 67 ACC_ANGLE_UPDATER extends ParticleUpdater, 68 SPIN_UPDATER extends ParticleUpdater 69> { 70 emitter: EmitterOptions<PARTICLE>; 71 color?: ParticleColorPropertyOptions<COLOR_UPDATER>; 72 opacity?: ParticlePropertyOptions<number, OPACITY_UPDATER>; 73 scale?: ParticlePropertyOptions<number, SCALE_UPDATER>; 74 velocity?: { 75 speed: [number, number]; 76 angle: [number, number]; 77 }; 78 acceleration?: { 79 speed?: ParticlePropertyOptions<number, ACC_SPEED_UPDATER>; 80 angle?: ParticlePropertyOptions<number, ACC_ANGLE_UPDATER>; 81 }; 82 spin?: ParticlePropertyOptions<number, SPIN_UPDATER>; 83} 84``` 85 86| 参数名 | 类型 | 必填 | 描述 | 87| -------- | -------- | -------- | -------- | 88| emitter | [EmitterOptions](#emitteroptions)<[PARTICLE](#particletype)> | 是 | 粒子发射器配置。 | 89| color | [ParticleColorPropertyOptions](#particlecolorpropertyoptions)<[COLOR_UPDATER](#particleupdater)> | 否 | 粒子颜色配置。<br/>**说明**：<br/>默认值：{ range:[Color.White,Color.White] } 。图片粒子不支持设置颜色。| 90| opacity | [ParticlePropertyOptions](#particlepropertyoptions)\<number, [OPACITY_UPDATER](#particleupdater)> | 否 | 粒子透明度配置。<br/>默认值：{ range:[1.0,1.0] } | 91| scale | [ParticlePropertyOptions](#particlepropertyoptions)\<number, [SCALE_UPDATER](#particleupdater)> | 否 | 粒子大小配置。<br/>默认值：{ range:[1.0,1.0] } | 92| velocity | {<br/>speed: [number, number];<br/>angle: [number, number];<br/>} |否 | 粒子速度配置。<br/>**说明**：<br/>speed表示速度大小。angle表示速度的方向（单位为角度），以元素几何中心为坐标原点，水平方向为X轴，正数表示顺时针方向旋转角度。<br/>默认值：{ speed:[0.0,0.0],angle:[0.0,0.0] } | 93| acceleration | {<br/>speed?: [ParticlePropertyOptions](#particlepropertyoptions)<number, [ACC_SPEED_UPDATER](#particleupdater)>;<br/>angle?: [ParticlePropertyOptions](#particlepropertyoptions)<number, [ACC_ANGLE_UPDATER](#particleupdater)>;<br/>} | 否 | 粒子加速度配置。 <br/>**说明**：<br/>speed表示加速度大小，angle表示加速度方向（单位为角度）。<br/>默认值：{ speed:{range:[0.0,0.0]},angle:{range:[0.0,0.0]} }| 94| spin | [ParticlePropertyOptions](#particlepropertyoptions)<number, [SPIN_UPDATER](#particleupdater)> | 否 | 粒子自旋角度配置。 <br/>默认值：{range:[0.0,0.0]}<br/>方向：正数表示顺时针旋转，负数表示逆时针旋转。| 95 96 97## EmitterOptions 98粒子发射器的配置 99 100```typescript 101interface EmitterOptions<PARTICLE extends ParticleType> { 102 particle: { 103 type: PARTICLE; 104 config: ParticleConfigs[PARTICLE]; 105 count: number; 106 lifetime?: number; 107 }; 108 emitRate?: number; 109 shape?: ParticleEmitterShape; 110 position?: [Dimension, Dimension]; 111 size?: [Dimension, Dimension]; 112} 113``` 114| 参数名 | 类型 | 必填 | 描述 | 115| -------- | -------- | -------- | -------- | 116| particle | {<br>type: [PARTICLE](#particletype),<br>config: [ParticleConfigs](#particleconfigs),<br>count: number,<br>lifetime?: number<br>} | 是 | 粒子配置。<br>-type表示粒子类型，可以选择图片或者是点。<br>-config表示对应类型的配置。<br>-config类型和type值有关联：<br>1、如果type为ParticleType.POINT，则config类型为[PointParticleParameters](#pointparticleparameters) 。<br>2、如果type为ParticleType.IMAGE，则config类型为[ImageParticleParameters](#imageparticleparameters) 。<br>-count表示发射的粒子总数，count取值>=-1,当count为-1表示粒子总数无限大。<br>-lifetime表示单个粒子的生命周期，默认值1000（即1000ms，1s）,lifetime>=-1,当lifetime为-1表示粒子生命周期无限大。当lifetime<-1，取默认值。| 117| emitRate | number | 否 | 发射器发射速率（即每秒发射粒子数）。 默认值：5。| 118| shape | [ParticleEmitterShape](#particleemittershape) | 否 | 发射器形状。默认值：ParticleEmitterShape.RECTANGLE。 | 119| position | \[[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)\] | 否 | 发射器位置（距离组件左上角的位置。第一个参数为x方向上的相对偏移，第二个参数为y轴方向相对偏移。） <br>默认值：`[0.0, 0.0]`。| 120| size | \[[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)\] |否 | 发射窗口的大小。第一个参数为发射器宽，第二个参数为发射器高。<br>默认值`['100%','100%']`(即发射窗口占满Particle组件)。 | 121 122## ParticleConfigs 123 124```typescript 125interface ParticleConfigs { 126 [ParticleType.POINT]: PointParticleParameters; 127 [ParticleType.IMAGE]: ImageParticleParameters; 128} 129``` 130 131 132| 参数名称 | 类型 | 必填 | 描述 | 133| -------- | -------------- | -------- | -------- | 134| [ParticleType.POINT] | [PointParticleParameters](#pointparticleparameters) | 是 | 点状粒子配置。 | 135| [ParticleType.IMAGE] | [ImageParticleParameters](#imageparticleparameters) | 是 | 图片粒子配置。 | 136 137## PointParticleParameters 138```typescript 139interface PointParticleParameters { 140 radius: VP; 141} 142``` 143| 参数名称 | 类型 | 必填 | 描述 | 144| -------- | -------------- | -------- | -------- | 145| radius | [VP](ts-types.md#vp10)| 是 | 粒子半径。 | 146 147## ImageParticleParameters 148```typescript 149interface ImageParticleParameters { 150 src: ResourceStr; 151 size: [Dimension, Dimension]; 152 objectFit?: ImageFit; 153} 154``` 155| 参数名称 | 类型 | 必填 | 描述 | 156| -------- | -------------- | -------- | -------- | 157| src | [ResourceStr](ts-types.md#resourcestr) | 是 | 图片路径。暂不支持svg图片类型。 | 158| size | \[[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)\]| 是 | 图像尺寸。 | 159| objectFit| [ImageFit](ts-appendix-enums.md#imagefit)| 否 | 图片显示模式。 | 160 161## ParticleColorPropertyOptions 162 163```typescript 164interface ParticleColorPropertyOptions<UPDATER extends ParticleUpdater> { 165 range: [ResourceColor, ResourceColor]; 166 updater?: { 167 type: UPDATER; 168 config: ParticleColorPropertyUpdaterConfigs[UPDATER]; 169 }; 170} 171``` 172| 参数名 | 类型 | 必填 | 描述 | 173| -------- | -------- | -------- | -------- | 174| range | \[[ResourceColor](ts-types.md#resourcecolor), [ResourceColor](ts-types.md#resourcecolor)\] | 是 | 粒子初始颜色区间，粒子发射器生成粒子的初始颜色在range区间随机取值。<br>默认值：range:[Color.White,Color.White] 175| updater | {<br>type: [UPDATER](#particleupdater);<br>config: [ParticleColorPropertyUpdaterConfigs](#particlecolorpropertyupdaterconfigs)[UPDATER];<br>} | 否 | 颜色属性变化配置。颜色属性变化类型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。 | 176 177 178## ParticleColorPropertyUpdaterConfigs 179```typescript 180interface ParticleColorPropertyUpdaterConfigs { 181 [ParticleUpdater.NONE]: void; 182 [ParticleUpdater.RANDOM]: { 183 r: [number, number]; 184 g: [number, number]; 185 b: [number, number]; 186 a: [number, number]; 187 }; 188 [ParticleUpdater.CURVE]: Array<ParticlePropertyAnimation<ResourceColor>>; 189} 190``` 191| 参数名 | 类型 | 必填 | 描述 | 192| -------- | -------- | -------- | -------- | 193|[ParticleUpdater.NONE]|void | 是 | 无变化。| 194| [ParticleUpdater.RANDOM] | {<br> r: [number, number];<br> g: [number, number];<br> b: [number, number];<br> a: [number, number];<br>} | 是 | 表示变化方式为均匀变化的时候，在区间内随机生成一个差值。r、g、b、a四个颜色通道每秒分别使用差值叠加当前颜色值，生成目标颜色值。实现颜色随机变化的效果。| 195[ParticleUpdater.CURVE]|Array<[ParticlePropertyAnimation](#particlepropertyanimation)\<[ResourceColor](ts-types.md#resourcecolor)\>> | 是 | 表示变化方式为曲线变化时，颜色变化的配置。数组类型表示当前属性可以设置多段动画，如0ms-3000ms，3000ms-5000ms，5000ms-8000ms分别设置动画。| 196 197## ParticlePropertyOptions 198```typescript 199interface ParticlePropertyOptions<TYPE, UPDATER extends ParticleUpdater> { 200 range: [TYPE, TYPE]; 201 updater?: { 202 type: UPDATER; 203 config: ParticlePropertyUpdaterConfigs<TYPE>[UPDATER]; 204 }; 205} 206``` 207| 参数名 | 类型 | 必填 | 描述 | 208| -------- | -------- | -------- | -------- | 209| range | [TYPE, TYPE] | 是 | 粒子初始属性值区间，粒子发射器生成粒子的属性值在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.0。<br/>5、spin属性：range:[0.0,0.0]，默认值为0.0。 210| updater | {type: [UPDATER](#particleupdater);config: [ParticlePropertyUpdaterConfigs](#particlepropertyupdaterconfigs)[UPDATER];} | 否 | 属性变化配置。属性变化类型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。| 211 212 213## ParticlePropertyUpdaterConfigs 214```typescript 215interface ParticlePropertyUpdaterConfigs<T> { 216 [ParticleUpdater.NONE]: void; 217 [ParticleUpdater.RANDOM]: [T, T]; 218 [ParticleUpdater.CURVE]: Array<ParticlePropertyAnimation<T>>; 219} 220``` 221| 参数名 | 类型 | 必填 | 描述 | 222| -------- | -------- | -------- | -------- | 223[[ParticleUpdater.NONE]|void | 是 | 无变化。| 224| [ParticleUpdater.RANDOM] | [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。| 225|[ParticleUpdater.CURVE]|Array<[ParticlePropertyAnimation](#particlepropertyanimation)\<T\>> | 是 | 表示变化方式为曲线变化时，属性变化的配置。数组类型表示当前属性可以设置多段动画，如0ms-3000ms，3000ms-5000ms，5000ms-8000ms分别设置动画。T为number。| 226 227 228 229## ParticlePropertyAnimation 230```typescript 231interface ParticlePropertyAnimation<T> { 232 from: T; 233 to: T; 234 startMillis: number; 235 endMillis: number; 236 curve?: Curve | ICurve; 237} 238``` 239| 参数名 | 类型 | 必填 | 描述 | 240| -------- | -------- | -------- | -------- | 241|from| T | 是 | 属性起始值。非法输入取对应属性的默认值。| 242| to | T | 是 | 属性目标值。非法输入取对应属性的默认值。| 243|startMillis|number | 是 | 动画开始时间。| 244|endMillis|number | 是 | 动画结束时间。| 245|curve|[Curve](ts-appendix-enums.md#curve) \| [ICurve](../js-apis-curve.md#icurve)| 否 | 设置动画曲线。<br>默认值：Curve.Linear| 246 247 248## ParticleType 249```typescript 250enum ParticleType { 251 POINT = 'point', 252 IMAGE = 'image', 253} 254``` 255| 名称 | 描述 | 256| -------- | -------- | 257POINT |点状粒子| 258IMAGE | 图片粒子| 259 260 261 262## ParticleEmitterShape 263```typescript 264enum ParticleEmitterShape { 265 RECTANGLE = 'rectangle', 266 CIRCLE = 'circle', 267 ELLIPSE = 'ellipse', 268} 269``` 270| 名称 | 描述 | 271| -------- | -------- | 272RECTANGLE |粒子发射器为矩形| 273CIRCLE | 粒子发射器为圆形| 274ELLIPSE |粒子发射器为椭圆形| 275 276 277## ParticleUpdater 278```typescript 279enum ParticleUpdater { 280 NONE = 'none', 281 RANDOM = 'random', 282 CURVE = 'curve', 283} 284``` 285| 名称 | 描述 | 286| -------- | -------- | 287|NONE |无变化| 288|RANDOM | 随机变化| 289|CURVE |动画曲线变化| 290 291## 示例 292 293### 示例1 294```ts 295// xxx.ets 296// xxx.ets 297@Entry 298@Component 299struct ParticleExample { 300 build() { 301 Stack() { 302 Text() 303 .width(300).height(300).backgroundColor(Color.Black) 304 Particle({particles:[ 305 { 306 emitter:{ 307 particle:{ 308 type:ParticleType.POINT,//粒子类型 309 config:{ 310 radius:10//圆点半径 311 }, 312 count: 500,//粒子总数 313 lifetime:10000//粒子生命周期，单位ms 314 }, 315 emitRate:10,//每秒发射粒子数 316 position:[0,0], 317 shape:ParticleEmitterShape.RECTANGLE//发射器形状 318 }, 319 color:{ 320 range:[Color.Red,Color.Yellow],//初始颜色范围 321 updater:{ 322 type:ParticleUpdater.CURVE,//变化方式为曲线变化 323 config:[ 324 { 325 from:Color.White,//变化起始值 326 to:Color.Pink,//变化终点值 327 startMillis:0,//开始时间 328 endMillis:3000,//结束时间 329 curve:Curve.EaseIn//变化曲线 330 }, 331 { 332 from:Color.Pink, 333 to:Color.Orange, 334 startMillis:3000, 335 endMillis:5000, 336 curve:Curve.EaseIn 337 }, 338 { 339 from:Color.Orange, 340 to:Color.Pink, 341 startMillis:5000, 342 endMillis:8000, 343 curve:Curve.EaseIn 344 }, 345 ] 346 } 347 }, 348 opacity:{ 349 range:[0.0,1.0],//粒子透明度的初始值从【0.0到1.0】随机产生 350 updater:{ 351 type:ParticleUpdater.CURVE,//透明度的变化方式是随机变化 352 config:[ 353 { 354 from:0.0, 355 to:1.0, 356 startMillis:0, 357 endMillis:3000, 358 curve:Curve.EaseIn 359 }, 360 { 361 from:1.0, 362 to:0.0, 363 startMillis:5000, 364 endMillis:10000, 365 curve:Curve.EaseIn 366 } 367 ] 368 } 369 }, 370 scale:{ 371 range:[0.0,0.0], 372 updater:{ 373 type:ParticleUpdater.CURVE, 374 config:[ 375 { 376 from:0.0, 377 to:0.5, 378 startMillis:0, 379 endMillis:3000, 380 curve: Curve.EaseIn 381 } 382 ] 383 } 384 }, 385 acceleration:{//加速度的配置，从大小和方向两个维度变化，speed表示加速度大小，angle表示加速度方向 386 speed:{ 387 range:[3,9], 388 updater:{ 389 type:ParticleUpdater.RANDOM, 390 config:[1,20] 391 } 392 }, 393 angle:{ 394 range:[90,90] 395 } 396 } 397 398 } 399 ] 400 }).width(300).height(300) 401 }.width("100%").height("100%").align(Alignment.Center) 402 } 403} 404``` 405 406 407 408### 示例2 409```ts 410@Entry 411@Component 412struct ParticleExample { 413 @State 414 myCount : number = 100 415 flag : boolean = false; 416 build() { 417 Column(){ 418 Stack() { 419 Particle({particles:[ 420 { 421 emitter:{ 422 particle:{ 423 type:ParticleType.IMAGE, 424 config:{ 425 src:$r("app.media.glass"), 426 size:[10,10] 427 }, 428 count: this.myCount, 429 lifetime:10000 430 }, 431 emitRate:3, 432 shape:ParticleEmitterShape.CIRCLE 433 }, 434 color:{ 435 range:[Color.White,Color.White] 436 }, 437 opacity:{ 438 range:[1.0,1.0], 439 updater:{ 440 type:ParticleUpdater.CURVE, 441 config:[ 442 { 443 from:0, 444 to:1.0, 445 startMillis:0, 446 endMillis:6000 447 }, 448 { 449 from:1.0, 450 to:.0, 451 startMillis:6000, 452 endMillis:10000 453 } 454 ] 455 } 456 }, 457 scale:{ 458 range:[0.1,1.0], 459 updater:{ 460 type:ParticleUpdater.CURVE, 461 config:[ 462 { 463 from: 0, 464 to: 1.5, 465 startMillis: 0, 466 endMillis: 8000, 467 curve: Curve.EaseIn 468 } 469 470 ] 471 } 472 }, 473 acceleration:{ 474 speed:{ 475 range:[3,9], 476 updater:{ 477 type: ParticleUpdater.CURVE, 478 config:[ 479 { 480 from:10, 481 to:20, 482 startMillis:0, 483 endMillis:3000, 484 curve:Curve.EaseIn 485 }, 486 { 487 from:10, 488 to:2, 489 startMillis:3000, 490 endMillis:8000, 491 curve:Curve.EaseIn 492 } 493 ] 494 } 495 }, 496 angle:{ 497 range:[0,180], 498 updater:{ 499 type:ParticleUpdater.CURVE, 500 config:[{ 501 from:1, 502 to:2, 503 startMillis:0, 504 endMillis:1000, 505 curve:Curve.EaseIn 506 }, 507 { 508 from:50, 509 to:-50, 510 startMillis:1000, 511 endMillis:3000, 512 curve:Curve.EaseIn 513 }, 514 { 515 from:3, 516 to:5, 517 startMillis:3000, 518 endMillis:8000, 519 curve:Curve.EaseIn 520 } 521 ] 522 } 523 } 524 }, 525 spin:{ 526 range:[0.1,1.0], 527 updater:{ 528 type:ParticleUpdater.CURVE, 529 config:[ 530 { 531 from: 0, 532 to: 360, 533 startMillis: 0, 534 endMillis: 8000, 535 curve: Curve.EaseIn 536 } 537 ] 538 } 539 }, 540 } 541 ,{ 542 emitter:{ 543 particle:{ 544 type:ParticleType.IMAGE, 545 config:{ 546 src:$r('app.media.book'), 547 size:[10,10] 548 }, 549 count: this.myCount, 550 lifetime:10000 551 }, 552 emitRate:3, 553 shape:ParticleEmitterShape.CIRCLE 554 }, 555 color:{ 556 range:[Color.White,Color.White] 557 }, 558 opacity:{ 559 range:[1.0,1.0], 560 updater:{ 561 type:ParticleUpdater.CURVE, 562 config:[ 563 { 564 from:0, 565 to:1.0, 566 startMillis:0, 567 endMillis:6000 568 }, 569 { 570 from:1.0, 571 to:.0, 572 startMillis:6000, 573 endMillis:10000 574 } 575 ] 576 } 577 }, 578 scale:{ 579 range:[0.1,1.0], 580 updater:{ 581 type:ParticleUpdater.CURVE, 582 config:[ 583 { 584 from: 0, 585 to: 2.0, 586 startMillis: 0, 587 endMillis: 10000, 588 curve: Curve.EaseIn 589 } 590 591 ] 592 } 593 }, 594 acceleration:{ 595 speed:{ 596 range:[3,9], 597 updater:{ 598 type: ParticleUpdater.CURVE, 599 config:[ 600 { 601 from:10, 602 to:20, 603 startMillis:0, 604 endMillis:3000, 605 curve:Curve.EaseIn 606 }, 607 { 608 from:10, 609 to:2, 610 startMillis:3000, 611 endMillis:8000, 612 curve:Curve.EaseIn 613 } 614 ] 615 } 616 }, 617 angle:{ 618 range:[0,180], 619 updater:{ 620 type:ParticleUpdater.CURVE, 621 config:[{ 622 from:1, 623 to:2, 624 startMillis:0, 625 endMillis:1000, 626 curve:Curve.EaseIn 627 }, 628 { 629 from:50, 630 to:-50, 631 startMillis:0, 632 endMillis:3000, 633 curve:Curve.EaseIn 634 }, 635 { 636 from:3, 637 to:5, 638 startMillis:3000, 639 endMillis:10000, 640 curve:Curve.EaseIn 641 } 642 ] 643 } 644 } 645 }, 646 spin:{ 647 range:[0.1,1.0], 648 updater:{ 649 type:ParticleUpdater.CURVE, 650 config:[ 651 { 652 from: 0, 653 to: 360, 654 startMillis: 0, 655 endMillis: 10000, 656 curve: Curve.EaseIn 657 } 658 ] 659 } 660 }, 661 },{ 662 emitter:{ 663 particle:{ 664 type:ParticleType.IMAGE, 665 config:{ 666 src:$r('app.media.squares'), 667 size:[10,10] 668 }, 669 count: this.myCount, 670 lifetime:10000 671 }, 672 emitRate:3, 673 shape:ParticleEmitterShape.CIRCLE 674 }, 675 color:{ 676 range:[Color.White,Color.White] 677 }, 678 opacity:{ 679 range:[1.0,1.0], 680 updater:{ 681 type:ParticleUpdater.CURVE, 682 config:[ 683 { 684 from:0, 685 to:1.0, 686 startMillis:0, 687 endMillis:6000 688 }, 689 { 690 from:1.0, 691 to:.0, 692 startMillis:6000, 693 endMillis:10000 694 } 695 ] 696 } 697 }, 698 scale:{ 699 range:[0.1,1.0], 700 updater:{ 701 type:ParticleUpdater.CURVE, 702 config:[ 703 { 704 from: 0, 705 to: 2.0, 706 startMillis: 0, 707 endMillis: 10000, 708 curve: Curve.EaseIn 709 } 710 711 ] 712 } 713 }, 714 acceleration:{ 715 speed:{ 716 range:[3,9], 717 updater:{ 718 type: ParticleUpdater.CURVE, 719 config:[ 720 { 721 from:10, 722 to:20, 723 startMillis:0, 724 endMillis:3000, 725 curve:Curve.EaseIn 726 }, 727 { 728 from:10, 729 to:2, 730 startMillis:3000, 731 endMillis:8000, 732 curve:Curve.EaseIn 733 } 734 ] 735 } 736 }, 737 angle:{ 738 range:[0,180], 739 updater:{ 740 type:ParticleUpdater.CURVE, 741 config:[{ 742 from:1, 743 to:2, 744 startMillis:0, 745 endMillis:1000, 746 curve:Curve.EaseIn 747 }, 748 { 749 from:50, 750 to:-50, 751 startMillis:1000, 752 endMillis:3000, 753 curve:Curve.EaseIn 754 }, 755 { 756 from:3, 757 to:5, 758 startMillis:3000, 759 endMillis:8000, 760 curve:Curve.EaseIn 761 } 762 ] 763 } 764 } 765 }, 766 spin:{ 767 range:[0.1,1.0], 768 updater:{ 769 type:ParticleUpdater.CURVE, 770 config:[ 771 { 772 from: 0, 773 to: 360, 774 startMillis: 0, 775 endMillis: 10000, 776 curve: Curve.EaseIn 777 } 778 ] 779 } 780 }, 781 } 782 ] 783 }).width(300).height(300) 784 785 }.width(500).height(500).align(Alignment.Center) 786 }.width("100%").height("100%") 787 788 } 789} 790``` 791
