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

使用Particle实现雪花动效。

HarmonyOS
2024-05-26 14:15:54
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
xuqing_2000

功能场景描述及使用场景

使用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) 
 } 
}

实现效果

适配的版本信息

IDE:DevEco Studio 4.0.3.600

SDK:HarmoneyOS 4.0.10.11

分享
微博
QQ
微信
回复
2024-05-27 17:36:39
相关问题
如何设置全屏返回的
775浏览 • 1回复 待解决
鸿蒙jsUi如何制作按钮按下
7310浏览 • 3回复 待解决
使用swiper组件实现viewPager效果
521浏览 • 1回复 待解决
canvas如何实现水印效果
402浏览 • 1回复 待解决
如何实现星级评分效果
58浏览 • 1回复 待解决
图片模糊效果如何实现
346浏览 • 1回复 待解决
如何通过Progress实现loading效果
41浏览 • 1回复 待解决
panGesture结合动画实现fling效果
396浏览 • 1回复 待解决
如何等效实现JSONObejct效果
262浏览 • 1回复 待解决
鸿蒙中怎么实现动画翻转效果
8933浏览 • 2回复 待解决
Text实现scroll效果怎么弄?
4045浏览 • 1回复 待解决
tabs结合scroll实现吸顶效果
407浏览 • 1回复 待解决
如何实现列表页的单选效果
1039浏览 • 0回复 待解决
PopWindow的效果实现有哪些?
301浏览 • 1回复 待解决
现在是否支持Webp图?
1028浏览 • 1回复 待解决
Navigation实现Tabs切换效果
510浏览 • 1回复 待解决
实现层叠广告滑动效果
398浏览 • 1回复 待解决
长按实现各类振动效果
362浏览 • 1回复 待解决