本文同步发表于 微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

一、粒子动画

• 粒子动画：通过在限定区域内随机生成大量粒子，并对这些粒子的运动进行组合形成的动画效果。

• 实现组件：通过 Particle 组件来实现。

• 基本元素：单个粒子（Particle），可表现为圆点（POINT）或图片等形式。

• 核心思想：通过对大量粒子的属性进行动态变化，模拟自然现象或营造特定视觉效果。

二、粒子动画的基本实现

1. 基本结构

@Entry
@Component
struct ParticleExample {
    build() {
        Stack() {
            // 背景容器
            Text()
                .width(300).height(300)
                .backgroundColor('rgb(240, 250, 255)')
            
            // 粒子动画组件
            Particle({ particles: [
                {
                    emitter: {
                        particle: {
                            type: ParticleType.POINT, // 粒子类型：圆点
                            config: {
                                radius: 5            // 圆点半径
                            },
                            count: 100,               // 粒子总数
                        },
                    },
                    color: {
                        range: ['rgb(39, 135, 217)', 'rgb(0, 74, 175)'], // 初始颜色范围
                    },
                }
            ]})
            .width(250).height(250)
        }
        .width("100%").height("100%")
        .align(Alignment.Center)
    }
}

2. 参数说明

参数	说明	示例值
type	粒子类型	ParticleType.POINT（圆点）
config.radius	圆点半径	5
count	粒子总数	100
color.range	初始颜色范围	['rgb(39, 135, 217)', 'rgb(0, 74, 175)']

3. 效果

• 在250×250区域内生成100个圆点粒子。

• 粒子颜色在蓝色系范围内随机变化。

• 粒子随机分布并运动，形成动态粒子云效果。

三、粒子发射器（Particle Emitter）

1. 发射器作用

• 定义粒子的初始属性（类型、位置、颜色等）。

• 控制粒子的生成速率。

• 管理粒子的生命周期。

2. 动态调整发射器

通过 emitter() 方法动态调整发射器属性：

@State emitterProperties: Array<EmitterProperty> = [
    {
        index: 0,                    // 发射器索引
        emitRate: 100,               // 每秒发射粒子数
        position: { x: 60, y: 80 },  // 发射器位置
        size: { width: 200, height: 200 } // 发射窗口大小
    }
]

Particle(...)
    .width(300).height(300)
    .emitter(this.emitterProperties)  // 动态调整粒子发射器

3. 发射器属性

属性	类型	说明
index	number	发射器索引（用于多个发射器场景）
emitRate	number	每秒发射粒子数
position	{x: number, y: number}	发射器中心位置
size	{width: number, height: number}	发射窗口大小

4. 发射器形状

• 可通过 shape 属性指定发射器形状

• 示例：ParticleEmitterShape.RECTANGLE（矩形发射区域）

四、粒子颜色设置

1. 初始颜色范围

color: {
    range: ['rgb(39, 135, 217)', 'rgb(0, 74, 175)'], // 初始颜色范围
    distributionType: DistributionType.GAUSSIAN        // 颜色分布类型
}

2. 颜色分布类型

类型	说明
DistributionType.GAUSSIAN	高斯（正态）分布
DistributionType.UNIFORM	均匀分布

3. 分布类型差异

• 高斯分布：颜色值集中在中间范围，两端较少。

• 均匀分布：颜色值在整个范围内均匀分布。

五、粒子生命周期

1. 生命周期概念

• 粒子从生成到消亡的整个过程。

• 决定了粒子的存活时间长度。

2. 生命周期参数

emitter: {
    particle: {
        lifetime: 300,     // 粒子生命周期，单位：毫秒(ms)
        lifetimeRange: 100 // 粒子生命周期取值范围，单位：毫秒(ms)
    },
    emitRate: 10,          // 每秒发射粒子数
    position: [0, 0],
    shape: ParticleEmitterShape.RECTANGLE // 发射器形状
}

