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

Refactor joy animation logic in animeCat.js

Browse Source
This commit is contained in:
Victor Giers
2025-05-26 07:27:07 +02:00
parent 1e358d7230
commit 1c295cae81
1 changed files with 24 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
animeCat.js
View File

@@ -397,73 +397,66 @@ animateCatGlow(commitCount) {
} }
_runJoyAnimation(onFinish) { _runJoyAnimation(onFinish) {
const img = this.img; const img = this.img;
const origTransition = img.style.transition; const catBox = this.catContainer;
const origTransform = img.style.transform; const origCatTransition = catBox.style.transition;
const origOrigin = img.style.transformOrigin; const origCatTransform = catBox.style.transform;
img.src = this.images.joy || this.images.default; img.src = this.images.joy || this.images.default;
// 20% Chance auf Salto! // 20% Chance auf Salto!
const salto = Math.random() < 0.2; const salto = Math.random() < 0.2;
// Bubble abkoppeln wie gehabt // Bubble abkoppeln
this.container.appendChild(this.bubble); this.container.appendChild(this.bubble);
this._positionBubbleDetached(); this._positionBubbleDetached();
// Herz-Emitter richtig platzieren // Herz-Emitter anpassen
const catRect = this.img.getBoundingClientRect(); const catRect = this.catContainer.getBoundingClientRect();
const contRect = this.container.getBoundingClientRect(); const contRect = this.container.getBoundingClientRect();
// <-- Hier kannst du x/y anpassen! const emitterX = catRect.right - contRect.left + 12;
const emitterX = catRect.right - contRect.left + 16; // <-- X-Versatz, mehr = weiter rechts const emitterY = contRect.bottom - catRect.bottom + 34;
const emitterY = contRect.bottom - catRect.bottom + 40; // <-- Y-Versatz, mehr = weiter oben
this.heartEmitter.style.left = emitterX + 'px'; this.heartEmitter.style.left = emitterX + 'px';
this.heartEmitter.style.bottom = emitterY + 'px'; this.heartEmitter.style.bottom = emitterY + 'px';
const spawnHearts = () => this._spawnHearts(12); const spawnHearts = () => this._spawnHearts(12);
if (salto) { if (salto) {
// Setzt das Zentrum der Drehung auf die Bildmitte // Salto: gesamter Container springt & dreht
img.style.transformOrigin = '50% 70%'; catBox.style.transition = 'transform 1.2s cubic-bezier(.19,1,.22,1)';
// Salto und Sprung gleichzeitig catBox.style.transform = 'translateY(-40px) rotate(360deg)';
img.style.transition = 'transform 1.2s cubic-bezier(.19,1,.22,1)';
img.style.transform = 'translateY(-40px) rotate(360deg)';
spawnHearts(); spawnHearts();
setTimeout(() => { setTimeout(() => {
// Nur runterfallen, Drehung bleibt auf 360° catBox.style.transition = 'transform 0.8s cubic-bezier(.19,1,.22,1)';
img.style.transition = 'transform 0.8s cubic-bezier(.19,1,.22,1)'; catBox.style.transform = 'translateY(0) rotate(360deg)';
img.style.transform = 'translateY(0) rotate(360deg)';
img.src = this.images.mouthOpen || this.images.default; img.src = this.images.mouthOpen || this.images.default;
setTimeout(() => { setTimeout(() => {
if (!this._pettingActive) img.src = this.images.default; if (!this._pettingActive) img.src = this.images.default;
setTimeout(() => { setTimeout(() => {
img.style.transition = origTransition || ''; catBox.style.transition = origCatTransition || '';
img.style.transform = origTransform || ''; catBox.style.transform = origCatTransform || '';
img.style.transformOrigin = origOrigin || '';
this.wrapper.appendChild(this.bubble); this.wrapper.appendChild(this.bubble);
this._resetBubbleAttach(); this._resetBubbleAttach();
if (typeof onFinish === 'function') onFinish(); if (typeof onFinish === 'function') onFinish();
}, 700); }, 700);
}, 2000); }, 2000);
}, 1200); // Erst springen + drehen, dann runterfallen }, 1200);
} else { } else {
// Normale Joy-Animation // Normaler Joy-Jump
img.style.transformOrigin = '50% 70%'; catBox.style.transition = 'transform 0.6s cubic-bezier(.19,1,.22,1)';
img.style.transition = 'transform 0.6s cubic-bezier(.19,1,.22,1)'; catBox.style.transform = 'translateY(-40px) rotate(12deg)';
img.style.transform = 'translateY(-40px) rotate(12deg)';
setTimeout(() => { setTimeout(() => {
spawnHearts(); spawnHearts();
setTimeout(() => { setTimeout(() => {
img.style.transition = 'transform 0.8s cubic-bezier(.19,1,.22,1)'; catBox.style.transition = 'transform 0.8s cubic-bezier(.19,1,.22,1)';
img.style.transform = 'translateY(0) rotate(0deg)'; catBox.style.transform = 'translateY(0) rotate(0deg)';
img.src = this.images.mouthOpen || this.images.default; img.src = this.images.mouthOpen || this.images.default;
setTimeout(() => { setTimeout(() => {
if (!this._pettingActive) img.src = this.images.default; if (!this._pettingActive) img.src = this.images.default;
setTimeout(() => { setTimeout(() => {
img.style.transition = origTransition || ''; catBox.style.transition = origCatTransition || '';
img.style.transform = origTransform || ''; catBox.style.transform = origCatTransform || '';
img.style.transformOrigin = origOrigin || '';
this.wrapper.appendChild(this.bubble); this.wrapper.appendChild(this.bubble);
this._resetBubbleAttach(); this._resetBubbleAttach();
if (typeof onFinish === 'function') onFinish(); if (typeof onFinish === 'function') onFinish();