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'
});
// Logo-Animation mit dynamischer Farbsteuerung
let _logoAnim = null;
let _lottieData = null;
let _yellowFills = null;
// Logo-Animation mit dynamischer Farbsteuerung via CSS-Override
// (CSS fill-Property schlägt SVG fill-Attribute per Spec)
let _logoAnim = lottie.loadAnimation({
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) {
s /= 100; l /= 100;
@@ -203,37 +211,26 @@
return '#' + f(0) + f(8) + f(4);
}
function _loadLogoAnim(data) {
const frame = _logoAnim ? Math.floor(_logoAnim.currentFrame) : 0;
if (_logoAnim) { _logoAnim.destroy(); _logoAnim = null; }
_logoAnim = lottie.loadAnimation({
container: document.getElementById('lottie-logo'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: data
function _markYellowElements() {
const svg = document.querySelector('#lottie-logo svg');
if (!svg) return false;
svg.querySelectorAll('[fill="rgb(255,223,0)"]').forEach(el => {
el.classList.add('logo-primary-fill');
});
_logoAnim.goToAndPlay(frame, true);
return svg.querySelector('.logo-primary-fill') !== null;
}
function setLogoColor(hex) {
if (!_lottieData || !_yellowFills) return;
const r = parseInt(hex.slice(1, 3), 16) / 255;
const g = parseInt(hex.slice(3, 5), 16) / 255;
const b = parseInt(hex.slice(5, 7), 16) / 255;
_yellowFills.forEach(fill => { fill.c.k = [r, g, b, 1]; });
_loadLogoAnim(_lottieData);
if (!_yellowMarked) {
_yellowMarked = _markYellowElements();
if (!_yellowMarked) return;
}
if (!_logoStyleEl) {
_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) => {
const hex = _hslToHex(e.detail.h, e.detail.s, e.detail.l);