From d38a0a32b20c26faab97691993079bd48e1cd5d6 Mon Sep 17 00:00:00 2001 From: Matteo Bruni Date: Wed, 17 Mar 2021 01:07:21 +0100 Subject: [PATCH] feat: animation loop count for opacity and size --- core/main/src/Core/Interfaces/IParticleLoops.ts | 4 ++++ core/main/src/Core/Particle.ts | 14 ++++++++++++++ core/main/src/Core/Particle/Updater.ts | 10 +++++++--- .../Classes/Particles/Opacity/OpacityAnimation.ts | 9 +++++---- .../Classes/Particles/Size/SizeAnimation.ts | 10 ++++++---- .../Particles/Opacity/IOpacityAnimation.ts | 8 +++----- .../Interfaces/Particles/Size/ISizeAnimation.ts | 6 ++---- 7 files changed, 41 insertions(+), 20 deletions(-) create mode 100644 core/main/src/Core/Interfaces/IParticleLoops.ts diff --git a/core/main/src/Core/Interfaces/IParticleLoops.ts b/core/main/src/Core/Interfaces/IParticleLoops.ts new file mode 100644 index 00000000000..661dee0bf39 --- /dev/null +++ b/core/main/src/Core/Interfaces/IParticleLoops.ts @@ -0,0 +1,4 @@ +export interface IParticleLoops { + size: number; + opacity: number; +} diff --git a/core/main/src/Core/Particle.ts b/core/main/src/Core/Particle.ts index e33317da6e1..0974d529816 100644 --- a/core/main/src/Core/Particle.ts +++ b/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): void { if (colorAnimation.enable) { colorValue.velocity = (colorAnimation.speed / 100) * this.container.retina.reduceFactor; diff --git a/core/main/src/Core/Particle/Updater.ts b/core/main/src/Core/Particle/Updater.ts index 35a412152be..4635c31c7dd 100644 --- a/core/main/src/Core/Particle/Updater.ts +++ b/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,11 +208,12 @@ 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; } @@ -220,6 +221,7 @@ export class Updater { 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,11 +245,12 @@ 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; } @@ -255,6 +258,7 @@ export class Updater { case AnimationStatus.decreasing: if (particle.size.value <= minValue) { particle.size.status = AnimationStatus.increasing; + particle.loops.size++; } else { particle.size.value -= sizeVelocity; } diff --git a/core/main/src/Options/Classes/Particles/Opacity/OpacityAnimation.ts b/core/main/src/Options/Classes/Particles/Opacity/OpacityAnimation.ts index 12d134110de..0974424e8d7 100644 --- a/core/main/src/Options/Classes/Particles/Opacity/OpacityAnimation.ts +++ b/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 { +export class OpacityAnimation extends AnimationOptions implements IOpacityAnimation, IOptionLoader { /** * * @deprecated this property is obsolete, please use the new minimumValue @@ -25,13 +26,11 @@ export class OpacityAnimation implements IOpacityAnimation, IOptionLoader { +export class SizeAnimation extends AnimationOptions implements ISizeAnimation, IOptionLoader { /** * * @deprecated this property is obsolete, please use the new minimumValue @@ -25,13 +26,12 @@ export class SizeAnimation implements ISizeAnimation, IOptionLoader