feat: added decay to all animations

tsparticles · May 9, 2022 · 954858e · 954858e
1 parent a825299
commit 954858e
Show file tree

Hide file tree

Showing 28 changed files with 374 additions and 257 deletions.
diff --git a/editor/src/Sections/Options/Particles/Stroke/StrokeOptionsEditor.ts b/editor/src/Sections/Options/Particles/Stroke/StrokeOptionsEditor.ts
@@ -38,6 +38,7 @@ export class StrokeOptionsEditor extends EditorBase {
                     enable: false,
                     offset: { max: 0, min: 0 },
                     speed: 0,
+                    decay: 0,
                     sync: false,
                 },
             };

diff --git a/engine/src/Core/Interfaces/IParticleValueAnimation.ts b/engine/src/Core/Interfaces/IParticleValueAnimation.ts
@@ -7,6 +7,7 @@ export interface IParticleValueAnimation<T> {
     enable: boolean;
     status?: AnimationStatus;
     velocity?: number;
+    decay?: number;
     value: T;
     loops?: number;
     maxLoops?: number;

diff --git a/engine/src/Core/Particle.ts b/engine/src/Core/Particle.ts
@@ -352,7 +352,8 @@ export class Particle implements IParticle {
 
         /* size */
         const sizeOptions = this.options.size,
-            sizeRange = sizeOptions.value;
+            sizeRange = sizeOptions.value,
+            sizeAnimation = sizeOptions.animation;
 
         this.size = {
             enable: sizeOptions.animation.enable,
@@ -363,10 +364,9 @@ export class Particle implements IParticle {
             maxLoops: getRangeValue(sizeOptions.animation.count),
         };
 
-        const sizeAnimation = sizeOptions.animation;
-
         if (sizeAnimation.enable) {
             this.size.status = AnimationStatus.increasing;
+            this.size.decay = 1 - getRangeValue(sizeAnimation.decay);
 
             switch (sizeAnimation.startValue) {
                 case StartValueType.min:

diff --git a/engine/src/Options/Classes/AnimatableGradient.ts b/engine/src/Options/Classes/AnimatableGradient.ts
diff --git a/engine/src/Options/Classes/AnimationOptions.ts b/engine/src/Options/Classes/AnimationOptions.ts
@@ -8,12 +8,14 @@ export class AnimationOptions implements IAnimation, IOptionLoader<IAnimation> {
     count: RangeValue;
     enable: boolean;
     speed: RangeValue;
+    decay: RangeValue;
     sync: boolean;
 
     constructor() {
         this.count = 0;
         this.enable = false;
         this.speed = 1;
+        this.decay = 0;
         this.sync = false;
     }
 
@@ -34,6 +36,10 @@ export class AnimationOptions implements IAnimation, IOptionLoader<IAnimation> {
             this.speed = setRangeValue(data.speed);
         }
 
+        if (data.decay !== undefined) {
+            this.decay = setRangeValue(data.decay);
+        }
+
         if (data.sync !== undefined) {
             this.sync = data.sync;
         }

diff --git a/engine/src/Options/Classes/ColorAnimation.ts b/engine/src/Options/Classes/ColorAnimation.ts
@@ -12,13 +12,15 @@ export class ColorAnimation implements IColorAnimation, IOptionLoader<IColorAnim
     enable;
     offset: RangeValue;
     speed: RangeValue;
+    decay: RangeValue;
     sync;
 
     constructor() {
         this.count = 0;
         this.enable = false;
         this.offset = 0;
         this.speed = 1;
+        this.decay = 0;
         this.sync = true;
     }
 
@@ -43,6 +45,10 @@ export class ColorAnimation implements IColorAnimation, IOptionLoader<IColorAnim
             this.speed = setRangeValue(data.speed);
         }
 
+        if (data.decay !== undefined) {
+            this.decay = setRangeValue(data.decay);
+        }
+
         if (data.sync !== undefined) {
             this.sync = data.sync;
         }

diff --git a/engine/src/Options/Classes/Gradients/AnimatableGradient.ts b/engine/src/Options/Classes/Gradients/AnimatableGradient.ts
@@ -0,0 +1,40 @@
+import { AnimatableGradientColor } from "./AnimatableGradientColor";
+import { GradientAngle } from "./GradientAngle";
+import { GradientType } from "../../../Enums/Types/GradientType";
+import type { IAnimatableGradient } from "../../Interfaces/IAnimatableGradient";
+import type { IOptionLoader } from "../../Interfaces/IOptionLoader";
+import type { RecursivePartial } from "../../../Types/RecursivePartial";
+
+export class AnimatableGradient implements IAnimatableGradient, IOptionLoader<IAnimatableGradient> {
+    angle: GradientAngle;
+    colors: AnimatableGradientColor[];
+    type: GradientType;
+
+    constructor() {
+        this.angle = new GradientAngle();
+        this.colors = [];
+        this.type = GradientType.random;
+    }
+
+    load(data?: RecursivePartial<IAnimatableGradient>): void {
+        if (!data) {
+            return;
+        }
+
+        this.angle.load(data.angle);
+
+        if (data.colors !== undefined) {
+            this.colors = data.colors.map((s) => {
+                const tmp = new AnimatableGradientColor();
+
+                tmp.load(s);
+
+                return tmp;
+            });
+        }
+
+        if (data.type !== undefined) {
+            this.type = data.type;
+        }
+    }
+}
diff --git a/engine/src/Options/Classes/Gradients/AnimatableGradientColor.ts b/engine/src/Options/Classes/Gradients/AnimatableGradientColor.ts
@@ -0,0 +1,38 @@
+import { AnimatableColor } from "../AnimatableColor";
+import { GradientColorOpacity } from "./GradientColorOpacity";
+import type { IAnimatableGradientColor } from "../../Interfaces/IOptionsGradient";
+import type { IOptionLoader } from "../../Interfaces/IOptionLoader";
+import type { RecursivePartial } from "../../../Types/RecursivePartial";
+
+export class AnimatableGradientColor implements IAnimatableGradientColor, IOptionLoader<IAnimatableGradientColor> {
+    stop;
+    value;
+    opacity?: GradientColorOpacity;
+
+    constructor() {
+        this.stop = 0;
+        this.value = new AnimatableColor();
+    }
+
+    load(data?: RecursivePartial<IAnimatableGradientColor>): void {
+        if (!data) {
+            return;
+        }
+
+        if (data.stop !== undefined) {
+            this.stop = data.stop;
+        }
+
+        this.value = AnimatableColor.create(this.value, data.value);
+
+        if (data.opacity !== undefined) {
+            this.opacity = new GradientColorOpacity();
+
+            if (typeof data.opacity === "number") {
+                this.opacity.value = data.opacity;
+            } else {
+                this.opacity.load(data.opacity);
+            }
+        }
+    }
+}