简版雪花粒子效果,使用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) 
 } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.