ferdi2go/Pigmento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Logo-Farbe via CSS-Override statt animationData-Reload

Browse Source 
lottie cached Daten intern - Mutation+Reload funktioniert nicht.
Neuer Ansatz: gelbe fill-Elemente einmalig mit Klasse markieren,
CSS fill-Property (schlägt SVG-Attribute per Spec) per style-Element
aktualisieren. Kein Reload, kein Flicker.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ferdinand
2026-04-03 17:29:52 +02:00
parent 2a8b1157ab
commit 446870a94c
1 changed files with 27 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
index.html
View File

@@ -187,10 +187,18 @@
path: 'Background Grey Wave.json' path: 'Background Grey Wave.json'
}); });
// Logo-Animation mit dynamischer Farbsteuerung // Logo-Animation mit dynamischer Farbsteuerung via CSS-Override
let _logoAnim = null; // (CSS fill-Property schlägt SVG fill-Attribute per Spec)
let _lottieData = null; let _logoAnim = lottie.loadAnimation({
let _yellowFills = null; container: document.getElementById('lottie-logo'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'Fluid Loading Animation.json'
});
let _logoStyleEl = null;
let _yellowMarked = false;
function _hslToHex(h, s, l) { function _hslToHex(h, s, l) {
s /= 100; l /= 100; s /= 100; l /= 100;
@@ -203,37 +211,26 @@
return '#' + f(0) + f(8) + f(4); return '#' + f(0) + f(8) + f(4);
} }
function _loadLogoAnim(data) { function _markYellowElements() {
const frame = _logoAnim ? Math.floor(_logoAnim.currentFrame) : 0; const svg = document.querySelector('#lottie-logo svg');
if (_logoAnim) { _logoAnim.destroy(); _logoAnim = null; } if (!svg) return false;
_logoAnim = lottie.loadAnimation({ svg.querySelectorAll('[fill="rgb(255,223,0)"]').forEach(el => {
container: document.getElementById('lottie-logo'), el.classList.add('logo-primary-fill');
renderer: 'svg',
loop: true,
autoplay: true,
animationData: data
}); });
_logoAnim.goToAndPlay(frame, true); return svg.querySelector('.logo-primary-fill') !== null;
} }
function setLogoColor(hex) { function setLogoColor(hex) {
if (!_lottieData || !_yellowFills) return; if (!_yellowMarked) {
const r = parseInt(hex.slice(1, 3), 16) / 255; _yellowMarked = _markYellowElements();
const g = parseInt(hex.slice(3, 5), 16) / 255; if (!_yellowMarked) return;
const b = parseInt(hex.slice(5, 7), 16) / 255; }
_yellowFills.forEach(fill => { fill.c.k = [r, g, b, 1]; }); if (!_logoStyleEl) {
_loadLogoAnim(_lottieData); _logoStyleEl = document.createElement('style');
document.head.appendChild(_logoStyleEl);
}
_logoStyleEl.textContent = '#lottie-logo .logo-primary-fill { fill: ' + hex + '; }';
} }
fetch('Fluid Loading Animation.json')
.then(r => r.json())
.then(data => {
_lottieData = data;
const comp1 = data.assets.find(a => a.id === 'comp_1');
const small4 = comp1.layers.find(l => l.nm === 'Small 4');
_yellowFills = small4.shapes[0].it.filter(i => i.ty === 'fl');
_loadLogoAnim(data);
});
document.addEventListener('colorChanged', (e) => { document.addEventListener('colorChanged', (e) => {
const hex = _hslToHex(e.detail.h, e.detail.s, e.detail.l); const hex = _hslToHex(e.detail.h, e.detail.s, e.detail.l);