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

Refactor and optimize animation logic in animeCat.js

Browse Source
This commit is contained in:
Victor Giers
2025-05-26 05:40:39 +02:00
parent 7dd99e504a
commit b3cce5f043
1 changed files with 14 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
animeCat.js
View File

@@ -313,48 +313,44 @@ window.AnimeCat = class AnimeCat {
const origTransition = wrapper.style.transition; const origTransition = wrapper.style.transition;
const origTransform = wrapper.style.transform; const origTransform = wrapper.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! // 20% Chance auf Salto!
const salto = Math.random() < 0.2; const salto = Math.random() < 0.2;
// Bubble abkoppeln // Bubble abkoppeln wie gehabt
const bubbleDetached = true; this.container.appendChild(this.bubble);
if (bubbleDetached) { this._positionBubbleDetached();
this.container.appendChild(this.bubble);
this._positionBubbleDetached();
}
// Herzen-Emitter abkoppeln und passend setzen // Berechne Herz-Emitter-Position JETZT
const catRect = this.img.getBoundingClientRect(); const catRect = this.img.getBoundingClientRect();
const contRect = this.container.getBoundingClientRect(); const contRect = this.container.getBoundingClientRect();
this.heartEmitter.style.left = (catRect.right - contRect.left + 15) + 'px'; // Hier kannst du x/y Werte feinjustieren:
this.heartEmitter.style.bottom = (contRect.bottom - catRect.bottom + 12) + 'px'; this.heartEmitter.style.left = (catRect.right - contRect.left + 10) + 'px';
this.heartEmitter.style.bottom = (contRect.bottom - catRect.bottom + 13) + 'px';
// Herzchen-Explosion NACH dem Sprung (also im Peak)!
const spawnHearts = () => this._spawnHearts(12); const spawnHearts = () => this._spawnHearts(12);
if (salto) { if (salto) {
// Salto: beim Springen schon drehen! // 1. Hochspringen & direkt losdrehen
wrapper.style.transition = 'transform 0.8s cubic-bezier(.19,1,.22,1)'; wrapper.style.transition = 'transform 0.8s cubic-bezier(.19,1,.22,1)';
wrapper.style.transform = 'translateY(-40px) rotate(0deg)'; wrapper.style.transform = 'translateY(-40px) rotate(0deg)';
setTimeout(() => { setTimeout(() => {
// 2. Während Sprung: Salto (Herzen werden genau jetzt “ausgestoßen”)
wrapper.style.transition = 'transform 0.6s cubic-bezier(.19,1,.22,1)'; wrapper.style.transition = 'transform 0.6s cubic-bezier(.19,1,.22,1)';
wrapper.style.transform = 'translateY(-40px) rotate(360deg)'; wrapper.style.transform = 'translateY(-40px) rotate(360deg)';
spawnHearts(); spawnHearts();
setTimeout(() => { setTimeout(() => {
// 3. Runterfallen (nur nach unten, KEIN weiteres Rotieren!)
wrapper.style.transition = 'transform 0.8s cubic-bezier(.19,1,.22,1)'; wrapper.style.transition = 'transform 0.8s cubic-bezier(.19,1,.22,1)';
wrapper.style.transform = 'translateY(0) rotate(360deg)'; wrapper.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) { if (!this._pettingActive) this.img.src = this.images.default;
this.img.src = this.images.default;
}
setTimeout(() => { setTimeout(() => {
wrapper.style.transition = origTransition || ''; wrapper.style.transition = origTransition || '';
wrapper.style.transform = origTransform || ''; wrapper.style.transform = origTransform || '';
// Bubble und Herzen zurück // Bubble zurück
this.wrapper.appendChild(this.bubble); this.wrapper.appendChild(this.bubble);
this._resetBubbleAttach(); this._resetBubbleAttach();
if (typeof onFinish === 'function') onFinish(); if (typeof onFinish === 'function') onFinish();
@@ -363,7 +359,7 @@ window.AnimeCat = class AnimeCat {
}, 600); }, 600);
}, 400); }, 400);
} else { } else {
// Normale Joy-Animation: leicht drehen // Normale Joy-Animation
wrapper.style.transition = 'transform 0.6s cubic-bezier(.19,1,.22,1)'; wrapper.style.transition = 'transform 0.6s cubic-bezier(.19,1,.22,1)';
wrapper.style.transform = 'translateY(-40px) rotate(12deg)'; wrapper.style.transform = 'translateY(-40px) rotate(12deg)';
setTimeout(() => { setTimeout(() => {
@@ -373,9 +369,7 @@ window.AnimeCat = class AnimeCat {
wrapper.style.transform = 'translateY(0) rotate(0deg)'; wrapper.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) { if (!this._pettingActive) this.img.src = this.images.default;
this.img.src = this.images.default;
}
setTimeout(() => { setTimeout(() => {
wrapper.style.transition = origTransition || ''; wrapper.style.transition = origTransition || '';
wrapper.style.transform = origTransform || ''; wrapper.style.transform = origTransform || '';