企业官网建设流程全解析

核心场特效

1. 波动场（rippleFields）

让粒子以中心为原点产生波纹式波动、震荡、扩散效果。

2. 速度场（velocityFields）

给区域内粒子施加固定方向速度/推力，实现定向流动效果。

代码逐模块解析

1 页面整体结构

页面分为上下两个模块：

• 上半部分：波动场粒子效果
• 下半部分：速度场粒子效果

使用Column纵向布局，黑色背景增强粒子视觉效果。

Column(){// 波动场区域Stack(){...}// 速度场区域Stack(){...}}

2 上半部分：波动场（rippleFields）效果

粒子发射器配置

emitter:{particle:this.particle,// 点粒子、半径1、数量1000、生命周期9秒emitRate:10000,// 超高发射速度，形成密集粒子shape:ParticleEmitterShape.RECTANGLE// 矩形发射器}

波动场核心配置

.rippleFields([{amplitude:120,// 波动幅度wavelength:500,// 波长waveSpeed:220,// 波速center:{x:150,y:150},// 中心attenuation:0,region:{// 影响整个300x300区域shape:DisturbanceFieldShape.RECT,position:{x:150,y:150},size:{width:300,height:300}}}])

运行效果

• 密集白色粒子
• 从中心向外持续波动、扩散、震荡
• 像水面波纹、能量场、呼吸效果

3 下半部分：速度场（velocityFields）效果

粒子发射器配置

emitter:{particle:{type:ParticleType.POINT,config:{radius:2},count:1000,lifetime:1000,},emitRate:120,size:[300,300],shape:ParticleEmitterShape.RECTANGLE}

透明度淡出动画

updater:{type:ParticleUpdater.CURVE,config:[{from:1.0,to:0.0,0~1000ms// 粒子淡出}]}

速度场核心配置

.velocityFields([{velocity:{x:100,y:0},// 向右施加100速度region:{shape:DisturbanceFieldShape.RECT,position:{x:150,y:150},size:{width:200,height:200}}}])

运行效果总结

• 粒子在区域内被强制向右推动
• 呈现横向流动、风吹、漂移效果
• 粒子生命周期结束前自动淡出

上方：波动场

• 密集白色粒子
• 中心向外波纹扩散
• 持续波动、能量场效果

下方：速度场

• 粒子向右定向流动
• 风力/推力效果
• 自动淡出，流畅自然

运行效果如图：

完整代码

// xxx.ets@Entry@Componentstruct ParticleExample{@Statecount:number=1000@Stateparticle:EmitterParticleOptions<ParticleType>={type:ParticleType.POINT,// 粒子类型config:{radius:1// 圆点半径},count:this.count,// 粒子总数lifetime:9000,// 粒子生命周期，单位mslifetimeRange:100// 粒子生命周期取值范围，单位ms}build(){Column(){Text('波动场').fontSize(30).fontWeight(FontWeight.Bold)Stack(){Text().width(300).height(300).backgroundColor(Color.Black)Particle({particles:[{emitter:{particle:this.particle,emitRate:10000,// 每秒发射粒子数position:[0,0],shape:ParticleEmitterShape.RECTANGLE// 发射器形状},color:{range:[Color.White,Color.White],// 初始颜色范围},scale:{range:[0.2,1.5],// 初始大小范围},opacity:{range:[0.2,0.8],// 初始透明度范围}}]}).width(300).height(300).rippleFields([{amplitude:120,// 波动场幅值wavelength:500,// 波动场的波长waveSpeed:220,// 波动场的波速center:{x:150,y:150},// 波动场的力的中心attenuation:0,// 波动场随时间的衰减系数region:{// 波动场的影响区域shape:DisturbanceFieldShape.RECT,// 波动场影响区域的形状position:{x:150,y:150},// 波动场影响区域的区域中心size:{width:300,height:300}// 波动场影响区域的大小}}])}.width("100%").height(300).align(Alignment.Center)Text('速度场').fontSize(30).fontWeight(FontWeight.Bold)Stack(){Text().width(300).height(300).backgroundColor(Color.Black)Particle({particles:[{emitter:{particle:{type:ParticleType.POINT,// 粒子类型config:{radius:2// 圆点半径},count:1000,// 粒子总数lifetime:1000,// 粒子生命周期，单位mslifetimeRange:0// 粒子生命周期取值范围，单位ms},emitRate:120,// 每秒发射粒子数position:[0,0],size:[300,300],shape:ParticleEmitterShape.RECTANGLE// 发射器形状},color:{range:[Color.White,Color.White],// 初始颜色范围},opacity:{range:[1.0,1.0],updater:{type:ParticleUpdater.CURVE,// 透明度按曲线变化config:[{from:1.0,to:0.0,startMillis:0,endMillis:1000,curve:Curve.EaseIn}]}},}]}).width(300).height(300).margin({top:30}).velocityFields([{velocity:{x:100,y:0},// 速度场的速度值region:{// 速度场的影响区域shape:DisturbanceFieldShape.RECT,// 速度场影响区域的形状position:{x:150,y:150},// 速度场影响区域的区域中心size:{width:200,height:200}// 速度场影响区域的大小}}])}.width("100%").height(300).align(Alignment.Center)}}}

总结

1. rippleFields 波动场

   • 用于制作波纹、能量、扩散、呼吸效果
   • 中心在容器正中心（150,150）
   • 覆盖整个 300x300 区域

2. velocityFields 速度场

   • 用于制作方向流动、风吹、漂流、物理推力
   • velocity: {x:100, y:0}代表向右

3. 场特效必须直接挂载在Particle 组件上

4. 黑色背景能显著提升粒子视觉效果

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力