当前位置：首页 > news >正文

HarmonyOS 6 ArkUI 粒子动画（Particle）干扰场特性使用文档

news 2026/5/9 14:56:41

文章目录

- 干扰场（DisturbanceField）核心
- - 1. 作用
  - 2. 干扰场参数
- 示例代码逐模块解析
- - 1 页面布局结构
  - 2 粒子基础配置
  - 3 干扰场完整配置
  - - 对应功能解析：
- 整体运行效果
- 完整代码
- 总结

干扰场（DisturbanceField）核心

1. 作用

干扰场用于在粒子运动过程中，对指定区域内的粒子施加动态扰动，使粒子运动轨迹不再是固定的直线/抛物线，而是呈现随机、流动、扭曲、风力吹动般的复杂效果，极大提升视觉真实感与炫酷程度。

2. 干扰场参数

参数	含义
strength	扰动强度
shape	干扰场形状（Rect / Circle）
size	干扰场区域宽高
position	干扰场在粒子容器中的坐标位置
feather	干扰场边缘羽化程度（边缘柔和度）
noiseScale	噪声缩放（扰动细节大小）
noiseFrequency	噪声频率（扰动变化快慢）
noiseAmplitude	噪声幅度（扰动剧烈程度）

示例代码逐模块解析

1 页面布局结构

Stack(){// 黑色背景底板Text().width(300).height(300).backgroundColor(Color.Black)// 粒子动画组件Particle({...}).width(300).height(300).disturbanceFields([{...}])// 干扰场配置}.width('100%').height('100%').align(Alignment.Center)

使用Stack居中展示粒子动画
黑色背景增强粒子颜色与扰动效果的视觉表现
粒子容器尺寸：300x300

2 粒子基础配置

粒子本身为圆点类型（POINT），配置如下：

半径：10
最大数量：500
生命周期：10秒
发射速度：10个/秒
发射区域：矩形
颜色渐变：白 → 粉 → 橙 → 粉
透明度：淡入 → 淡出
缩放：从0放大到0.5
加速度：固定向上（90°）随机加速

3 干扰场完整配置

.disturbanceFields([{strength:10,// 扰动强度shape:DisturbanceFieldShape.RECT,// 干扰场形状：矩形size:{width:100,height:100},// 干扰场区域大小position:{x:100,y:100},// 干扰场位置feather:15,// 边缘羽化noiseScale:10,// 噪声缩放noiseFrequency:15,// 噪声频率noiseAmplitude:5// 噪声幅度}])

对应功能解析：

strength: 10
扰动强度为10，控制粒子被“吹动”的力度。
shape: DisturbanceFieldShape.RECT
干扰场为矩形区域。
size: { width: 100, height: 100 }
干扰场区域大小为100x100。
position: { x: 100, y: 100 }
干扰场出现在粒子容器(100,100)坐标处。
feather: 15
干扰场边缘羽化值15，让区域边界更柔和，粒子过渡自然。
noiseScale: 10
噪声细节缩放，控制扰动纹理的大小。
noiseFrequency: 15
噪声变化频率，数值越高扰动变化越快、越密集。
noiseAmplitude: 5
噪声幅度，控制扰动的剧烈程度、偏移距离。

整体运行效果

黑色背景上生成彩色上升圆点粒子
粒子自动：淡入 → 放大 → 变色 → 向上漂浮 → 淡出
粒子经过(100,100) 位置的100x100矩形干扰场时：
- 轨迹被扰动、扭曲、偏移
- 呈现流动、风力、波动效果
整体视觉流畅、炫酷、高度符合官方高级粒子动效规范

完整代码

@Entry@Componentstruct ParticleExample3{build(){Stack(){Text().width(300).height(300).backgroundColor(Color.Black)Particle({particles:[{emitter:{particle:{type:ParticleType.POINT,// 粒子类型config:{radius:10// 圆点半径},count:500,// 粒子总数lifetime:10000// 粒子生命周期，单位ms},emitRate:10,// 每秒发射粒子数position:[0,0],shape:ParticleEmitterShape.RECTANGLE// 发射器形状},color:{range:[Color.Red,Color.Yellow],// 初始颜色范围updater:{type:ParticleUpdater.CURVE,// 变化方式为曲线变化config:[{from:Color.White,// 变化起始值to:Color.Pink,// 变化终点值startMillis:0,// 开始时间endMillis:3000,// 结束时间curve:Curve.EaseIn// 变化曲线},{from:Color.Pink,to:Color.Orange,startMillis:3000,endMillis:5000,curve:Curve.EaseIn},{from:Color.Orange,to:Color.Pink,startMillis:5000,endMillis:8000,curve:Curve.EaseIn},]}},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.EaseIn},{from:1.0,to:0.0,startMillis:5000,endMillis:10000,curve:Curve.EaseIn}]}},scale:{range:[0.0,0.0],updater:{type:ParticleUpdater.CURVE,config:[{from:0.0,to:0.5,startMillis:0,endMillis:3000,curve:Curve.EaseIn}]}},acceleration:{// 加速度的配置，从大小和方向两个维度变化，speed表示加速度大小，angle表示加速度方向speed:{range:[3,9],updater:{type:ParticleUpdater.RANDOM,config:[1,20]}},angle:{range:[90,90]}}}]}).width(300).height(300).disturbanceFields([{strength:10,shape:DisturbanceFieldShape.RECT,size:{width:100,height:100},position:{x:100,y:100},feather:15,noiseScale:10,noiseFrequency:15,noiseAmplitude:5}])}.width('100%').height('100%').align(Alignment.Center)}}