3. 参数说明

参数	说明	示例值
lifetime	基础生命周期	300 ms
lifetimeRange	生命周期随机范围	100 ms
emitRate	发射速率	10 个/秒

4. 实际生命周期计算

• 每个粒子的实际生命周期在 [lifetime - lifetimeRange, lifetime + lifetimeRange] 范围内随机取值。

• 示例：lifetime: 300, lifetimeRange: 100

  • 实际生命周期在 200ms ~ 400ms 之间随机。

六、粒子扰动场（Disturbance Field）

1. 扰动场概念

• 一种影响粒子运动的物理场机制。

• 在粒子所在空间区域内施加特定的力，改变粒子的轨迹和行为。

• 用于实现更复杂、更自然的动画效果。

2. 扰动场配置

Particle({ particles: [...] })
    .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                       // 噪声振幅
        }
    ])

3. 扰动场属性

属性	类型	说明
strength	number	扰动场强度，影响粒子的偏转程度
shape	DisturbanceFieldShape	扰动场形状（如矩形RECT）
size	{width, height}	扰动场区域大小
position	{x, y}	扰动场中心位置
feather	number	羽化值，控制扰动场边缘的过渡平滑度
noiseScale	number	噪声缩放，影响噪声的粒度
noiseFrequency	number	噪声频率，影响噪声变化的快慢
noiseAmplitude	number	噪声振幅，影响噪声的强度变化

4. 粒子物理属性配置示例

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: {  // 加速度大小
        range: [3, 9],  // 初始速度范围
        updater: {
            type: ParticleUpdater.RANDOM,  // 更新器类型：随机
            config: [1, 20]  // 随机范围
        }
    },
    angle: {  // 加速度方向
        range: [90, 90]  // 角度范围（度）
    }
}

5. 更新器（Updater）类型

类型	说明
ParticleUpdater.CURVE	按曲线变化
ParticleUpdater.RANDOM	随机变化
ParticleUpdater.LINEAR	线性变化

---

七、完整配置架构

1. 粒子系统层级结构

Particle组件
├── particles数组（多个粒子配置）
│   ├── emitter（发射器配置）
│   │   ├── particle（粒子基础属性）
│   │   │   ├── type（类型）
│   │   │   ├── config（类型相关配置）
│   │   │   ├── count（总数）
│   │   │   ├── lifetime（生命周期）
│   │   │   └── lifetimeRange（生命周期范围）
│   │   ├── emitRate（发射速率）
│   │   ├── position（发射位置）
│   │   └── shape（发射器形状）
│   ├── color（颜色配置）
│   │   ├── range（颜色范围）
│   │   └── distributionType（分布类型）
│   ├── scale（缩放配置）
│   │   ├── range（初始范围）
│   │   └── updater（更新器）
│   ├── acceleration（加速度配置）
│   │   ├── speed（速度）
│   │   └── angle（方向）
│   └── ...（其他属性）
├── emitter()方法（动态调整发射器）
├── disturbanceFields()方法（扰动场配置）
├── width/height（粒子区域大小）
└── ...（其他组件属性）

2. 可动画属性维度

维度	属性	说明
视觉	颜色	粒子的RGB颜色值
视觉	透明度	粒子的透明程度
视觉	大小	粒子的尺寸缩放
运动	速度	粒子移动的快慢
运动	加速度	速度的变化率
运动	自旋角度	粒子的旋转角度
时间	生命周期	粒子的存活时间

总结

粒子动画是ArkUI中强大的视觉效果实现工具，通过：

1. 基础构建：使用Particle组件和粒子发射器

2. 属性控制：颜色、大小、速度、生命周期等多维度控制

3. 物理模拟：通过扰动场模拟物理环境

4. 动态交互：支持实时调整和状态切换

可以创造出从简单到复杂的各种视觉效果，丰富了用户体验和视觉表现力。