简版雪花粒子效果,使用Particle实现雪花动效。

@Entry 
@Component 
struct SnowFlake { 
build() { 
  Stack() { 
    Particle({ 
      particles: [ 
        { 
          emitter: { 
            particle: { 
              type: ParticleType.IMAGE, //粒子类型 
              config: { 
                src: $r('app.media.sf'), //圆点半径 
                size: [20, 20], 
              }, 
              count: -1, //粒子总数 
              lifetime: 15000 //粒子生命周期，单位ms 
            }, 
            emitRate: 10, //每秒发射粒子数 
            position: [0, 0], 
            shape: ParticleEmitterShape.RECTANGLE, //发射器形状 
            size: ['100%', 10] 
          }, 
          opacity: { 
            range: [0.0, 1.0], //粒子透明度的初始值从【0.0到1.0】随机产生 
            updater: { 
              type: ParticleUpdater.CURVE, //透明度的变化方式是曲线变化 
              config: [ 
                { 
                  from: 0.0, 
                  to: 1.0, 
                  startMillis: 0, 
                  endMillis: 3000, 
                  curve: Curve.FastOutLinearIn 
                }, 
                { 
                  from: 1.0, 
                  to: 0.0, 
                  startMillis: 9000, 
                  endMillis: 15000, 
                  curve: Curve.ExtremeDeceleration 
                } 
              ] 
            } 
          }, 
          acceleration: { 
            //加速度的配置，从大小和方向两个维度变化，speed表示加速度大小，angle表示加速度方向 
            speed: { 
              range: [20, 30], 
              updater: { 
                type: ParticleUpdater.CURVE, 
                config: [ 
                  { 
                    from: 20, 
                    to: 30, 
                    startMillis: 0, 
                    endMillis: 3000, 
                    curve: Curve.FastOutLinearIn 
                  }, 
                  { 
                    from: 30, 
                    to: 20, 
                    startMillis: 7000, 
                    endMillis: 15000, 
                    curve: Curve.ExtremeDeceleration 
                  } 
                ] 
              } 
            }, 
            angle: { 
              range: [90, 90] 
            } 
          } 
        } 
      ] 
    }) 
      .width('100%') 
      .height('100%') 
  } 
  .width("100%") 
  .height("100%") 
  .backgroundColor(Color.Black) 
  .align(Alignment.Center) 
 } 
}