auto-git:
[change] animeCat.js
This commit is contained in:
119
animeCat.js
119
animeCat.js
@@ -307,82 +307,83 @@ window.AnimeCat = class AnimeCat {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_runJoyAnimation(onFinish) {
|
_runJoyAnimation(onFinish) {
|
||||||
const wrapper = this.wrapper;
|
const img = this.img;
|
||||||
const img = this.img;
|
const origTransition = img.style.transition;
|
||||||
const origTransition = wrapper.style.transition;
|
const origTransform = img.style.transform;
|
||||||
const origTransform = wrapper.style.transform;
|
const origOrigin = img.style.transformOrigin;
|
||||||
const origOrigin = wrapper.style.transformOrigin;
|
|
||||||
|
|
||||||
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() < 1;
|
const salto = Math.random() < 1;
|
||||||
|
|
||||||
// Bubble abkoppeln wie gehabt
|
// Bubble abkoppeln wie gehabt
|
||||||
this.container.appendChild(this.bubble);
|
this.container.appendChild(this.bubble);
|
||||||
this._positionBubbleDetached();
|
this._positionBubbleDetached();
|
||||||
|
|
||||||
// Herz-Emitter sauber platzieren
|
// Herz-Emitter richtig platzieren
|
||||||
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 + 10) + 'px';
|
// <-- Hier kannst du x/y anpassen!
|
||||||
this.heartEmitter.style.bottom = (contRect.bottom - catRect.bottom + 13) + 'px';
|
const emitterX = catRect.right - contRect.left + 16; // <-- X-Versatz, mehr = weiter rechts
|
||||||
|
const emitterY = contRect.bottom - catRect.bottom + 10; // <-- Y-Versatz, mehr = weiter oben
|
||||||
|
this.heartEmitter.style.left = emitterX + '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 Mitte-Unten
|
// Setzt das Zentrum der Drehung auf die Bildmitte
|
||||||
wrapper.style.transformOrigin = '50% 70%';
|
img.style.transformOrigin = '50% 70%';
|
||||||
|
// Salto und Sprung gleichzeitig
|
||||||
// Sprung und Drehung gleichzeitig
|
img.style.transition = 'transform 1.2s cubic-bezier(.19,1,.22,1)';
|
||||||
wrapper.style.transition = 'transform 1.2s cubic-bezier(.19,1,.22,1)';
|
img.style.transform = 'translateY(-40px) rotate(360deg)';
|
||||||
wrapper.style.transform = 'translateY(-40px) rotate(360deg)';
|
spawnHearts();
|
||||||
spawnHearts();
|
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
// Nur runterfallen, Drehung bleibt auf 360°
|
||||||
|
img.style.transition = 'transform 0.8s cubic-bezier(.19,1,.22,1)';
|
||||||
|
img.style.transform = 'translateY(0) rotate(360deg)';
|
||||||
|
img.src = this.images.mouthOpen || this.images.default;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// Nur runterfallen, Drehung bleibt auf 360°
|
if (!this._pettingActive) img.src = this.images.default;
|
||||||
wrapper.style.transition = 'transform 0.8s cubic-bezier(.19,1,.22,1)';
|
setTimeout(() => {
|
||||||
wrapper.style.transform = 'translateY(0) rotate(360deg)';
|
img.style.transition = origTransition || '';
|
||||||
|
img.style.transform = origTransform || '';
|
||||||
|
img.style.transformOrigin = origOrigin || '';
|
||||||
|
this.wrapper.appendChild(this.bubble);
|
||||||
|
this._resetBubbleAttach();
|
||||||
|
if (typeof onFinish === 'function') onFinish();
|
||||||
|
}, 700);
|
||||||
|
}, 2000);
|
||||||
|
}, 1200); // Erst springen + drehen, dann runterfallen
|
||||||
|
} else {
|
||||||
|
// Normale Joy-Animation
|
||||||
|
img.style.transformOrigin = '50% 70%';
|
||||||
|
img.style.transition = 'transform 0.6s cubic-bezier(.19,1,.22,1)';
|
||||||
|
img.style.transform = 'translateY(-40px) rotate(12deg)';
|
||||||
|
setTimeout(() => {
|
||||||
|
spawnHearts();
|
||||||
|
setTimeout(() => {
|
||||||
|
img.style.transition = 'transform 0.8s cubic-bezier(.19,1,.22,1)';
|
||||||
|
img.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) this.img.src = this.images.default;
|
if (!this._pettingActive) img.src = this.images.default;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
wrapper.style.transition = origTransition || '';
|
img.style.transition = origTransition || '';
|
||||||
wrapper.style.transform = origTransform || '';
|
img.style.transform = origTransform || '';
|
||||||
wrapper.style.transformOrigin = origOrigin || '';
|
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
|
}, 2200);
|
||||||
} else {
|
}, 400);
|
||||||
// Normale Joy-Animation
|
|
||||||
wrapper.style.transformOrigin = '50% 70%';
|
|
||||||
wrapper.style.transition = 'transform 0.6s cubic-bezier(.19,1,.22,1)';
|
|
||||||
wrapper.style.transform = 'translateY(-40px) rotate(12deg)';
|
|
||||||
setTimeout(() => {
|
|
||||||
spawnHearts();
|
|
||||||
setTimeout(() => {
|
|
||||||
wrapper.style.transition = 'transform 0.8s cubic-bezier(.19,1,.22,1)';
|
|
||||||
wrapper.style.transform = 'translateY(0) rotate(0deg)';
|
|
||||||
img.src = this.images.mouthOpen || this.images.default;
|
|
||||||
setTimeout(() => {
|
|
||||||
if (!this._pettingActive) this.img.src = this.images.default;
|
|
||||||
setTimeout(() => {
|
|
||||||
wrapper.style.transition = origTransition || '';
|
|
||||||
wrapper.style.transform = origTransform || '';
|
|
||||||
wrapper.style.transformOrigin = origOrigin || '';
|
|
||||||
this.wrapper.appendChild(this.bubble);
|
|
||||||
this._resetBubbleAttach();
|
|
||||||
if (typeof onFinish === 'function') onFinish();
|
|
||||||
}, 700);
|
|
||||||
}, 2000);
|
|
||||||
}, 2200);
|
|
||||||
}, 400);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
_spawnHearts(count = 10) {
|
_spawnHearts(count = 10) {
|
||||||
for (let i = 0; i < count; ++i) {
|
for (let i = 0; i < count; ++i) {
|
||||||
|
|||||||
Reference in New Issue
Block a user