HarmonyOS 鸿蒙Next中Particle粒子动画配置

HarmonyOS 鸿蒙Next中Particle粒子动画配置 HarmonyOS 中如何配置粒子动画效果？（问题来源项目案例整理:https://github.com/heqiyuan35-creator/BaitKnows.git）

4 回复

粒子动画 (Particle)-动画-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

更多关于HarmonyOS 鸿蒙Next中Particle粒子动画配置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


使用 Particle 组件配置粒子系统：

Particle({
  particles: [{
    emitter: {
      particle: {
        type: ParticleType.IMAGE,
        config: { src: $r('app.media.star'), size: [20, 20] },
        count: 100,
        lifetime: 3000  // 粒子生命周期（毫秒）
      },
      emitRate: 10,     // 每秒发射数量
      position: [0, 0], // 发射位置
      shape: ParticleEmitterShape.RECTANGLE  // 发射区域形状
    },
    color: {
      range: [Color.Yellow, Color.Orange],  // 颜色范围
      updater: { type: ParticleUpdater.RANDOM }
    },
    opacity: { range: [1.0, 0.0] },  // 透明度渐变
    scale: { range: [1.0, 0.5] },    // 缩放渐变
    velocity: {
      speed: [50, 100],              // 速度范围
      angle: [-90, -90]              // 发射角度（向上）
    },
    acceleration: { speed: { range: [0, 10] }, angle: { range: [90, 90] } }  // 重力
  }]
})
.width('100%')
.height('100%')

鸿蒙Next的Particle粒子动画通过ArkTS的Particle组件实现，支持配置发射器、粒子样式、运动轨迹等属性。开发者可在UI描述中定义粒子数量、生命周期、速度、加速度及颜色变化等参数。动画效果由系统渲染引擎直接处理，无需依赖Java或C语言。具体属性包括particle、emitter等，用于控制粒子系统的外观与行为。

在HarmonyOS Next中，配置粒子动画主要使用Particle组件和相关的ParticleOptions参数。以下是核心配置步骤：

  1. 创建Particle组件：在ArkUI中，通过Particle组件声明粒子系统。

    Particle(options: ParticleOptions)

  2. 配置ParticleOptions：这是控制粒子效果的核心参数对象，主要属性包括：

    • particle：粒子基础配置（数量、生命周期、速度、加速度等）
    • emitter：发射器配置（位置、形状、发射速率等）
    • initializer：粒子初始化配置（大小、颜色、位置随机性等）
    • affector：粒子影响器（用于动态修改粒子属性）

  3. 示例配置：

    Particle({
  particle: {
    count: 100,
    lifetime: 2000,
    speed: { value: 50 },
    acceleration: { value: 10 }
  },
  emitter: {
    shape: 'circle',
    radius: 20,
    rate: { number: 10 }
  }
})

  4. 控制粒子状态：通过状态变量控制粒子的播放、暂停和停止：

    [@State](/user/State) isPlaying: boolean = true

Particle({ ... })
  .play(this.isPlaying)

  5. 自定义粒子样式：可通过initializer配置粒子的初始外观，如大小范围、颜色渐变等。

建议参考官方文档中的Particle组件API详细说明，结合具体需求调整参数值以达到预期效果。

回到顶部