DEV Community

HarmonyOS
HarmonyOS

Posted on

What Can You Create with Particle Animation in HarmonyOS?

Read the original article：What Can You Create with Particle Animation in HarmonyOS?

What Can You Create with Particle Animation in HarmonyOS?

Introduction

Particle animation is a technique used to create dynamic visual effects like fire, smoke, rain, or explosions by animating many small particles. Each particle can be customized in terms of position, speed, direction, and color, enabling rich, interactive visuals.

HarmonyOS provides a flexible API for building particle animations, allowing developers to control particle behavior, lifespan, and motion. This is especially useful for enhancing UI, games, or multimedia apps with engaging effects.

What are the advantages of Particle Animation?

1. Realistic Effects
You can simulate natural phenomena (like fire, rain, or smoke) more realistically than with traditional animations.

2. Customizability
Developers have full control over particle properties like speed, size, color, and lifespan, allowing for a wide range of creative possibilities.

3. Lightweight Animations
Since each particle is usually a simple graphic, complex effects can be rendered efficiently with minimal performance impact.

Implementation

Let's create emitterProperties!

An emitter in particle animation is an object that generates and releases particles into the scene. It controls properties like the particle's position, direction, speed, and frequency of emission.

 @State emitterProperties: Array<EmitterProperty> = [
    {
      index: 0,
      emitRate: 100,
      position: { x: 50, y: 50 },
      size: { width: 200, height: 200 }
    }
  ]
Enter fullscreen mode Exit fullscreen mode

Then let's create the UI!

build() {
    Stack() {
      Particle({
        particles: [
          {
            emitter: {
              particle: {
                type: ParticleType.POINT,
                config: {
                  radius: 1
                },
                count: 500,
                lifetime: -1
              },
              emitRate: 50,
              shape: ParticleEmitterShape.CIRCLE,
              position: [0, 0]

            },
          },
        ]
      })
        .width(300)
        .height(300)
        .emitter(this.emitterProperties)
    }.width("100%").height("100%").align(Alignment.Center)
  }
Enter fullscreen mode Exit fullscreen mode

emitter: Defines how and where particles are generated, including shape, position, and emission rate.

particle: Specifies the properties of each particle, such as type, count, and lifetime.

config: Provides specific configuration for POINT particles, where radius defines the point size.

position: [0, 0]
Enter fullscreen mode Exit fullscreen mode

position: Sets the emitter’s position to coordinates (0, 0).

type: ParticleType.POINT,
Enter fullscreen mode Exit fullscreen mode

type: Sets the particle type to POINT, meaning each particle is rendered as a single point.

count: 500,
Enter fullscreen mode Exit fullscreen mode

count: Defines the total number of particles the emitter can generate.

lifetime: -1
Enter fullscreen mode Exit fullscreen mode

lifetime: Sets particle lifetime to -1, which means the particles live indefinitely.

emitRate: 50,
Enter fullscreen mode Exit fullscreen mode

emitRate: Specifies that 50 particles are emitted per second.

shape: ParticleEmitterShape.CIRCLE,
Enter fullscreen mode Exit fullscreen mode

shape: Indicates that particles will be emitted from a circular area.

The final configuration defines a particle system using a circular emitter that continuously releases point particles with a fixed radius, illustrating how the emitter component controls the emission shape, rate, and particle behavior in a dynamic visual animation.

Conclusion

Particle animation is a versatile technique used to simulate natural or abstract visual effects by configuring various properties such as particle type, lifetime, emission rate, and emitter shape. By combining these elements, developers can create rich, interactive, and visually appealing animations that enhance user experience in modern applications and interfaces.

References

(https://developer.huawei.com/consumer/en/doc/harmonyos-references-V14/js-apis-arkui-componentsnapshot-V14?source=post_page-----c34342715bd1---------------------------------------)

Written by Ayçanur Uçar

Top comments (0)