feat: scaleY-only squash with bottom anchor + animation cooldown + finer smooth steps

This commit is contained in:
2026-09-01 20:32:34 +08:00
parent cfb218ba28
commit 82399fcae1
+28 -9
View File
@@ -92,6 +92,7 @@ export default {
bubbleText: '', bubbleText: '',
bubbleIndex: 0, bubbleIndex: 0,
animStep: 0, animStep: 0,
animLock: false,
settings: { settings: {
serverUrl: 'ws://127.0.0.1:8787', serverUrl: 'ws://127.0.0.1:8787',
userId: '', userId: '',
@@ -149,13 +150,22 @@ export default {
}, },
onTap() { onTap() {
// Q 弹:压扁(s1) -> 回弹过冲(s2) -> 回正(s0),类名驱动 // 冷却:动画进行中不重复触发
if (this.animLock) return
this.animLock = true
// Q 弹:底部不动,从上往下收缩,再回弹(scaleY 多帧平滑)
const self = this const self = this
this.animStep = 1 this.animStep = 0
setTimeout(() => { self.animStep = 2 }, 60) setTimeout(() => { self.animStep = 1 }, 0) // scaleY 0.92
setTimeout(() => { self.animStep = 0 }, 130) setTimeout(() => { self.animStep = 2 }, 40) // scaleY 0.84
setTimeout(() => { self.animStep = 3 }, 85) // scaleY 0.95
setTimeout(() => { self.animStep = 4 }, 135) // scaleY 1.05
setTimeout(() => { self.animStep = 0 }, 200) // scaleY 1.00
// 回弹时播鸭叫 // 回弹时播鸭叫
setTimeout(() => { playDuckSound() }, 130) setTimeout(() => { playDuckSound() }, 150)
// 冷却结束
setTimeout(() => { self.animLock = false }, 360)
// 轮播趣味/上轮消耗信息 // 轮播趣味/上轮消耗信息
const idx = this.bubbleIndex % this.bubblePresets.length const idx = this.bubbleIndex % this.bubblePresets.length
@@ -262,19 +272,28 @@ export default {
.mascot { .mascot {
width: 320px; width: 320px;
height: 320px; height: 320px;
transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center bottom;
transition: transform 0.14s cubic-bezier(0.33, 1.12, 0.68, 1);
} }
.step0 { .step0 {
transform: scale(1, 1); transform: scaleY(1);
} }
.step1 { .step1 {
transform: scale(1.06, 0.84); transform: scaleY(0.92);
} }
.step2 { .step2 {
transform: scale(0.98, 1.06); transform: scaleY(0.82);
}
.step3 {
transform: scaleY(0.95);
}
.step4 {
transform: scaleY(1.05);
} }
.peak { .peak {