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

Refactor and optimize joy animation logic in animeCat.js

Browse Source
This commit is contained in:
Victor Giers
2025-05-26 05:22:07 +02:00
parent ad9c4db36a
commit 71fd1f54af
1 changed files with 32 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
animeCat.js
View File

@@ -305,56 +305,47 @@ _runJoyAnimation(onFinish) {
const origImgTransition = img.style.transition; const origImgTransition = img.style.transition;
const origImgTransform = img.style.transform; const origImgTransform = img.style.transform;
// Bild auf joy.png setzen:
img.src = this.images.joy || this.images.default; img.src = this.images.joy || this.images.default;
// 20% Chance auf Salto!
const salto = Math.random() < 0.2; const salto = Math.random() < 0.2;
// Dauer Sprung+Drehung nach oben
const upTime = 600;
// Zeit "oben bleiben" (stand)
const hangTime = salto ? 500 : 1800;
// Dauer Rückkehr nach unten
const downTime = 800;
// Erst: Wrapper nach oben bewegen (Katze springt hoch) // Herzchen-Explosion starten
wrapper.style.transition = 'transform 0.4s cubic-bezier(.19,1,.22,1)'; this._spawnHearts(12);
// Sofort beide gleichzeitig animieren!
wrapper.style.transition = `transform ${upTime}ms cubic-bezier(.19,1,.22,1)`;
wrapper.style.transform = 'translateY(-40px)'; wrapper.style.transform = 'translateY(-40px)';
img.style.transition = ''; img.style.transition = `transform ${upTime}ms cubic-bezier(.19,1,.22,1)`;
img.style.transform = ''; img.style.transform = salto ? 'rotate(360deg)' : 'rotate(12deg)';
setTimeout(() => { setTimeout(() => {
if (salto) { // Katze bleibt kurz oben, keine weitere Rotation
// Salto: Drehe NUR das Katzenbild um 360°! // Jetzt: runter + zurückdrehen
img.style.transition = 'transform 0.6s cubic-bezier(.19,1,.22,1)'; wrapper.style.transition = `transform ${downTime}ms cubic-bezier(.19,1,.22,1)`;
img.style.transform = 'rotate(360deg)'; wrapper.style.transform = 'translateY(0)';
} else { img.src = this.images.mouthOpen || this.images.default;
// Normale Joy-Animation: Drehe NUR das Katzenbild leicht! img.style.transition = `transform ${downTime}ms cubic-bezier(.19,1,.22,1)`;
img.style.transition = 'transform 0.6s cubic-bezier(.19,1,.22,1)'; img.style.transform = 'rotate(0deg)';
img.style.transform = 'rotate(12deg)';
}
setTimeout(() => { setTimeout(() => {
// Rücksprung: Wrapper wieder runter, Drehung zurücksetzen if (!this._pettingActive) {
wrapper.style.transition = 'transform 0.8s cubic-bezier(.19,1,.22,1)'; this.img.src = this.images.default;
wrapper.style.transform = 'translateY(0)'; }
img.src = this.images.mouthOpen || this.images.default;
img.style.transition = 'transform 0.8s cubic-bezier(.19,1,.22,1)';
img.style.transform = 'rotate(0deg)';
setTimeout(() => { setTimeout(() => {
if (!this._pettingActive) { // Reset auf Original-Styles
this.img.src = this.images.default; wrapper.style.transition = origWrapperTransition || '';
} wrapper.style.transform = origWrapperTransform || '';
setTimeout(() => { img.style.transition = origImgTransition || '';
// Alles zurücksetzen img.style.transform = origImgTransform || '';
wrapper.style.transition = origWrapperTransition || ''; if (typeof onFinish === 'function') onFinish();
wrapper.style.transform = origWrapperTransform || ''; }, 700);
img.style.transition = origImgTransition || ''; }, downTime);
img.style.transform = origImgTransform || ''; }, upTime + hangTime);
if (typeof onFinish === 'function') onFinish();
}, 700);
}, 2000);
}, salto ? 600 : 2200);
}, 400);
// Herzchen-Explosion unabhängig vom Salto
this._spawnHearts(12);
} }
_spawnHearts(count = 10) { _spawnHearts(count = 10) {