@tsparticles/updater-opacity 3.0.0-alpha.1 → 3.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -12
- package/browser/OpacityUpdater.js +6 -64
- package/browser/Utils.js +64 -0
- package/browser/index.js +2 -2
- package/cjs/OpacityUpdater.js +6 -64
- package/cjs/Utils.js +68 -0
- package/cjs/index.js +2 -13
- package/esm/OpacityUpdater.js +6 -64
- package/esm/Utils.js +64 -0
- package/esm/index.js +2 -2
- package/package.json +6 -5
- package/report.html +4 -4
- package/tsparticles.updater.opacity.js +39 -30
- package/tsparticles.updater.opacity.min.js +1 -1
- package/tsparticles.updater.opacity.min.js.LICENSE.txt +1 -8
- package/types/OpacityUpdater.d.ts +1 -1
- package/types/Utils.d.ts +2 -0
- package/types/index.d.ts +1 -1
- package/umd/OpacityUpdater.js +7 -65
- package/umd/Utils.js +78 -0
- package/umd/index.js +2 -2
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
# tsParticles Opacity Updater
|
|
4
4
|
|
|
5
|
-
[](https://www.jsdelivr.com/package/npm/@tsparticles/updater-opacity)
|
|
6
|
+
[](https://www.npmjs.com/package/@tsparticles/updater-opacity)
|
|
7
|
+
[](https://www.npmjs.com/package/@tsparticles/updater-opacity) [](https://github.com/sponsors/matteobruni)
|
|
8
8
|
|
|
9
9
|
[tsParticles](https://github.com/matteobruni/tsparticles) updater plugin for opacity animations.
|
|
10
10
|
|
|
@@ -26,7 +26,7 @@ Once the scripts are loaded you can set up `tsParticles` and the updater plugin
|
|
|
26
26
|
|
|
27
27
|
```javascript
|
|
28
28
|
(async () => {
|
|
29
|
-
await loadOpacityUpdater();
|
|
29
|
+
await loadOpacityUpdater(tsParticles);
|
|
30
30
|
|
|
31
31
|
await tsParticles.load({
|
|
32
32
|
id: "tsparticles",
|
|
@@ -42,29 +42,33 @@ Once the scripts are loaded you can set up `tsParticles` and the updater plugin
|
|
|
42
42
|
This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
|
|
43
43
|
|
|
44
44
|
```shell
|
|
45
|
-
$ npm install tsparticles
|
|
45
|
+
$ npm install @tsparticles/updater-opacity
|
|
46
46
|
```
|
|
47
47
|
|
|
48
48
|
or
|
|
49
49
|
|
|
50
50
|
```shell
|
|
51
|
-
$ yarn add tsparticles
|
|
51
|
+
$ yarn add @tsparticles/updater-opacity
|
|
52
52
|
```
|
|
53
53
|
|
|
54
54
|
Then you need to import it in the app, like this:
|
|
55
55
|
|
|
56
56
|
```javascript
|
|
57
|
-
const { tsParticles } = require("tsparticles
|
|
58
|
-
const { loadOpacityUpdater } = require("tsparticles
|
|
57
|
+
const { tsParticles } = require("@tsparticles/engine");
|
|
58
|
+
const { loadOpacityUpdater } = require("@tsparticles/updater-opacity");
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
(async () => {
|
|
61
|
+
await loadOpacityUpdater(tsParticles);
|
|
62
|
+
})();
|
|
61
63
|
```
|
|
62
64
|
|
|
63
65
|
or
|
|
64
66
|
|
|
65
67
|
```javascript
|
|
66
|
-
import { tsParticles } from "tsparticles
|
|
67
|
-
import { loadOpacityUpdater } from "tsparticles
|
|
68
|
+
import { tsParticles } from "@tsparticles/engine";
|
|
69
|
+
import { loadOpacityUpdater } from "@tsparticles/updater-opacity";
|
|
68
70
|
|
|
69
|
-
|
|
71
|
+
(async () => {
|
|
72
|
+
await loadOpacityUpdater(tsParticles);
|
|
73
|
+
})();
|
|
70
74
|
```
|
|
@@ -1,63 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
switch (particle.options.opacity.animation.destroy) {
|
|
4
|
-
case "max":
|
|
5
|
-
if (value >= maxValue) {
|
|
6
|
-
particle.destroy();
|
|
7
|
-
}
|
|
8
|
-
break;
|
|
9
|
-
case "min":
|
|
10
|
-
if (value <= minValue) {
|
|
11
|
-
particle.destroy();
|
|
12
|
-
}
|
|
13
|
-
break;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
function updateOpacity(particle, delta) {
|
|
17
|
-
var _a, _b, _c, _d, _e, _f;
|
|
18
|
-
if (!particle.opacity) {
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
21
|
-
const minValue = particle.opacity.min, maxValue = particle.opacity.max, decay = (_a = particle.opacity.decay) !== null && _a !== void 0 ? _a : 1;
|
|
22
|
-
if (particle.destroyed ||
|
|
23
|
-
!particle.opacity.enable ||
|
|
24
|
-
(((_b = particle.opacity.maxLoops) !== null && _b !== void 0 ? _b : 0) > 0 && ((_c = particle.opacity.loops) !== null && _c !== void 0 ? _c : 0) > ((_d = particle.opacity.maxLoops) !== null && _d !== void 0 ? _d : 0))) {
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
|
-
switch (particle.opacity.status) {
|
|
28
|
-
case "increasing":
|
|
29
|
-
if (particle.opacity.value >= maxValue) {
|
|
30
|
-
particle.opacity.status = "decreasing";
|
|
31
|
-
if (!particle.opacity.loops) {
|
|
32
|
-
particle.opacity.loops = 0;
|
|
33
|
-
}
|
|
34
|
-
particle.opacity.loops++;
|
|
35
|
-
}
|
|
36
|
-
else {
|
|
37
|
-
particle.opacity.value += ((_e = particle.opacity.velocity) !== null && _e !== void 0 ? _e : 0) * delta.factor;
|
|
38
|
-
}
|
|
39
|
-
break;
|
|
40
|
-
case "decreasing":
|
|
41
|
-
if (particle.opacity.value <= minValue) {
|
|
42
|
-
particle.opacity.status = "increasing";
|
|
43
|
-
if (!particle.opacity.loops) {
|
|
44
|
-
particle.opacity.loops = 0;
|
|
45
|
-
}
|
|
46
|
-
particle.opacity.loops++;
|
|
47
|
-
}
|
|
48
|
-
else {
|
|
49
|
-
particle.opacity.value -= ((_f = particle.opacity.velocity) !== null && _f !== void 0 ? _f : 0) * delta.factor;
|
|
50
|
-
}
|
|
51
|
-
break;
|
|
52
|
-
}
|
|
53
|
-
if (particle.opacity.velocity && particle.opacity.decay !== 1) {
|
|
54
|
-
particle.opacity.velocity *= decay;
|
|
55
|
-
}
|
|
56
|
-
checkDestroy(particle, particle.opacity.value, minValue, maxValue);
|
|
57
|
-
if (!particle.destroyed) {
|
|
58
|
-
particle.opacity.value = clamp(particle.opacity.value, minValue, maxValue);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
1
|
+
import { getRandom, getRangeValue, initParticleNumericAnimationValue, } from "@tsparticles/engine";
|
|
2
|
+
import { updateOpacity } from "./Utils";
|
|
61
3
|
export class OpacityUpdater {
|
|
62
4
|
constructor(container) {
|
|
63
5
|
this.container = container;
|
|
@@ -75,17 +17,17 @@ export class OpacityUpdater {
|
|
|
75
17
|
}
|
|
76
18
|
}
|
|
77
19
|
isEnabled(particle) {
|
|
78
|
-
var _a, _b, _c, _d;
|
|
79
20
|
return (!particle.destroyed &&
|
|
80
21
|
!particle.spawning &&
|
|
81
22
|
!!particle.opacity &&
|
|
82
23
|
particle.opacity.enable &&
|
|
83
|
-
((
|
|
84
|
-
((
|
|
85
|
-
(
|
|
24
|
+
((particle.opacity.maxLoops ?? 0) <= 0 ||
|
|
25
|
+
((particle.opacity.maxLoops ?? 0) > 0 &&
|
|
26
|
+
(particle.opacity.loops ?? 0) < (particle.opacity.maxLoops ?? 0))));
|
|
86
27
|
}
|
|
87
28
|
reset(particle) {
|
|
88
29
|
if (particle.opacity) {
|
|
30
|
+
particle.opacity.time = 0;
|
|
89
31
|
particle.opacity.loops = 0;
|
|
90
32
|
}
|
|
91
33
|
}
|
package/browser/Utils.js
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { clamp } from "@tsparticles/engine";
|
|
2
|
+
function checkDestroy(particle, value, minValue, maxValue) {
|
|
3
|
+
switch (particle.options.opacity.animation.destroy) {
|
|
4
|
+
case "max":
|
|
5
|
+
if (value >= maxValue) {
|
|
6
|
+
particle.destroy();
|
|
7
|
+
}
|
|
8
|
+
break;
|
|
9
|
+
case "min":
|
|
10
|
+
if (value <= minValue) {
|
|
11
|
+
particle.destroy();
|
|
12
|
+
}
|
|
13
|
+
break;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
export function updateOpacity(particle, delta) {
|
|
17
|
+
const data = particle.opacity;
|
|
18
|
+
if (particle.destroyed || !data?.enable || ((data.maxLoops ?? 0) > 0 && (data.loops ?? 0) > (data.maxLoops ?? 0))) {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
const minValue = data.min, maxValue = data.max, decay = data.decay ?? 1;
|
|
22
|
+
if (!data.time) {
|
|
23
|
+
data.time = 0;
|
|
24
|
+
}
|
|
25
|
+
if ((data.delayTime ?? 0) > 0 && data.time < (data.delayTime ?? 0)) {
|
|
26
|
+
data.time += delta.value;
|
|
27
|
+
}
|
|
28
|
+
if ((data.delayTime ?? 0) > 0 && data.time < (data.delayTime ?? 0)) {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
switch (data.status) {
|
|
32
|
+
case "increasing":
|
|
33
|
+
if (data.value >= maxValue) {
|
|
34
|
+
data.status = "decreasing";
|
|
35
|
+
if (!data.loops) {
|
|
36
|
+
data.loops = 0;
|
|
37
|
+
}
|
|
38
|
+
data.loops++;
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
data.value += (data.velocity ?? 0) * delta.factor;
|
|
42
|
+
}
|
|
43
|
+
break;
|
|
44
|
+
case "decreasing":
|
|
45
|
+
if (data.value <= minValue) {
|
|
46
|
+
data.status = "increasing";
|
|
47
|
+
if (!data.loops) {
|
|
48
|
+
data.loops = 0;
|
|
49
|
+
}
|
|
50
|
+
data.loops++;
|
|
51
|
+
}
|
|
52
|
+
else {
|
|
53
|
+
data.value -= (data.velocity ?? 0) * delta.factor;
|
|
54
|
+
}
|
|
55
|
+
break;
|
|
56
|
+
}
|
|
57
|
+
if (data.velocity && data.decay !== 1) {
|
|
58
|
+
data.velocity *= decay;
|
|
59
|
+
}
|
|
60
|
+
checkDestroy(particle, data.value, minValue, maxValue);
|
|
61
|
+
if (!particle.destroyed) {
|
|
62
|
+
data.value = clamp(data.value, minValue, maxValue);
|
|
63
|
+
}
|
|
64
|
+
}
|
package/browser/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { OpacityUpdater } from "./OpacityUpdater";
|
|
2
|
-
export async function loadOpacityUpdater(engine) {
|
|
3
|
-
await engine.addParticleUpdater("opacity", (container) => new OpacityUpdater(container));
|
|
2
|
+
export async function loadOpacityUpdater(engine, refresh = true) {
|
|
3
|
+
await engine.addParticleUpdater("opacity", (container) => new OpacityUpdater(container), refresh);
|
|
4
4
|
}
|
package/cjs/OpacityUpdater.js
CHANGED
|
@@ -2,65 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.OpacityUpdater = void 0;
|
|
4
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
|
-
|
|
6
|
-
switch (particle.options.opacity.animation.destroy) {
|
|
7
|
-
case "max":
|
|
8
|
-
if (value >= maxValue) {
|
|
9
|
-
particle.destroy();
|
|
10
|
-
}
|
|
11
|
-
break;
|
|
12
|
-
case "min":
|
|
13
|
-
if (value <= minValue) {
|
|
14
|
-
particle.destroy();
|
|
15
|
-
}
|
|
16
|
-
break;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
function updateOpacity(particle, delta) {
|
|
20
|
-
var _a, _b, _c, _d, _e, _f;
|
|
21
|
-
if (!particle.opacity) {
|
|
22
|
-
return;
|
|
23
|
-
}
|
|
24
|
-
const minValue = particle.opacity.min, maxValue = particle.opacity.max, decay = (_a = particle.opacity.decay) !== null && _a !== void 0 ? _a : 1;
|
|
25
|
-
if (particle.destroyed ||
|
|
26
|
-
!particle.opacity.enable ||
|
|
27
|
-
(((_b = particle.opacity.maxLoops) !== null && _b !== void 0 ? _b : 0) > 0 && ((_c = particle.opacity.loops) !== null && _c !== void 0 ? _c : 0) > ((_d = particle.opacity.maxLoops) !== null && _d !== void 0 ? _d : 0))) {
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
switch (particle.opacity.status) {
|
|
31
|
-
case "increasing":
|
|
32
|
-
if (particle.opacity.value >= maxValue) {
|
|
33
|
-
particle.opacity.status = "decreasing";
|
|
34
|
-
if (!particle.opacity.loops) {
|
|
35
|
-
particle.opacity.loops = 0;
|
|
36
|
-
}
|
|
37
|
-
particle.opacity.loops++;
|
|
38
|
-
}
|
|
39
|
-
else {
|
|
40
|
-
particle.opacity.value += ((_e = particle.opacity.velocity) !== null && _e !== void 0 ? _e : 0) * delta.factor;
|
|
41
|
-
}
|
|
42
|
-
break;
|
|
43
|
-
case "decreasing":
|
|
44
|
-
if (particle.opacity.value <= minValue) {
|
|
45
|
-
particle.opacity.status = "increasing";
|
|
46
|
-
if (!particle.opacity.loops) {
|
|
47
|
-
particle.opacity.loops = 0;
|
|
48
|
-
}
|
|
49
|
-
particle.opacity.loops++;
|
|
50
|
-
}
|
|
51
|
-
else {
|
|
52
|
-
particle.opacity.value -= ((_f = particle.opacity.velocity) !== null && _f !== void 0 ? _f : 0) * delta.factor;
|
|
53
|
-
}
|
|
54
|
-
break;
|
|
55
|
-
}
|
|
56
|
-
if (particle.opacity.velocity && particle.opacity.decay !== 1) {
|
|
57
|
-
particle.opacity.velocity *= decay;
|
|
58
|
-
}
|
|
59
|
-
checkDestroy(particle, particle.opacity.value, minValue, maxValue);
|
|
60
|
-
if (!particle.destroyed) {
|
|
61
|
-
particle.opacity.value = (0, engine_1.clamp)(particle.opacity.value, minValue, maxValue);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
5
|
+
const Utils_1 = require("./Utils");
|
|
64
6
|
class OpacityUpdater {
|
|
65
7
|
constructor(container) {
|
|
66
8
|
this.container = container;
|
|
@@ -78,17 +20,17 @@ class OpacityUpdater {
|
|
|
78
20
|
}
|
|
79
21
|
}
|
|
80
22
|
isEnabled(particle) {
|
|
81
|
-
var _a, _b, _c, _d;
|
|
82
23
|
return (!particle.destroyed &&
|
|
83
24
|
!particle.spawning &&
|
|
84
25
|
!!particle.opacity &&
|
|
85
26
|
particle.opacity.enable &&
|
|
86
|
-
((
|
|
87
|
-
((
|
|
88
|
-
(
|
|
27
|
+
((particle.opacity.maxLoops ?? 0) <= 0 ||
|
|
28
|
+
((particle.opacity.maxLoops ?? 0) > 0 &&
|
|
29
|
+
(particle.opacity.loops ?? 0) < (particle.opacity.maxLoops ?? 0))));
|
|
89
30
|
}
|
|
90
31
|
reset(particle) {
|
|
91
32
|
if (particle.opacity) {
|
|
33
|
+
particle.opacity.time = 0;
|
|
92
34
|
particle.opacity.loops = 0;
|
|
93
35
|
}
|
|
94
36
|
}
|
|
@@ -96,7 +38,7 @@ class OpacityUpdater {
|
|
|
96
38
|
if (!this.isEnabled(particle)) {
|
|
97
39
|
return;
|
|
98
40
|
}
|
|
99
|
-
updateOpacity(particle, delta);
|
|
41
|
+
(0, Utils_1.updateOpacity)(particle, delta);
|
|
100
42
|
}
|
|
101
43
|
}
|
|
102
44
|
exports.OpacityUpdater = OpacityUpdater;
|
package/cjs/Utils.js
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.updateOpacity = void 0;
|
|
4
|
+
const engine_1 = require("@tsparticles/engine");
|
|
5
|
+
function checkDestroy(particle, value, minValue, maxValue) {
|
|
6
|
+
switch (particle.options.opacity.animation.destroy) {
|
|
7
|
+
case "max":
|
|
8
|
+
if (value >= maxValue) {
|
|
9
|
+
particle.destroy();
|
|
10
|
+
}
|
|
11
|
+
break;
|
|
12
|
+
case "min":
|
|
13
|
+
if (value <= minValue) {
|
|
14
|
+
particle.destroy();
|
|
15
|
+
}
|
|
16
|
+
break;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
function updateOpacity(particle, delta) {
|
|
20
|
+
const data = particle.opacity;
|
|
21
|
+
if (particle.destroyed || !data?.enable || ((data.maxLoops ?? 0) > 0 && (data.loops ?? 0) > (data.maxLoops ?? 0))) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
const minValue = data.min, maxValue = data.max, decay = data.decay ?? 1;
|
|
25
|
+
if (!data.time) {
|
|
26
|
+
data.time = 0;
|
|
27
|
+
}
|
|
28
|
+
if ((data.delayTime ?? 0) > 0 && data.time < (data.delayTime ?? 0)) {
|
|
29
|
+
data.time += delta.value;
|
|
30
|
+
}
|
|
31
|
+
if ((data.delayTime ?? 0) > 0 && data.time < (data.delayTime ?? 0)) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
switch (data.status) {
|
|
35
|
+
case "increasing":
|
|
36
|
+
if (data.value >= maxValue) {
|
|
37
|
+
data.status = "decreasing";
|
|
38
|
+
if (!data.loops) {
|
|
39
|
+
data.loops = 0;
|
|
40
|
+
}
|
|
41
|
+
data.loops++;
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
data.value += (data.velocity ?? 0) * delta.factor;
|
|
45
|
+
}
|
|
46
|
+
break;
|
|
47
|
+
case "decreasing":
|
|
48
|
+
if (data.value <= minValue) {
|
|
49
|
+
data.status = "increasing";
|
|
50
|
+
if (!data.loops) {
|
|
51
|
+
data.loops = 0;
|
|
52
|
+
}
|
|
53
|
+
data.loops++;
|
|
54
|
+
}
|
|
55
|
+
else {
|
|
56
|
+
data.value -= (data.velocity ?? 0) * delta.factor;
|
|
57
|
+
}
|
|
58
|
+
break;
|
|
59
|
+
}
|
|
60
|
+
if (data.velocity && data.decay !== 1) {
|
|
61
|
+
data.velocity *= decay;
|
|
62
|
+
}
|
|
63
|
+
checkDestroy(particle, data.value, minValue, maxValue);
|
|
64
|
+
if (!particle.destroyed) {
|
|
65
|
+
data.value = (0, engine_1.clamp)(data.value, minValue, maxValue);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
exports.updateOpacity = updateOpacity;
|
package/cjs/index.js
CHANGED
|
@@ -1,19 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
3
|
exports.loadOpacityUpdater = void 0;
|
|
13
4
|
const OpacityUpdater_1 = require("./OpacityUpdater");
|
|
14
|
-
function loadOpacityUpdater(engine) {
|
|
15
|
-
|
|
16
|
-
yield engine.addParticleUpdater("opacity", (container) => new OpacityUpdater_1.OpacityUpdater(container));
|
|
17
|
-
});
|
|
5
|
+
async function loadOpacityUpdater(engine, refresh = true) {
|
|
6
|
+
await engine.addParticleUpdater("opacity", (container) => new OpacityUpdater_1.OpacityUpdater(container), refresh);
|
|
18
7
|
}
|
|
19
8
|
exports.loadOpacityUpdater = loadOpacityUpdater;
|
package/esm/OpacityUpdater.js
CHANGED
|
@@ -1,63 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
switch (particle.options.opacity.animation.destroy) {
|
|
4
|
-
case "max":
|
|
5
|
-
if (value >= maxValue) {
|
|
6
|
-
particle.destroy();
|
|
7
|
-
}
|
|
8
|
-
break;
|
|
9
|
-
case "min":
|
|
10
|
-
if (value <= minValue) {
|
|
11
|
-
particle.destroy();
|
|
12
|
-
}
|
|
13
|
-
break;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
function updateOpacity(particle, delta) {
|
|
17
|
-
var _a, _b, _c, _d, _e, _f;
|
|
18
|
-
if (!particle.opacity) {
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
21
|
-
const minValue = particle.opacity.min, maxValue = particle.opacity.max, decay = (_a = particle.opacity.decay) !== null && _a !== void 0 ? _a : 1;
|
|
22
|
-
if (particle.destroyed ||
|
|
23
|
-
!particle.opacity.enable ||
|
|
24
|
-
(((_b = particle.opacity.maxLoops) !== null && _b !== void 0 ? _b : 0) > 0 && ((_c = particle.opacity.loops) !== null && _c !== void 0 ? _c : 0) > ((_d = particle.opacity.maxLoops) !== null && _d !== void 0 ? _d : 0))) {
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
|
-
switch (particle.opacity.status) {
|
|
28
|
-
case "increasing":
|
|
29
|
-
if (particle.opacity.value >= maxValue) {
|
|
30
|
-
particle.opacity.status = "decreasing";
|
|
31
|
-
if (!particle.opacity.loops) {
|
|
32
|
-
particle.opacity.loops = 0;
|
|
33
|
-
}
|
|
34
|
-
particle.opacity.loops++;
|
|
35
|
-
}
|
|
36
|
-
else {
|
|
37
|
-
particle.opacity.value += ((_e = particle.opacity.velocity) !== null && _e !== void 0 ? _e : 0) * delta.factor;
|
|
38
|
-
}
|
|
39
|
-
break;
|
|
40
|
-
case "decreasing":
|
|
41
|
-
if (particle.opacity.value <= minValue) {
|
|
42
|
-
particle.opacity.status = "increasing";
|
|
43
|
-
if (!particle.opacity.loops) {
|
|
44
|
-
particle.opacity.loops = 0;
|
|
45
|
-
}
|
|
46
|
-
particle.opacity.loops++;
|
|
47
|
-
}
|
|
48
|
-
else {
|
|
49
|
-
particle.opacity.value -= ((_f = particle.opacity.velocity) !== null && _f !== void 0 ? _f : 0) * delta.factor;
|
|
50
|
-
}
|
|
51
|
-
break;
|
|
52
|
-
}
|
|
53
|
-
if (particle.opacity.velocity && particle.opacity.decay !== 1) {
|
|
54
|
-
particle.opacity.velocity *= decay;
|
|
55
|
-
}
|
|
56
|
-
checkDestroy(particle, particle.opacity.value, minValue, maxValue);
|
|
57
|
-
if (!particle.destroyed) {
|
|
58
|
-
particle.opacity.value = clamp(particle.opacity.value, minValue, maxValue);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
1
|
+
import { getRandom, getRangeValue, initParticleNumericAnimationValue, } from "@tsparticles/engine";
|
|
2
|
+
import { updateOpacity } from "./Utils";
|
|
61
3
|
export class OpacityUpdater {
|
|
62
4
|
constructor(container) {
|
|
63
5
|
this.container = container;
|
|
@@ -75,17 +17,17 @@ export class OpacityUpdater {
|
|
|
75
17
|
}
|
|
76
18
|
}
|
|
77
19
|
isEnabled(particle) {
|
|
78
|
-
var _a, _b, _c, _d;
|
|
79
20
|
return (!particle.destroyed &&
|
|
80
21
|
!particle.spawning &&
|
|
81
22
|
!!particle.opacity &&
|
|
82
23
|
particle.opacity.enable &&
|
|
83
|
-
((
|
|
84
|
-
((
|
|
85
|
-
(
|
|
24
|
+
((particle.opacity.maxLoops ?? 0) <= 0 ||
|
|
25
|
+
((particle.opacity.maxLoops ?? 0) > 0 &&
|
|
26
|
+
(particle.opacity.loops ?? 0) < (particle.opacity.maxLoops ?? 0))));
|
|
86
27
|
}
|
|
87
28
|
reset(particle) {
|
|
88
29
|
if (particle.opacity) {
|
|
30
|
+
particle.opacity.time = 0;
|
|
89
31
|
particle.opacity.loops = 0;
|
|
90
32
|
}
|
|
91
33
|
}
|
package/esm/Utils.js
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { clamp } from "@tsparticles/engine";
|
|
2
|
+
function checkDestroy(particle, value, minValue, maxValue) {
|
|
3
|
+
switch (particle.options.opacity.animation.destroy) {
|
|
4
|
+
case "max":
|
|
5
|
+
if (value >= maxValue) {
|
|
6
|
+
particle.destroy();
|
|
7
|
+
}
|
|
8
|
+
break;
|
|
9
|
+
case "min":
|
|
10
|
+
if (value <= minValue) {
|
|
11
|
+
particle.destroy();
|
|
12
|
+
}
|
|
13
|
+
break;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
export function updateOpacity(particle, delta) {
|
|
17
|
+
const data = particle.opacity;
|
|
18
|
+
if (particle.destroyed || !data?.enable || ((data.maxLoops ?? 0) > 0 && (data.loops ?? 0) > (data.maxLoops ?? 0))) {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
const minValue = data.min, maxValue = data.max, decay = data.decay ?? 1;
|
|
22
|
+
if (!data.time) {
|
|
23
|
+
data.time = 0;
|
|
24
|
+
}
|
|
25
|
+
if ((data.delayTime ?? 0) > 0 && data.time < (data.delayTime ?? 0)) {
|
|
26
|
+
data.time += delta.value;
|
|
27
|
+
}
|
|
28
|
+
if ((data.delayTime ?? 0) > 0 && data.time < (data.delayTime ?? 0)) {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
switch (data.status) {
|
|
32
|
+
case "increasing":
|
|
33
|
+
if (data.value >= maxValue) {
|
|
34
|
+
data.status = "decreasing";
|
|
35
|
+
if (!data.loops) {
|
|
36
|
+
data.loops = 0;
|
|
37
|
+
}
|
|
38
|
+
data.loops++;
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
data.value += (data.velocity ?? 0) * delta.factor;
|
|
42
|
+
}
|
|
43
|
+
break;
|
|
44
|
+
case "decreasing":
|
|
45
|
+
if (data.value <= minValue) {
|
|
46
|
+
data.status = "increasing";
|
|
47
|
+
if (!data.loops) {
|
|
48
|
+
data.loops = 0;
|
|
49
|
+
}
|
|
50
|
+
data.loops++;
|
|
51
|
+
}
|
|
52
|
+
else {
|
|
53
|
+
data.value -= (data.velocity ?? 0) * delta.factor;
|
|
54
|
+
}
|
|
55
|
+
break;
|
|
56
|
+
}
|
|
57
|
+
if (data.velocity && data.decay !== 1) {
|
|
58
|
+
data.velocity *= decay;
|
|
59
|
+
}
|
|
60
|
+
checkDestroy(particle, data.value, minValue, maxValue);
|
|
61
|
+
if (!particle.destroyed) {
|
|
62
|
+
data.value = clamp(data.value, minValue, maxValue);
|
|
63
|
+
}
|
|
64
|
+
}
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { OpacityUpdater } from "./OpacityUpdater";
|
|
2
|
-
export async function loadOpacityUpdater(engine) {
|
|
3
|
-
await engine.addParticleUpdater("opacity", (container) => new OpacityUpdater(container));
|
|
2
|
+
export async function loadOpacityUpdater(engine, refresh = true) {
|
|
3
|
+
await engine.addParticleUpdater("opacity", (container) => new OpacityUpdater(container), refresh);
|
|
4
4
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/updater-opacity",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-beta.0",
|
|
4
4
|
"description": "tsParticles particles opacity updater",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -73,10 +73,11 @@
|
|
|
73
73
|
"unpkg": "tsparticles.updater.opacity.min.js",
|
|
74
74
|
"module": "esm/index.js",
|
|
75
75
|
"types": "types/index.d.ts",
|
|
76
|
+
"sideEffects": false,
|
|
77
|
+
"dependencies": {
|
|
78
|
+
"@tsparticles/engine": "^3.0.0-beta.0"
|
|
79
|
+
},
|
|
76
80
|
"publishConfig": {
|
|
77
81
|
"access": "public"
|
|
78
|
-
},
|
|
79
|
-
"dependencies": {
|
|
80
|
-
"@tsparticles/engine": "^3.0.0-alpha.1"
|
|
81
82
|
}
|
|
82
|
-
}
|
|
83
|
+
}
|