giers10/auto-git-gui
1
0
Fork 0
Code Releases Activity

Refactor glow animation logic in animeCat.js

Browse Source
This commit is contained in:
Victor Giers
2025-05-26 07:55:32 +02:00
parent f8259a1913
commit b0bfcfc856
1 changed files with 26 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
animeCat.js
View File

@@ -186,47 +186,36 @@ _lerpColor(a, b, t) {
} }
// Animiert den Glow je nach Commit-Anzahl // Animiert den Glow je nach Commit-Anzahl
animateCatGlow(commitCount) { animateCatGlow(commitCount) {
const glow = this.glow; const glow = this.glow;
if (!glow) return; if (!glow) return;
// Glow-Farbstufen für die Commit-Bereiche // Farbverlauf – nur Farbe wechseln!
const stops = [ const stops = [
{ c: 0, color: [60, 230, 100], opacity: 0.00 }, // unsichtbar → grün { c: 0, color: [60, 230, 100] }, // grün
{ c: 10, color: [60, 230, 100], opacity: 0.25 }, // grün sichtbar { c: 10, color: [60, 230, 100] },
{ c: 50, color: [100, 180, 255], opacity: 0.40 }, // grün → blau { c: 50, color: [100, 180, 255] }, // blau
{ c: 100, color: [180, 120, 255], opacity: 0.55 }, // blau → lila { c: 100, color: [180, 120, 255] }, // lila
{ c: 500, color: [255, 180, 60], opacity: 0.90 }, // lila → orange { c: 500, color: [255, 180, 60] } // orange
]; ];
// Richtige Interpolationsstufe finden: let lower = stops[0], upper = stops[stops.length-1];
let lower = stops[0], upper = stops[stops.length - 1]; for (let i=0; i<stops.length-1; ++i) {
for (let i = 0; i < stops.length - 1; ++i) { if (commitCount >= stops[i].c && commitCount < stops[i+1].c) {
if (commitCount >= stops[i].c && commitCount < stops[i+1].c) { lower = stops[i]; upper = stops[i+1]; break;
lower = stops[i]; }
upper = stops[i+1];
break;
} }
const range = upper.c - lower.c || 1;
const t = Math.min(Math.max((commitCount - lower.c) / range, 0), 1);
const [r,g,b] = this._lerpColor(lower.color, upper.color, t);
this.glow.style.background = `radial-gradient(
ellipse at 50% 50%,
rgba(${r},${g},${b},0.97) 0%,
rgba(${r},${g},${b},0.24) 70%,
rgba(0,0,0,0) 100%
)`;
} }
const range = upper.c - lower.c || 1;
const t = Math.min(Math.max((commitCount - lower.c) / range, 0), 1);
// Farbe und Opazität sanft interpolieren
const [r, g, b] = this._lerpColor(lower.color, upper.color, t);
const opacity = this._lerp(lower.opacity, upper.opacity, t);
// Größe interpolieren (0–500 Commits)
const minSize = 80, maxSize = 170;
const sizeFactor = Math.min(commitCount / 500, 1);
const size = minSize + sizeFactor * (maxSize - minSize);
// Styles setzen
glow.style.background = `radial-gradient(
ellipse at 50% 50%,
rgba(${r},${g},${b},0.97) 0%,
rgba(${r},${g},${b},0.24) 70%,
rgba(0,0,0,0) 100%
)`;
// Bubble für Animation absolut an Position der Katze anheften // Bubble für Animation absolut an Position der Katze anheften
_positionBubbleDetached() { _positionBubbleDetached() {