feat: animation loop count for opacity and size

core/main/src/Core/Interfaces/IParticleLoops.ts

@@ -0,0 +1,4 @@
+export interface IParticleLoops {
+    size: number;
+    opacity: number;
+}

core/main/src/Core/Particle.ts

@@ -32,6 +32,7 @@ import type { ILink } from "./Interfaces/ILink";
 import type { IParticleHslAnimation } from "./Interfaces/IParticleHslAnimation";
 import type { IColorAnimation } from "../Options/Interfaces/IColorAnimation";
 import type { Stroke } from "../Options/Classes/Particles/Stroke";
+import { IParticleLoops } from "./Interfaces/IParticleLoops";
 
 /**
  * The single particle object
@@ -56,6 +57,7 @@ export class Particle implements IParticle {
     public readonly sides;
     public readonly strokeWidth;
     public readonly options;
+    public readonly loops: IParticleLoops;
 
     public links: ILink[];
     public randomIndexData?: number;
@@ -98,6 +100,10 @@ export class Particle implements IParticle {
         this.lastNoiseTime = 0;
         this.destroyed = false;
         this.misplaced = false;
+        this.loops = {
+            opacity: 0,
+            size: 0,
+        };
 
         const pxRatio = container.retina.pixelRatio;
         const options = container.actualOptions;
@@ -467,6 +473,14 @@ export class Particle implements IParticle {
         this.links = [];
     }
 
+    /**
+     * This method is used when the particle has lost a life and needs some value resets
+     */
+    public reset(): void {
+        this.loops.opacity = 0;
+        this.loops.size = 0;
+    }
+
     private setColorAnimation(colorAnimation: IColorAnimation, colorValue: IParticleValueAnimation<number>): void {
         if (colorAnimation.enable) {
             colorValue.velocity = (colorAnimation.speed / 100) * this.container.retina.reduceFactor;

core/main/src/Core/Particle/Updater.ts

@@ -8,7 +8,6 @@ import { IBounds } from "../Interfaces/IBounds";
 import { IDimension } from "../Interfaces/IDimension";
 import { ICoordinates } from "../Interfaces/ICoordinates";
 import { IParticleValueAnimation } from "../Interfaces/IParticleValueAnimation";
-import { ColorAnimation } from "../../Options/Classes/ColorAnimation";
 import { IColorAnimation } from "../../Options/Interfaces/IColorAnimation";
 import { IHslAnimation } from "../../Options/Interfaces/IHslAnimation";
 import { IAnimatableColor } from "../../Options/Interfaces/Particles/IAnimatableColor";
@@ -193,6 +192,7 @@ export class Updater {
                 particle.spawning = true;
                 particle.lifeDelayTime = 0;
                 particle.lifeTime = 0;
+                particle.reset();
 
                 const lifeOptions = particle.options.life;
 
@@ -208,18 +208,20 @@ export class Updater {
         const minValue = opacityAnim.minimumValue;
         const maxValue = particle.options.opacity.value;
 
-        if (opacityAnim.enable) {
+        if (!particle.destroyed && opacityAnim.enable && particle.loops.size < opacityAnim.count) {
             switch (particle.opacity.status) {
                 case AnimationStatus.increasing:
                     if (particle.opacity.value >= maxValue) {
                         particle.opacity.status = AnimationStatus.decreasing;
+                        particle.loops.opacity++;
                     } else {
                         particle.opacity.value += (particle.opacity.velocity ?? 0) * delta.factor;
                     }
                     break;
                 case AnimationStatus.decreasing:
                     if (particle.opacity.value <= minValue) {
                         particle.opacity.status = AnimationStatus.increasing;
+                        particle.loops.opacity++;
                     } else {
                         particle.opacity.value -= (particle.opacity.velocity ?? 0) * delta.factor;
                     }
@@ -243,18 +245,20 @@ export class Updater {
         const maxValue = particle.sizeValue ?? container.retina.sizeValue;
         const minValue = sizeAnim.minimumValue * container.retina.pixelRatio;
 
-        if (sizeAnim.enable) {
+        if (!particle.destroyed && sizeAnim.enable && particle.loops.size < sizeAnim.count) {
             switch (particle.size.status) {
                 case AnimationStatus.increasing:
                     if (particle.size.value >= maxValue) {
                         particle.size.status = AnimationStatus.decreasing;
+                        particle.loops.size++;
                     } else {
                         particle.size.value += sizeVelocity;
                     }
                     break;
                 case AnimationStatus.decreasing:
                     if (particle.size.value <= minValue) {
                         particle.size.status = AnimationStatus.increasing;
+                        particle.loops.size++;
                     } else {
                         particle.size.value -= sizeVelocity;
                     }

core/main/src/Options/Classes/Particles/Opacity/OpacityAnimation.ts

@@ -2,11 +2,12 @@ import type { IOpacityAnimation } from "../../../Interfaces/Particles/Opacity/IO
 import type { RecursivePartial } from "../../../../Types";
 import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
 import { DestroyType, StartValueType } from "../../../../Enums/Types";
+import { AnimationOptions } from "../../AnimationOptions";
 
 /**
  * @category Options
  */
-export class OpacityAnimation implements IOpacityAnimation, IOptionLoader<IOpacityAnimation> {
+export class OpacityAnimation extends AnimationOptions implements IOpacityAnimation, IOptionLoader<IOpacityAnimation> {
     /**
      *
      * @deprecated this property is obsolete, please use the new minimumValue
@@ -25,13 +26,11 @@ export class OpacityAnimation implements IOpacityAnimation, IOptionLoader<IOpaci
     }
 
     public destroy: DestroyType | keyof typeof DestroyType;
-    public enable;
     public minimumValue;
-    public speed;
     public startValue: StartValueType | keyof typeof StartValueType;
-    public sync;
 
     constructor() {
+        super();
         this.destroy = DestroyType.none;
         this.enable = false;
         this.minimumValue = 0;
@@ -45,6 +44,8 @@ export class OpacityAnimation implements IOpacityAnimation, IOptionLoader<IOpaci
             return;
         }
 
+        super.load(data);
+
         if (data.destroy !== undefined) {
             this.destroy = data.destroy;
         }

core/main/src/Options/Classes/Particles/Size/SizeAnimation.ts

@@ -2,11 +2,12 @@ import type { ISizeAnimation } from "../../../Interfaces/Particles/Size/ISizeAni
 import type { RecursivePartial } from "../../../../Types";
 import { DestroyType, StartValueType } from "../../../../Enums";
 import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
+import { AnimationOptions } from "../../AnimationOptions";
 
 /**
  * @category Options
  */
-export class SizeAnimation implements ISizeAnimation, IOptionLoader<ISizeAnimation> {
+export class SizeAnimation extends AnimationOptions implements ISizeAnimation, IOptionLoader<ISizeAnimation> {
     /**
      *
      * @deprecated this property is obsolete, please use the new minimumValue
@@ -25,13 +26,12 @@ export class SizeAnimation implements ISizeAnimation, IOptionLoader<ISizeAnimati
     }
 
     public destroy: DestroyType | keyof typeof DestroyType;
-    public enable;
     public minimumValue;
-    public speed;
     public startValue: StartValueType | keyof typeof StartValueType;
-    public sync;
 
     constructor() {
+        super();
+
         this.destroy = DestroyType.none;
         this.enable = false;
         this.minimumValue = 0;
@@ -45,6 +45,8 @@ export class SizeAnimation implements ISizeAnimation, IOptionLoader<ISizeAnimati
             return;
         }
 
+        super.load(data);
+
         if (data.destroy !== undefined) {
             this.destroy = data.destroy;
         }

core/main/src/Options/Interfaces/Particles/Opacity/IOpacityAnimation.ts

@@ -1,18 +1,16 @@
-import { DestroyType, StartValueType } from "../../../../Enums/Types";
+import type { DestroyType, StartValueType } from "../../../../Enums/Types";
+import type { IAnimation } from "../../IAnimation";
 
 /**
  * @category Options
  */
-export interface IOpacityAnimation {
+export interface IOpacityAnimation extends IAnimation {
     /**
      * @deprecated use the new minimumValue instead
      */
     opacity_min: number;
 
     destroy: DestroyType | keyof typeof DestroyType;
-    enable: boolean;
     minimumValue: number;
-    speed: number;
-    sync: boolean;
     startValue: StartValueType | keyof typeof StartValueType;
 }

core/main/src/Options/Interfaces/Particles/Size/ISizeAnimation.ts

@@ -1,18 +1,16 @@
 import type { DestroyType, StartValueType } from "../../../../Enums";
+import type { IAnimation } from "../../IAnimation";
 
 /**
  * @category Options
  */
-export interface ISizeAnimation {
+export interface ISizeAnimation extends IAnimation {
     /**
      * @deprecated use the new minimumValue instead
      */
     size_min: number;
 
     destroy: DestroyType | keyof typeof DestroyType;
-    enable: boolean;
     minimumValue: number;
-    speed: number;
-    sync: boolean;
     startValue: StartValueType | keyof typeof StartValueType;
 }