How to Achieve Spherical Particle Animation Effects

#harmonyos #arkts #particleanimation #arkui

Read the original article：How to Achieve Spherical Particle Animation Effects

How to Achieve Spherical Particle Animation Effects

Problem Description

How to achieve a spherical particle animation effect?

Background Knowledge

Particle animation is an animation effect composed of the movement of a large number of randomly generated particles within a certain range. In HarmonyOS, this animation effect is mainly implemented through the Particle component.

Solution

An interface containing particle effects was constructed using the Stack layout function.
A particle system was created, with various properties of the particles configured, such as emission rate, lifetime, color, transparency, scaling, acceleration, etc.
A disturbance field was set up to influence the behavior of the particles.
Changes in the view area were monitored, and the size and position of the disturbance field were adjusted according to the new view dimensions.

The Particle component can be configured with multiple particle attributes to implement a dynamic and visually attractive particle animation effect.

@Entry
@Component
struct CircleDemo {
  @State viewWidth: number = 0;
  @State viewHeight: number = 0;

  build() {
    Stack() {
      Particle({
        particles: [
          {
            emitter: {
              particle: {
                type: ParticleType.POINT, // Particle type
                config: {
                  radius: 1 // Dot radius
                },
                count: -1, // Total number of particles
                lifetime: 5000, // Particle lifetime, in ms
                lifetimeRange: 100 // Particle lifetime range, in ms
              },
              emitRate: 200, // Number of particles emitted per second
              position: [0, 0],
              shape: ParticleEmitterShape.CIRCLE // Emitter shape
            },
            color: {
              range: [Color.White, Color.White] // Initial color range
            },
            opacity: {
              range: [0.0,
                1.0], // The initial value of particle transparency is randomly generated between 0.0 and 1.0.
              updater: {
                type: ParticleUpdater.CURVE, // The transparency changes in a random manner.
                config: [
                  {
                    from: 0.0,
                    to: 1.0,
                    startMillis: 0,
                    endMillis: 2500,
                    curve: Curve.EaseIn
                  },
                  {
                    from: 1.0,
                    to: 0.0,
                    startMillis: 2500,
                    endMillis: 5000,
                    curve: Curve.EaseIn
                  }
                ]
              }
            },
            scale: {
              range: [0.0, 0.0],
              updater: {
                type: ParticleUpdater.CURVE,
                config: [
                  {
                    from: 0.0,
                    to: 1.0,
                    startMillis: 0,
                    endMillis: 1000,
                    curve: Curve.EaseIn
                  },
                  {
                    from: 1.0,
                    to: 0,
                    startMillis: 1000,
                    endMillis: 5000,
                    curve: Curve.EaseIn
                  }
                ]
              }
            },
            acceleration: {
              // The acceleration configuration varies in both magnitude and direction.
              // "Speed" represents the magnitude of acceleration, while "angle" represents the direction of acceleration.
              speed: {
                range: [3, 9],
                updater: {
                  type: ParticleUpdater.RANDOM,
                  config: [1, 20]
                }
              },
              angle: {
                range: [0, 360]
              }
            },
            spin: {
              range: [0, 1.0],
              updater: {
                type: ParticleUpdater.CURVE,
                config: [
                  {
                    from: 0,
                    to: 180,
                    startMillis: 0,
                    endMillis: 5000,
                    curve: Curve.EaseIn
                  }
                ]
              }
            },
            velocity: {
              speed: [20, 30],
              angle: [0.0, 1.0]
            }
          }
        ]
      })
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Black)
        .disturbanceFields([{
          // Field strength, which indicates the intensity of the repulsive force from the center outward, with a default value of 0.
          // A positive number indicates an outward repulsive force, while a negative number indicates an inward attractive force.
          strength: 80,
          shape: DisturbanceFieldShape.CIRCLE, // Shape of the field
          size: { width: this.viewWidth, height: this.viewHeight }, // Size of the field
          position: { x: this.viewWidth / 2, y: this.viewHeight / 2 } // Position of the field
        }])
        .onAreaChange((oldValue: Area, newValue: Area) => {
          // Monitor changes in the view area and adjust the size and position of the disturbance field according to the new view dimensions.
          this.viewWidth = newValue.width as number;
          this.viewHeight = newValue.height as number;
        });
    }
  }
}